@layer components {
  /* ===================================================
     Sacred Quotes, Citations and Sacred Language
     Version: 3.0, Editorial Responsive Rewrite (2026)

     Improvements:
     • Replaces heavy card styling with an editorial quote treatment
     • Uses restrained borders and transparent background washes
     • Adds responsive typography and spacing
     • Improves citation hierarchy
     • Preserves RTL and LTR script behaviour
     • Adds safer wrapping for long sacred-language passages
     • Makes Duat maps responsive
     • Preserves existing class names and theme tokens
     =================================================== */

  /* ===================================================
     Sacred quote styling
     =================================================== */

  :where(blockquote) {
    position: relative;

    width: 100%;
    max-width: 72ch;

    margin:
      clamp(1.75rem, 5vw, 3.5rem)
      auto;

    padding:
      clamp(1.25rem, 3.5vw, 2rem)
      clamp(1.25rem, 4vw, 2.5rem);

    border: 0;
    border-left:
      var(
        --blockquote-border,
        3px solid var(--text-accent)
      );

    border-radius:
      var(
        --blockquote-radius,
        0
      );

    background:
      linear-gradient(
        90deg,
        color-mix(
          in srgb,
          var(--text-accent) 7%,
          transparent
        ),
        transparent 78%
      );

    color:
      var(
        --blockquote-text,
        var(--text-primary)
      );

    font-family:
      var(
        --font-serif,
        "Libre Baskerville",
        serif
      );

    font-size:
      var(
        --type-quote-size,
        clamp(1.05rem, 1.7vw, 1.3rem)
      );

    font-weight: var(--type-weight-regular, 400);
    font-style: italic;
    line-height: var(--type-quote-line, 1.85);
    text-align: left;

    overflow-wrap: break-word;
    word-break: normal;
  }

  :where(blockquote) > :first-child {
    margin-top: 0;
  }

  :where(blockquote) > :last-child {
    margin-bottom: 0;
  }

  :where(blockquote) p {
    margin:
      0
      0
      var(--space-sm, 1rem);
  }

  :where(blockquote) p:last-of-type {
    margin-bottom: 0;
  }

  /* Optional decorative quotation mark */
  :where(blockquote)::before {
    content: "“";

    position: absolute;
    top: -0.2rem;
    left: clamp(0.6rem, 2vw, 1rem);

    color:
      color-mix(
        in srgb,
        var(--text-accent) 32%,
        transparent
      );

    font-family:
      Georgia,
      "Times New Roman",
      serif;

    font-size:
      clamp(
        3.5rem,
        8vw,
        6rem
      );

    font-style: normal;
    font-weight: var(--type-weight-regular, 400);
    line-height: 1;

    pointer-events: none;
  }

  :where(blockquote) > * {
    position: relative;
    z-index: 1;
  }

  /* ===================================================
     Citation text
     =================================================== */

  :where(cite) {
    display: block;

    max-width: 100%;

    margin-top: var(--space-md, 1.5rem);
    padding: 0;

    color:
      var(
        --cite-color,
        var(--highlight)
      );

    font-family: var(--font-display);

    font-size:
      var(
        --type-citation-size,
        clamp(0.8rem, 1.2vw, var(--font-size-sm))
      );

    font-style: normal;
    font-weight: var(--type-weight-semibold, 600);
    line-height: var(--type-citation-line, 1.45);
    letter-spacing: 0.06em;
    text-align: right;
    text-transform: uppercase;

    text-shadow:
      0
      0
      6px
      var(--shadow-glow);

    overflow-wrap: anywhere;
  }

  :where(cite)::before {
    content: "— ";
  }

  /* ===================================================
     Quote variants
     =================================================== */

  :where(blockquote.no-mark)::before {
    content: none;
  }

  :where(blockquote.quote-centred) {
    border-left: 0;
    border-top:
      1px solid
      color-mix(
        in srgb,
        var(--text-accent) 45%,
        transparent
      );
    border-bottom:
      1px solid
      color-mix(
        in srgb,
        var(--text-accent) 45%,
        transparent
      );

    background: transparent;
    text-align: center;
  }

  :where(blockquote.quote-centred) cite {
    text-align: center;
  }

  :where(blockquote.quote-plain) {
    max-width: none;
    padding: 0;
    border: 0;
    background: transparent;
  }

  :where(blockquote.quote-plain)::before {
    content: none;
  }

  /* ===================================================
     Sacred language formatting
     =================================================== */

  :where(.sacred-script) {
    width: 100%;
    max-width: 100%;

    margin:
      clamp(1.5rem, 5vw, 3rem)
      0;

    color: var(--text-accent);

    font-size:
      clamp(
        1.3rem,
        2.8vw,
        var(--font-size-lg)
      );

    line-height: 2;
    text-align: left;

    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* ===================================================
     RTL scripts
     =================================================== */

  :where(.arabic),
  :where(.hebrew) {
    direction: rtl;
    text-align: right;
    unicode-bidi: isolate;
  }

  :where(.arabic) {
    font-family:
      "Scheherazade New",
      serif;

    line-height: 2.15;
  }

  :where(.hebrew) {
    font-family:
      "Frank Ruhl Libre",
      "David Libre",
      serif;

    line-height: 1.95;
  }

  /* ===================================================
     LTR scripts
     =================================================== */

  :where(
    .sanskrit,
    .pali,
    .tibetan,
    .egyptian-script,
    .egyptian-citation,
    .papyrus-quote
  ) {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
  }

  :where(.sanskrit) {
    font-family:
      "Noto Serif Devanagari",
      serif;

    line-height: 2;
  }

  :where(.pali) {
    font-family:
      "Noto Serif",
      serif;
  }

  :where(.tibetan) {
    font-family:
      "Noto Serif Tibetan",
      serif;

    line-height: 2.1;
  }

  :where(.egyptian-script) {
    font-family:
      "Noto Serif Egyptian Hieroglyphs",
      "Segoe UI Historic",
      var(--font-serif);

    line-height: 1.8;
  }

  :where(.egyptian-citation),
  :where(.papyrus-quote) {
    font-family:
      var(
        --font-serif,
        "Libre Baskerville",
        serif
      );
  }

  /* ===================================================
     Sacred script within quote blocks
     =================================================== */

  :where(blockquote .sacred-script) {
    margin:
      var(--space-sm, 1rem)
      0;

    font-style: normal;
  }

  :where(blockquote .arabic),
  :where(blockquote .hebrew) {
    padding-inline:
      clamp(
        0,
        2vw,
        1rem
      );
  }

  /* ===================================================
     Duat map
     =================================================== */

  :where(.duat-map) {
    width: min(100%, 960px);
    min-width: 0;

    margin:
      clamp(1.75rem, 5vw, 3rem)
      auto;

    padding:
      clamp(
        1rem,
        3.5vw,
        1.75rem
      );

    background:
      color-mix(
        in srgb,
        var(--bg-map, #1a1a1a) 94%,
        transparent
      );

    color: var(--text-accent);

    border:
      1px solid
      color-mix(
        in srgb,
        var(--text-accent) 70%,
        transparent
      );

    border-left:
      3px solid
      var(--text-accent);

    border-radius:
      var(
        --border-radius-lg,
        1rem
      );

    box-shadow:
      0
      0
      18px
      color-mix(
        in srgb,
        var(--shadow-glow) 75%,
        transparent
      );

    text-align: left;
    overflow: hidden;
  }

  :where(.duat-map h3) {
    max-width: 100%;

    margin:
      0
      0
      var(--space-sm, 1rem);

    color: var(--text-accent);

    font-family: var(--font-display);

    font-size:
      clamp(
        1.35rem,
        2.8vw,
        var(--font-size-lg)
      );

    line-height: 1.25;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  :where(.duat-map p) {
    max-width: 100%;

    margin:
      0
      0
      var(--space-sm, 1rem);

    color: var(--text-primary);

    font-family:
      var(
        --font-serif,
        "Libre Baskerville",
        serif
      );

    font-size:
      clamp(
        1rem,
        1.6vw,
        1.1rem
      );

    line-height: 1.7;

    overflow-wrap: break-word;
  }

  :where(.duat-map p:last-child) {
    margin-bottom: 0;
  }

  :where(.duat-map img) {
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;

    margin-top: var(--space-md, 1.5rem);

    border-radius:
      var(
        --border-radius-lg,
        1rem
      );
  }

  /* ===================================================
     Tablet responsiveness
     =================================================== */

  @media (max-width: 1024px) {
    :where(blockquote) {
      max-width: 68ch;

      padding:
        clamp(1.15rem, 3vw, 1.75rem)
        clamp(1.15rem, 3.5vw, 2rem);

      font-size:
        clamp(
          1.03rem,
          1.8vw,
          1.2rem
        );
    }

    :where(.sacred-script) {
      font-size:
        clamp(
          1.25rem,
          3vw,
          1.6rem
        );
    }
  }

  /* ===================================================
     Mobile responsiveness
     =================================================== */

  @media (max-width: 768px) {
    :where(blockquote) {
      max-width: 100%;

      margin:
        clamp(1.5rem, 7vw, 2.25rem)
        0;

      padding:
        1.15rem
        1rem
        1.15rem
        1.25rem;

      border-left-width: 3px;

      font-size:
        clamp(
          1rem,
          4vw,
          1.1rem
        );

      line-height: 1.75;
    }

    :where(blockquote)::before {
      top: 0;
      left: 0.45rem;

      font-size:
        clamp(
          3rem,
          14vw,
          4.5rem
        );
    }

    :where(cite) {
      margin-top: var(--space-sm, 1rem);

      font-size:
        clamp(
          0.75rem,
          3.2vw,
          0.88rem
        );

      line-height: 1.4;
      letter-spacing: 0.045em;
    }

    :where(.sacred-script) {
      margin:
        var(--space-md, 1.5rem)
        0;

      font-size:
        clamp(
          1.15rem,
          5vw,
          1.45rem
        );

      line-height: 1.85;
    }

    :where(.arabic) {
      line-height: 2;
    }

    :where(.hebrew) {
      line-height: 1.85;
    }

    :where(.tibetan) {
      line-height: 1.95;
    }

    :where(.duat-map) {
      margin:
        var(--space-md, 1.5rem)
        auto;

      padding:
        clamp(
          1rem,
          5vw,
          1.35rem
        );

      border-left-width: 3px;
      border-radius:
        calc(
          var(--border-radius-lg, 1rem)
          * 0.8
        );
    }

    :where(.duat-map h3) {
      font-size:
        clamp(
          1.25rem,
          6vw,
          1.55rem
        );
    }

    :where(.duat-map p) {
      font-size:
        clamp(
          0.98rem,
          4vw,
          1.05rem
        );

      line-height: 1.65;
    }
  }

  /* ===================================================
     Narrow mobile responsiveness
     =================================================== */

  @media (max-width: 420px) {
    :where(blockquote) {
      padding:
        1rem
        0.85rem
        1rem
        1.1rem;

      font-size: 0.98rem;
      line-height: 1.7;
    }

    :where(blockquote)::before {
      left: 0.35rem;
      font-size: 3.25rem;
    }

    :where(cite) {
      font-size: 0.75rem;
      letter-spacing: 0.035em;
    }

    :where(.sacred-script) {
      font-size: 1.15rem;
      line-height: 1.8;
    }

    :where(.duat-map) {
      padding: 1rem;
      border-radius: 0.75rem;
    }

    :where(.duat-map h3) {
      font-size: 1.2rem;
      line-height: 1.3;
    }

    :where(.duat-map p) {
      font-size: 0.96rem;
      line-height: 1.6;
    }
  }

  /* ===================================================
     Reduced motion
     =================================================== */

  @media (prefers-reduced-motion: reduce) {
    :where(blockquote),
    :where(cite),
    :where(.duat-map) {
      scroll-behaviour: auto;
    }
  }
}