/* ============================================================
   LAUREN-PROOF AREA #1: STYLE SETTINGS
   Safe edits: colors, max width, and fonts.
============================================================ */
    :root {
      --bg: #f7f4ee;
      --text: #222222;
      --muted: #666666;
      --card: #ffffff;
      --accent: #425c45;
      --accent-light: #dce5dc;
      --max-width: 1180px;
      --serif: Georgia, 'Times New Roman', serif;
      --sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: var(--sans);
      line-height: 1.6;
    }

    img {
      max-width: 100%;
      display: block;
    }


    h1, h2, h3 {
      font-family: var(--serif);
      line-height: 1.08;
      margin: 0 0 1rem;
    }

    h1 {
      font-size: clamp(3rem, 9vw, 6.5rem);
    }

    h2 {
      font-size: clamp(2rem, 5vw, 4rem);
    }

    h3 {
      font-size: clamp(1.5rem, 3vw, 2.35rem);
    }

    p {
      margin: 0 0 1rem;
      font-size: clamp(1rem, 1.5vw, 1.18rem);
    }

    .lede {
      font-size: clamp(1.2rem, 2vw, 1.5rem);
      color: #333;
    }

    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      width: 0%;
      height: 5px;
      background: var(--accent);
      z-index: 1000;
    }


    .section {
      padding: 5rem 1.25rem;
    }

    .section.screen {
      min-height: 100vh;
      display: grid;
      align-items: center;
    }

    .section.tall {
      min-height: 140vh;
      display: grid;
      align-items: center;
    }

    .section-inner {
      width: min(100%, var(--max-width));
      margin: 0 auto;
    }

    .centered {
      max-width: 780px;
      margin: 0 auto;
      text-align: center;
    }

    .centered p {
      font-size: clamp(1.15rem, 2vw, 1.45rem);
    }

    .split {
      display: grid;
      gap: clamp(1.5rem, 4vw, 4rem);
      align-items: center;
    }

    .split.ratio-50-50 {
      grid-template-columns: 1fr 1fr;
    }

    .split.ratio-30-70 {
      grid-template-columns: 3fr 7fr;
    }

    .split.ratio-70-30 {
      grid-template-columns: 7fr 3fr;
    }

    .full-media {
      width: min(100%, 1400px);
      margin: 0 auto;
    }

    .full-media img,
    .media-card img {
      width: 100%;
      border-radius: 1.25rem;
      box-shadow: 0 20px 50px rgba(0,0,0,0.14);
      object-fit: cover;
    }

    .media-card img.cover {
      aspect-ratio: 4 / 3;
    }

    .caption {
      margin-top: 0.75rem;
      color: var(--muted);
      font-size: 0.92rem;
    }

    .text-card {
      background: rgba(255,255,255,0.72);
      padding: clamp(1.25rem, 3vw, 2.25rem);
      border-radius: 1.25rem;
      box-shadow: 0 12px 35px rgba(0,0,0,0.08);
    }

/* ============================================================
   LAUREN-PROOF AREA #2D: LIGHTWEIGHT HOVER POLISH
   These effects make cards, images, buttons, and diagrams feel
   more responsive without changing the story content.
============================================================ */
    .text-card,
    .media-card,
    .full-media,
    .switcher-media figure,
    .scroll-swap-media,
    .background-story-card,
    .rabbit-hole-card,
    .swap-step,
    .diagram-step,
    .step,
    .expandable-note {
      transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
    }

    .text-card:hover,
    .background-story-card:hover,
    .rabbit-hole-card:hover,
    .swap-step:hover,
    .diagram-step:hover,
    .step:hover,
    .expandable-note:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 45px rgba(0,0,0,0.14);
    }

    .media-card,
    .full-media,
    .switcher-media figure,
    .scroll-swap-media,
    .sticky-visual {
      overflow: hidden;
      border-radius: 1.25rem;
    }

    .media-card img,
    .full-media img,
    .switcher-media img,
    .scroll-swap-media img,
    .sticky-visual img {
      transition: transform 450ms ease, filter 450ms ease;
    }

    .media-card:hover img,
    .full-media:hover img,
    .switcher-media figure:hover img,
    .scroll-swap-media:hover img,
    .sticky-visual:hover img {
      transform: scale(1.025);
      filter: brightness(1.04);
    }

    .switcher-button:hover,
    .rabbit-hole-button:hover,
    .rabbit-hole-close:hover,
    .rabbit-hole-link:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(0,0,0,0.13);
    }

 
    .switcher {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: clamp(1.5rem, 4vw, 4rem);
      align-items: center;
    }

    .switcher-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin: 1.5rem 0 2.5rem;
    }

    .switcher-button {
      border: 2px solid var(--accent);
      background: transparent;
      color: var(--accent);
      border-radius: 999px;
      padding: 0.7rem 1rem;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      transition: background 180ms ease, color 180ms ease, transform 180ms ease;
    }

    .switcher-button:hover,
    .switcher-button:focus-visible {
      background: var(--accent-light);
      outline: 3px solid rgba(66, 92, 69, 0.25);
      outline-offset: 3px;
    }

    .switcher-button.active {
      background: var(--accent);
      color: #ffffff;
    }

    .switcher-media img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: 1.25rem;
      box-shadow: 0 20px 50px rgba(0,0,0,0.14);
    }

    .switcher-panel {
      display: none;
    }

    .switcher-panel.active {
      display: block;
    }

