<!-- ============================================================
SCROLLYEXPAND
An inline expandable note that opens inside the normal page flow.

TO USE:
1. Paste ScrollyCore once near the top of the Squarespace page.
2. Paste this block where you want the optional explanation.
3. Change the summary text, label, title, and body.
4. Keep the <details> and <summary> tags intact.

GOOD FOR:
- definitions
- caveats
- source notes
- short deeper explanations
- technical details that should not interrupt the main story

BEGINNER KNOBS:
- summary = the clickable closed text
- details/summary provide the open-close behavior without extra JavaScript
- section-label = small category label inside the expanded area
- h2 = expanded note title
- p = expanded note body
- Delete the entire <div class="section-label">...</div> block if you do not want a label
============================================================ -->

<section class="section">
  <div class="section-inner">
    <details class="expandable-note fade-in">
      <summary>
        Open a short deeper explanation
      </summary>

      <div class="expandable-note-content">
        <div class="section-label">
          Stay in the flow
        </div>

        <h2>
          Use ScrollyExpand for optional explanation inside the page.
        </h2>

        <p>
          This pattern is useful when the main story needs to keep moving, but some readers may want more context, a definition, a caveat, or a technical explanation. It expands in place, then collapses again.
        </p>
      </div>
    </details>
  </div>
</section>