<!-- ============================================================
SCROLLYRABBITHOLE
A modal overlay for optional deep dives and side quests.

TO USE:
1. Paste ScrollyCore once near the top of the Squarespace page.
2. Paste this block where you want the rabbit hole trigger.
3. Change the label, title, body, and button text.
4. Replace the modal content with your own deeper material.
5. IMPORTANT: each rabbit hole needs a UNIQUE modal ID.

GOOD FOR:
- side explorations
- citations and references
- definitions that are too long for expandables
- conceptual rabbit trails
- embedded links
- optional deeper dives

BEGINNER KNOBS:
- data-rabbit-open must match the modal id
- data-rabbit-close must also match the same modal id
- id="rabbit-hole-1" must be unique on the page
- aria-labelledby should point to the modal title id
- modal-body can contain:
  - paragraphs
  - images
  - links
  - videos
  - even other ScrollyBlocks
- Delete the optional external link if you do not need it
============================================================ -->

<section class="section">
  <div class="section-inner">

    <div class="rabbit-hole-card fade-in">

      <div class="section-label">
        Optional deep dive
      </div>

      <h2>
        Rabbit holes let readers wander without losing the main thread.
      </h2>

      <p>
        Use this for side explorations, deeper explanations, references, or conceptual detours that some readers will love and others may skip. The reader can close the rabbit hole and return to the main story.
      </p>

      <button
        class="rabbit-hole-button"
        type="button"
        data-rabbit-open="rabbit-hole-1"
      >
        Open rabbit hole
      </button>

    </div>

  </div>
</section>

<!-- ============================================================
RABBIT HOLE MODAL
IMPORTANT:
The id below must match the button's data-rabbit-open value.
============================================================ -->

<div
  class="rabbit-hole-overlay"
  id="rabbit-hole-1"
  role="dialog"
  aria-modal="true"
  aria-labelledby="rabbit-hole-1-title"
>

  <div class="rabbit-hole-modal">

    <div class="rabbit-hole-modal-header">

      <h2 id="rabbit-hole-1-title">
        A deeper exploration
      </h2>

      <button
        class="rabbit-hole-close"
        type="button"
        data-rabbit-close="rabbit-hole-1"
      >
        Close
      </button>

    </div>

    <div class="rabbit-hole-modal-body">

      <p>
        This is the expanded rabbit hole content area.
      </p>

      <p>
        You can place:
      </p>

      <ul>
        <li>longer explanations</li>
        <li>citations</li>
        <li>embedded links</li>
        <li>images</li>
        <li>videos</li>
        <li>or even nested ScrollyBlocks</li>
      </ul>

      <a
        class="rabbit-hole-link"
        href="https://www.anthropic.com"
        target="_blank"
        rel="noopener noreferrer"
      >
        Optional external link
      </a>

    </div>

  </div>

</div>