/* ================= ExclusiveCollections.css ================= */
      :root {
        --ec-ink: #eaeaea; /* light ink on dark panel */
        --ec-ink-soft: #bdbdbd;
        --ec-dark: #0b0b0b; /* right panel background */
        --ec-divider: rgba(255, 255, 255, 0.08);
        --ec-left-ink: #2a2a2a; /* left column body text */
        --ec-muted: #6d6d6d;
        --ec-accent: #111; /* black accents */
      }

      * {
        box-sizing: border-box;
      }

      body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        background: #fff;
        color: #111;
      }

      .ec-page {
        min-height: 100vh;
      }

      /* ---------------- LEFT rail ---------------- */
      .ec-left {
        padding: 40px clamp(20px, 4vw, 56px);
        min-height: 100vh;
        background: #fff;
        border-right: 1px solid #efefef;
        display: flex;
        flex-direction: column;
        gap: clamp(28px, 4vw, 48px);
      }

      /* back circle with progress arc (conic) */
      .ec-back {
        width: 120px;
        height: 120px;
        border-radius: 999px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        display: grid;
        place-items: center;
        position: relative;
        text-decoration: none;
        color: #111;
        isolation: isolate;
      }
      .ec-back::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        /* progress ring (updated via --p from JS) */
        --p: 0deg;
        background: radial-gradient(
            closest-side,
            transparent 77%,
            #0000 calc(77% + 1px)
          ),
          conic-gradient(#111 var(--p), transparent 0);
        -webkit-mask: radial-gradient(closest-side, #000 80%, #0000 81%);
        mask: radial-gradient(closest-side, #000 80%, #0000 81%);
        opacity: 0.65;
        pointer-events: none;
      }
      .ec-back:hover {
        border-color: #000;
      }
      .ec-back-arrow {
        width: 24px;
        height: 24px;
        position: relative;
        display: block;
      }
      .ec-back-arrow::before {
        content: "";
        position: absolute;
        left: 2px;
        top: 50%;
        width: 18px;
        height: 18px;
        border-left: 2px solid #111;
        border-bottom: 2px solid #111;
        transform: translateY(-50%) rotate(45deg);
      }

      /* ---------------- TOC with animated lines (NO bullets) ---------------- */
      .ec-toc ul {
        display: flex;
        flex-direction: column;
        gap: 18px;
        margin: 0;
        padding: 0;
      }

      .ec-toc-item {
        list-style: none;
        font-size: clamp(16px, 1.2vw, 18px);
        color: var(--ec-left-ink);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 16px;
        transition: color 0.25s ease;
      }

      /* horizontal line before each label */
      .ec-line {
        width: 18px; /* width when not active */
        height: 2px;
        background: #222;
        display: inline-block;
        flex: none;
        transition: width 0.28s ease, opacity 0.28s ease;
        opacity: 0.35; /* muted when not active */
      }

      /* active item grows the line and brightens */
      .ec-toc-item.active {
        font-weight: 600;
        color: var(--ec-left-ink);
      }
      .ec-toc-item.active .ec-line {
        width: 48px; /* longer line for active */
        opacity: 1;
      }

      /* optional: further mute inactive labels */
      .ec-toc-item:not(.active) {
        color: var(--ec-muted);
      }

      /* left copy */
      .ec-left-copy {
        color: var(--ec-left-ink);
        line-height: 1.75;
        max-width: 36ch;
      }

      /* ---------------- RIGHT (dark content) ---------------- */
      .ec-right {
        /* background: var(--ec-dark); */
        background: linear-gradient(135deg, #000428, #004e92);
        color: var(--ec-ink);
        min-height: 100vh;
        padding: clamp(28px, 4vw, 56px);
      }

      .ec-header {
        text-align: center;
        margin-bottom: clamp(20px, 3vw, 28px);
      }
      .ec-title {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        letter-spacing: 0.06em;
        font-size: clamp(38px, 8vw, 88px);
        margin: 0 0 8px;
        color: #fff;
      }
      .ec-sub {
        margin: 0;
        color: var(--ec-ink-soft);
        letter-spacing: 0.2em;
        font-size: 12px;
        text-transform: uppercase;
      }

      .ec-section {
        padding: clamp(20px, 2vw, 28px) 0;
        border-bottom: 1px solid var(--ec-divider);
      }
      .ec-h2 {
        font-size: clamp(26px, 3.2vw, 44px);
        margin: 6px 0 12px;
        color: #fff;
      }
      .ec-lead {
        color: var(--ec-ink-soft);
        line-height: 1.8;
        max-width: 80ch;
        margin-bottom: clamp(18px, 2vw, 28px);
      }

      /* ---------- Parallax media (image hides under frame while scrolling) ---------- */
      .ec-media {
        position: relative;
        overflow: hidden; /* clips moving image edges (the “hide” effect) */
        background: #000;
        padding: clamp(10px, 1.2vw, 16px);
        border-radius: 4px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
        --py: 0px; /* updated by JS */
      }
      .ec-media img {
        display: block;
        width: 100%;
        height: auto;
        will-change: transform;
        transform: translateY(var(--py)) scale(1.12); /* slight scale avoids empty edges */
        transition: transform 0.06s linear; /* ultra-light smoothing */
      }

      .ec-bottom-space {
        height: 14vh;
      }
      .ec-scroll-hint {
        display: none; /* hidden on desktop by default */
      }

      .ec-logo {
        display: none;
      }

      /* ---------------- Responsive tweaks ---------------- */
      @media (max-width: 991.98px) {
        .ec-left {
          position: relative;
          top: 0;
          border-right: none;
          border-bottom: 1px solid #efefef;
        }
        .ec-right {
          padding-top: 28px;
        }
        .ec-back {
          width: 96px;
          height: 96px;
        }

        .ec-media {
          position: relative;
          padding: 0;
          background: transparent; /* don’t show black if something sneaks in */
          min-height: 260px; /* a bit taller frame than 220px */
          border-radius: 6px;
          overflow: hidden; /* keep image edges hidden */
        }

        .ec-media img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          transform: translateY(var(--py)) scale(1.3); /* more aggressive scale */
          transition: transform 0.06s linear;
          will-change: transform;
        }
      }

      /* ---------------- Mobile: center left rail like RAAF (only mobile) ---------------- */
      @media (max-width: 599.98px) {
        /* make left rail occupy full viewport and center its content */
        .ec-left {
          min-height: 100vh; /* fill screen */
          padding: clamp(20px, 8vw, 48px); /* comfortable padding */
          display: flex;
          flex-direction: column;
          justify-content: center; /* vertical centering */
          align-items: center; /* horizontal centering */
          text-align: center; /* center text and toc */
          gap: clamp(18px, 3.5vw, 36px);
          border-right: none;
          border-bottom: none;
          position: relative; /* so .ec-back absolute positioning works */
        }

        /* back circle on mobile - small and pinned top-left */
        .ec-back {
          width: 64px; /* smaller size */
          height: 64px; /* smaller size */
          position: absolute;
          top: 16px;
          left: 16px;
          margin: 0; /* reset margin */
        }
        .ec-back::after {
          opacity: 0.55; /* subtle progress arc */
        }

        /* logo centered for mobile */
        .ec-logo {
          display: flex;
          justify-content: center;
          width: 100%;
          margin-bottom: clamp(8px, 2.5vw, 16px);
        }
        .ec-logo img {
          max-width: 220px; /* increase from 160px -> 220px */
          height: auto;
        }

        /* center the TOC and align items in column centered */
        .ec-toc ul {
          align-items: center;
        }
        .ec-toc-item {
          justify-content: center; /* place label centered */
          gap: 12px;
          width: 100%;
          padding: 6px 0;
        }

        /* make the line sit directly left of text (centered block appearance) */
        .ec-line {
          margin-right: 10px;
          width: 36px;
        }

        /* ensure active state looks good centered */
        .ec-toc-item.active .ec-line {
          width: 56px;
        }

        /* slightly reduce max-width of the left copy for better reading at center */
        .ec-left-copy {
          max-width: 46ch;
          margin: 0 auto;
          line-height: 1.7;
        }

        /* spacing adjustments so right panel stays below cleanly */
        .ec-right {
          padding-top: 20px;
        }

        /* small visual tweak to keep headings readable if they appear on left */
        .ec-h2 {
          font-size: clamp(24px, 5.2vw, 36px);
        }

        /* Scroll hint only for mobile */
        .ec-scroll-hint {
          display: block; /* show on mobile */
          font-size: 14px;
          color: black; /* brighter text instead of muted gray */
          font-weight: bold; /* make it stand out */
          /* text-shadow: 0 0 4px rgba(0,0,0,0.6); optional: glow for visibility */
          margin-top: 12px;
          text-align: center;
          animation: bounce 1.8s infinite;
        }

        @keyframes bounce {
          0%,
          100% {
            transform: translateY(0);
          }
          50% {
            transform: translateY(6px);
          }
        }
      }
      /* ================= End of file ================= */