/* ============================================================
   LAUREN-PROOF AREA #2: SCROLLSWAP ALIGNMENT KNOBS
   Safe edits: image/text alignment, spacing, and column balance.
============================================================ */
    .scroll-swap {
      /* Alignment knobs for the scrollSwap section:
         - image-top controls where the sticky image sits in the browser window.
         - steps-top nudges the whole stack of step cards down.
         - step-gap controls the vertical distance between step cards.
         - image-width and text-width control column balance.
      */
      --scroll-swap-image-top: 4rem;
      --scroll-swap-steps-top: 0rem;
      --scroll-swap-step-gap: 35vh;
      --scroll-swap-image-width: 1fr;
      --scroll-swap-text-width: 1fr;

      display: grid;
      grid-template-columns: var(--scroll-swap-image-width) var(--scroll-swap-text-width);
      gap: clamp(2rem, 5vw, 5rem);
      align-items: start;
      padding-top: 0;
    }

    .scroll-swap-intro {
      max-width: 820px;
      margin: 0 auto 4rem;
    }

    .scroll-swap-media {
      position: sticky;
      top: var(--scroll-swap-image-top);
      margin: 0;
    }

    .scroll-swap-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1.25rem;
  box-shadow: 0 20px 50px rgba(0,0,0,0.14);
 transition: opacity 900ms ease, transform 1200ms ease, filter 1200ms ease;
  transform: scale(1);
}

.scroll-swap-media img.is-changing {
  opacity: 0;
  transform: scale(1.018);
  filter: blur(1px);
}

    .scroll-swap-steps {
      display: grid;
      gap: var(--scroll-swap-step-gap);
      padding: var(--scroll-swap-steps-top) 0 20vh;
      margin: 0;
    }

    .swap-step {
      background: rgba(255,255,255,0.78);
      padding: clamp(1.25rem, 3vw, 2rem);
      border-radius: 1.25rem;
      box-shadow: 0 12px 35px rgba(0,0,0,0.08);
      opacity: 0.45;
      transform: translateY(16px);
      transition: opacity 350ms ease, transform 350ms ease;
      margin: 0;
    }

    .swap-step.active {
      opacity: 1;
      transform: translateY(0);
    }

    .parallax-section {
      min-height: 90vh;
      display: grid;
      place-items: center;
      padding: 5rem 1.25rem;
      color: #ffffff;
      text-align: center;
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    .parallax-bg {
      position: absolute;
      inset: -28% 0;
      background-image: linear-gradient(rgba(20, 24, 20, 0.42), rgba(20, 24, 20, 0.42)), var(--parallax-image);
      background-size: cover;
      min-height: 130%;
      background-position: center;
      z-index: -1;
      transform: translateY(0);
      will-change: transform;
    }

    .parallax-card {
      max-width: 780px;
      background: rgba(0, 0, 0, 0.35);
      padding: clamp(1.5rem, 4vw, 3rem);
      border-radius: 1.25rem;
      backdrop-filter: blur(4px);
    }
.parallax-card h2 {
  color: #f5f1e8;
  font-weight: 600;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
  letter-spacing: -0.02em;
}

.parallax-card p {
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 10px rgba(0,0,0,0.35);
}

.parallax-card .section-label {
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.12em;
}
/* ============================================================
   LAUREN-PROOF AREA #2A: VIDEO HERO / VIDEO STORY SETTINGS
   Use videoHero when you want a video behind text.

   Safe beginner edits happen in storyData:
   - video = video file URL
   - poster = fallback image while video loads
   - overlay = darkness layer for readability
   - title/body/label = text shown over the video

   Important: background videos should usually be muted, slow,
   atmospheric, and not essential for understanding the story.
============================================================ */
    .video-hero {
      min-height: 100vh;
      position: relative;
      display: grid;
      place-items: center;
      padding: 5rem 1.25rem;
      overflow: hidden;
      color: #ffffff;
      text-align: center;
      isolation: isolate;
    }

    .video-hero video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -2;
    }

    .video-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--video-overlay, rgba(0, 0, 0, 0.42));
      z-index: -1;
    }

    .video-hero-card {
      max-width: 820px;
      background: rgba(0, 0, 0, 0.28);
      padding: clamp(1.5rem, 4vw, 3rem);
      border-radius: 1.25rem;
      backdrop-filter: blur(4px);
      box-shadow: 0 20px 50px rgba(0,0,0,0.22);
    }

    .video-hero-card .section-label {
      color: #ffffff;
    }

/* ============================================================
   LAUREN-PROOF AREA #2B: BACKGROUNDSTORY SETTINGS
   Use backgroundStory when you want a full-screen background image
   while several text cards scroll over it.

   Safe beginner edits:
   - overlay controls image darkness
   - card-width controls text card width
   - card-position controls left / center / right placement
   - card-gap controls vertical distance between cards
============================================================ */
    .background-story {
      --background-story-overlay: rgba(0, 0, 0, 0.38);
      --background-story-card-width: 560px;
      --background-story-card-position: flex-start;
      --background-story-card-gap: 65vh;

      position: relative;
      min-height: 220vh;
      color: #ffffff;
      isolation: isolate;
    }

    .background-story-bg {
      position: sticky;
      top: 0;
      height: 100vh;
      width: 100%;
      background-image: linear-gradient(var(--background-story-overlay), var(--background-story-overlay)), var(--background-story-image);
      background-size: cover;
      background-position: center;
      z-index: -1;
    }

    .background-story-content {
      width: min(100%, var(--max-width));
      margin: -100vh auto 0;
      padding: 25vh 1.25rem 35vh;
      display: flex;
      flex-direction: column;
      align-items: var(--background-story-card-position);
      gap: var(--background-story-card-gap);
    }

    .background-story-card {
      width: min(100%, var(--background-story-card-width));
      background: rgba(255, 255, 255, 0.82);
      color: var(--text);
      padding: clamp(1.25rem, 3vw, 2.25rem);
      border-radius: 1.25rem;
      box-shadow: 0 20px 50px rgba(0,0,0,0.22);
      backdrop-filter: blur(4px);
    }

    .background-story-card .section-label {
      color: var(--accent);
    }

/* ============================================================
   LAUREN-PROOF AREA #2C: RABBIT HOLES + EXPANDABLE NOTES
   expandableNote = opens extra explanation inside the normal flow.
   rabbitHole = opens a modal overlay on top of the page.

   Safe beginner edits happen in storyData:
   - button text
   - title
   - summary/body text
   - optional link URL
============================================================ */
    .expandable-note {
      max-width: 820px;
      margin: 0 auto;
      border: 1px solid rgba(66, 92, 69, 0.24);
      border-radius: 1.25rem;
      background: rgba(255,255,255,0.78);
      box-shadow: 0 12px 35px rgba(0,0,0,0.08);
      overflow: hidden;
    }

    .expandable-note summary {
      cursor: pointer;
      padding: clamp(1.1rem, 3vw, 1.75rem);
      font-weight: 800;
      color: var(--accent);
      list-style: none;
    }

    .expandable-note summary::-webkit-details-marker {
      display: none;
    }

    .expandable-note summary::before {
      content: "＋";
      display: inline-block;
      margin-right: 0.65rem;
      font-weight: 900;
    }

    .expandable-note[open] summary::before {
      content: "−";
    }

    .expandable-note-content {
      padding: 0 clamp(1.1rem, 3vw, 1.75rem) clamp(1.1rem, 3vw, 1.75rem);
    }

    .rabbit-hole-card {
      max-width: 820px;
      margin: 0 auto;
      background: rgba(255,255,255,0.78);
      padding: clamp(1.25rem, 3vw, 2.25rem);
      border-radius: 1.25rem;
      box-shadow: 0 12px 35px rgba(0,0,0,0.08);
    }

    .rabbit-hole-button,
    .rabbit-hole-close,
    .rabbit-hole-link {
      border: 2px solid var(--accent);
      background: var(--accent);
      color: #ffffff;
      border-radius: 999px;
      padding: 0.75rem 1.1rem;
      font: inherit;
      font-weight: 800;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      margin-top: 1rem;
    }

    .rabbit-hole-close {
      margin-top: 0;
      background: #ffffff;
      color: var(--accent);
    }

    .rabbit-hole-overlay {
      position: fixed;
      inset: 0;
      z-index: 2000;
      background: rgba(20, 20, 20, 0.62);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 2rem;
    }

    .rabbit-hole-overlay.open {
      display: flex;
    }

    .rabbit-hole-modal {
      width: min(100%, 980px);
      max-height: min(88vh, 820px);
      overflow: auto;
      background: var(--bg);
      color: var(--text);
      border-radius: 1.25rem;
      box-shadow: 0 30px 90px rgba(0,0,0,0.35);
      padding: clamp(1.25rem, 3vw, 2rem);
    }

    .rabbit-hole-modal-header {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      align-items: start;
      margin-bottom: 1rem;
    }

    .rabbit-hole-modal-body {
      display: grid;
      gap: 1rem;
    }

    body.rabbit-hole-open {
      overflow: hidden;
    }

    .diagram-layout {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: clamp(2rem, 5vw, 5rem);
      align-items: start;
    }

    .diagram-visual {
      position: sticky;
      top: 4rem;
      background: rgba(255,255,255,0.72);
      border-radius: 1.25rem;
      padding: 1rem;
      box-shadow: 0 20px 50px rgba(0,0,0,0.10);
    }

    .diagram-visual svg {
      width: 100%;
      height: auto;
      display: block;
    }

    .diagram-node,
    .diagram-link {
      opacity: 0.25;
      transition: opacity 350ms ease, stroke-width 350ms ease, transform 350ms ease, filter 220ms ease;
      transform-origin: center;
      cursor: pointer;
    }

    .diagram-node.active,
    .diagram-link.active {
      opacity: 1;
      stroke-width: 5;
    }

    .diagram-node:hover,
    .diagram-link:hover,
    .diagram-node.hover-match,
    .diagram-link.hover-match {
      opacity: 1;
      stroke-width: 5;
      filter: brightness(1.08);
    }

    .diagram-text {
      display: grid;
      gap: 35vh;
      padding: 20vh 0;
    }

    .diagram-step {
      background: rgba(255,255,255,0.78);
      padding: clamp(1.25rem, 3vw, 2rem);
      border-radius: 1.25rem;
      box-shadow: 0 12px 35px rgba(0,0,0,0.08);
      opacity: 0.45;
      transform: translateY(16px);
      transition: opacity 350ms ease, transform 350ms ease;
    }

    .diagram-step.active {
      opacity: 1;
      transform: translateY(0);
    }

    .sticky-section {
      padding: 6rem 1.25rem;
    }

    .sticky-grid {
      width: min(100%, var(--max-width));
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 5vw, 5rem);
      align-items: start;
    }

    .sticky-visual {
      position: sticky;
      top: 4rem;
    }

    .sticky-visual img {
      width: 100%;
      border-radius: 1.25rem;
      box-shadow: 0 20px 50px rgba(0,0,0,0.14);
    }

    .steps {
      display: grid;
      gap: 35vh;
      padding: 20vh 0;
    }

    .step {
      background: rgba(255,255,255,0.78);
      padding: clamp(1.25rem, 3vw, 2rem);
      border-radius: 1.25rem;
      box-shadow: 0 12px 35px rgba(0,0,0,0.08);
      opacity: 0.45;
      transform: translateY(16px);
      transition: opacity 350ms ease, transform 350ms ease;
    }

    .step.active {
      opacity: 1;
      transform: translateY(0);
    }

    .fade-in {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 700ms ease, transform 700ms ease;
    }

    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .section-label {
      color: var(--accent);
      font-size: 0.82rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 0.85rem;
    }


    /* ============================================================
   LAUREN-PROOF AREA #3: PHONE / SMALL SCREEN SETTINGS
============================================================ */

     @media (max-width: 780px) {

      .section {
        padding: 3rem 1rem;
      }

      .section.screen,
      .section.tall {
        min-height: auto;
      }

      h1 {
        font-size: clamp(2.5rem, 14vw, 4.25rem);
      }

      h2 {
        font-size: clamp(1.9rem, 10vw, 3rem);
      }

      h3 {
        font-size: clamp(1.35rem, 7vw, 2rem);
      }

      p,
      .lede {
        font-size: 1rem;
      }

      .text-card,
      .parallax-card,
      .background-story-card,
      .rabbit-hole-card,
      .swap-step,
      .diagram-step,
      .step {
        padding: 1.15rem;
        border-radius: 1rem;
      }
      .rabbit-hole-overlay {
        padding: 0.75rem;
      }

      .rabbit-hole-modal {
        max-height: 92vh;
        border-radius: 1rem;
      }

      .rabbit-hole-modal-header {
        flex-direction: column;
      }

      .rabbit-hole-button,
      .rabbit-hole-close,
      .rabbit-hole-link {
        width: 100%;
      }

      .split,
      .split.ratio-50-50,
      .split.ratio-30-70,
      .split.ratio-70-30,
      .sticky-grid,
      .scroll-swap,
      .diagram-layout {
        grid-template-columns: 1fr;
      }

 
      .switcher {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }

      .switcher-buttons {
        gap: 0.5rem;
        margin: 1.25rem 0 1.5rem;
      }

      .switcher-button {
        width: 100%;
        text-align: center;
      }

      .scroll-swap-media,
      .sticky-visual,
      .diagram-visual {
        position: relative;
        top: auto;
      }

      .scroll-swap-intro {
        margin: 0 auto 2rem;
      }

      .scroll-swap-media {
        order: 1;
      }

      .scroll-swap-steps {
        order: 2;
      }

      .scroll-swap-media img,
      .switcher-media img,
      .media-card img.cover {
        aspect-ratio: 4 / 3;
      }

      .full-media img,
      .sticky-visual img,
      .diagram-visual {
        border-radius: 1rem;
      }

      .scroll-swap-steps,
      .diagram-text,
      .steps {
        gap: 1.25rem;
        padding: 1.25rem 0 0;
      }

      .swap-step,
      .diagram-step {
        opacity: 1;
        transform: none;
      }

      .parallax-section {
        min-height: 70vh;
        padding: 3rem 1rem;
      }

      .parallax-bg {
        inset: 0;
        transform: none !important;
      }


      .background-story {
        --background-story-card-position: center;
        --background-story-card-gap: 1.25rem;
        min-height: auto;
      }

      .background-story-bg {
        position: relative;
        height: 55vh;
      }

      .background-story-content {
        margin: 0 auto;
        padding: 1.25rem 1rem 3rem;
        gap: 1.25rem;
      }


      .step {
        opacity: 1;
        transform: none;
      }

      .caption {
        font-size: 0.85rem;
      }

      .section-label {
        font-size: 0.74rem;
        letter-spacing: 0.11em;
      }

      .text-card:hover,
      .background-story-card:hover,
      .rabbit-hole-card:hover,
      .swap-step:hover,
      .diagram-step:hover,
      .step:hover,
      .expandable-note:hover {
        transform: none;
      }

      .media-card:hover img,
      .full-media:hover img,
      .switcher-media figure:hover img,
      .scroll-swap-media:hover img,
      .sticky-visual:hover img {
        transform: none;
        filter: none;
      }
    }

    @media (max-width: 480px) {

      .section,
      .sticky-section {
        padding: 2.5rem 0.85rem;
      }

      .text-card,
      .parallax-card,
      .background-story-card,
      .rabbit-hole-card,
      .swap-step,
      .diagram-step,
      .step {
        padding: 1rem;
      }

      .scroll-swap,
      .sticky-grid,
      .diagram-layout,
      .switcher,
      .split {
        gap: 1rem;
      }

      .diagram-visual {
        padding: 0.5rem;
      }

      .diagram-visual svg text {
        font-size: 20px;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
      }

      .fade-in,
      .step,
      .swap-step,
      .diagram-step,
      .background-story-card {
        opacity: 1;
        transform: none;
      }

      .parallax-bg {
        inset: 0;
        transform: none !important;
      }

      .text-card,
      .media-card,
      .full-media,
      .switcher-media figure,
      .scroll-swap-media,
      .background-story-card,
      .rabbit-hole-card,
      .swap-step,
      .diagram-step,
      .step,
      .expandable-note,
      .media-card img,
      .full-media img,
      .switcher-media img,
      .scroll-swap-media img,
      .sticky-visual img {
        transition: none !important;
        transform: none !important;
      }
    }