@layer components {
  /* ===================================================
     Ritual Block, Sacred Lists and Thesis Block
     Version: 3.0, Responsive Rewrite (2026)

     Improvements:
     • Responsive ritual spacing and counter positioning
     • Mobile-safe list indentation
     • Responsive thesis width, padding and typography
     • Improved wrapping for long text and links
     • Keyboard focus support
     • Reduced-motion support
     • Preserves existing class names and theme tokens
     =================================================== */

  /* ===================================================
     General section lists
     =================================================== */

  :where(.section-block) ul:not(.list-emoji),
  :where(.section-block) ol {
    max-width: 100%;
    margin:
      var(--space-md, 1.5rem)
      0;

    padding-left:
      clamp(
        1.5rem,
        4vw,
        var(--space-lg, 3rem)
      );

    color: var(--text-primary);
    font-size:
      var(
        --type-list-item-size-editorial,
        clamp(1rem, 1.4vw, var(--font-size-base))
      );
    line-height: var(--type-list-line-editorial, 1.8);

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

  :where(.section-block) ul:not(.list-emoji) {
    list-style: disc;
  }

  :where(.section-block) ol {
    list-style: decimal;
  }

  :where(.section-block) li {
    min-width: 0;
    margin-bottom: var(--space-xs, 0.5rem);

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

  :where(.section-block) li:last-child {
    margin-bottom: 0;
  }

  /* ===================================================
     Ritual block
     =================================================== */

  :where(.section-block) ol.ritual {
    position: relative;

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

    padding-left:
      clamp(
        1.75rem,
        4vw,
        2.25rem
      );

    list-style: none;
    counter-reset: ritual-step;
  }

  :where(.section-block) ol.ritual > li {
    position: relative;
    counter-increment: ritual-step;

    margin-bottom:
      var(
        --ritual-margin-bottom,
        1.25rem
      );

    padding-left:
      clamp(
        0.35rem,
        1vw,
        var(--ritual-padding-left, 0.5rem)
      );

    color: var(--text-primary);
    font-size: var(--ritual-font-size, var(--type-copy-size, 1em));
    line-height: var(--type-body-line, 1.85);

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

  :where(.section-block) ol.ritual > li:last-child {
    margin-bottom: 0;
  }

  :where(.section-block) ol.ritual > li::before {
    content: counter(ritual-step) ".";

    position: absolute;
    top: 0;
    right: calc(100% + 0.45rem);

    min-width: 1.4rem;

    color: var(--text-accent);
    font-family: inherit;
    font-size: inherit;
    font-weight: var(--type-weight-bold, 700);
    line-height: inherit;
    text-align: right;
  }

  /* ===================================================
     Universal list link normalisation
     =================================================== */

  :where(.section-block li a),
  :where(.lens-list a) {
    color: var(--text-accent);
    font-weight: var(--type-weight-semibold, 600);
    text-decoration: none;

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

    transition:
      color 0.3s ease,
      text-shadow 0.3s ease;
  }

  :where(.section-block li a:hover),
  :where(.lens-list a:hover) {
    color: var(--highlight);
    text-shadow:
      0
      0
      8px
      var(--shadow-glow);
  }

  :where(.section-block li a:focus-visible),
  :where(.lens-list a:focus-visible) {
    color: var(--highlight);

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

    outline-offset: 3px;
    border-radius: 0.15rem;
  }

  /* ===================================================
     Thesis block
     =================================================== */

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

    margin:
      clamp(
        2rem,
        6vw,
        var(--space-xl, 4rem)
      )
      auto;

    padding:
      clamp(
        1.25rem,
        4vw,
        var(--thesis-padding, 2rem)
      );

    background: var(--section-bg-bottom);

    border-left:
      var(
        --thesis-border,
        4px solid var(--text-accent)
      );

    border-radius:
      var(
        --border-radius-base,
        0.75rem
      );

    box-shadow:
      0
      0
      30px
      var(--shadow-glow);

    overflow-wrap: break-word;
  }

  :where(.thesis-line) {
    max-width: 100%;
    margin: 0 0 1rem;

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

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

    line-height: 1.85;

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

  :where(.thesis-line:last-child) {
    margin-bottom: 0;
  }

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

  @media (max-width: 1024px) {
    :where(.section-block) ul:not(.list-emoji),
    :where(.section-block) ol {
      padding-left:
        clamp(
          1.4rem,
          3.5vw,
          2.25rem
        );

      line-height: 1.75;
    }

    :where(.section-block) ol.ritual {
      padding-left: 2rem;
    }

    :where(.thesis-block) {
      width: min(100%, 54rem);
    }
  }

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

  @media (max-width: 768px) {
    :where(.section-block) ul:not(.list-emoji),
    :where(.section-block) ol {
      margin:
        var(--space-sm, 1rem)
        0
        var(--space-md, 1.5rem);

      padding-left: 1.5rem;

      font-size: var(--ritual-font-size, var(--type-copy-size, 1em));

      line-height: var(--type-supporting-copy-line, 1.7);
    }

    :where(.section-block) li {
      margin-bottom:
        calc(
          var(--space-xs, 0.5rem) +
          0.15rem
        );
    }

    :where(.section-block) ol.ritual {
      margin:
        var(--space-sm, 1rem)
        0
        var(--space-md, 1.5rem);

      padding-left: 1.8rem;
    }

    :where(.section-block) ol.ritual > li {
      margin-bottom: 1.1rem;
      padding-left: 0.3rem;

      font-size: var(--ritual-font-size, var(--type-copy-size, 1em));

      line-height: 1.7;
    }

    :where(.section-block) ol.ritual > li::before {
      right: calc(100% + 0.3rem);
      min-width: 1.25rem;
      font-size: 1em;
    }

    :where(.thesis-block) {
      margin:
        clamp(
          1.75rem,
          7vw,
          2.5rem
        )
        auto;

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

      border-left-width: 3px;
      border-radius:
        calc(
          var(--border-radius-base, 0.75rem)
          * 0.8
        );

      box-shadow:
        0
        0
        20px
        var(--shadow-glow);
    }

    :where(.thesis-line) {
      margin-bottom: 0.9rem;

      font-size:
        clamp(
          0.98rem,
          4vw,
          1.05rem
        );

      line-height: 1.7;
    }
  }

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

  @media (max-width: 420px) {
    :where(.section-block) ul:not(.list-emoji),
    :where(.section-block) ol {
      padding-left: 1.25rem;
      font-size: var(--type-list-item-size-compact-narrow, 0.96rem);
      line-height: var(--type-card-desc-line-editorial, 1.65);
    }

    :where(.section-block) ol.ritual {
      padding-left: 1.55rem;
    }

    :where(.section-block) ol.ritual > li {
      padding-left: 0.2rem;
      font-size: var(--ritual-font-size, var(--type-copy-size, 1em));
      line-height: 1.65;
    }

    :where(.section-block) ol.ritual > li::before {
      right: calc(100% + 0.2rem);
      min-width: 1.1rem;
      font-size: 1em;
    }

    :where(.thesis-block) {
      margin-block: 1.5rem;
      padding: 1rem;
      border-left-width: 3px;
    }

    :where(.thesis-line) {
      font-size: 0.96rem;
      line-height: 1.65;
    }
  }

  /* ===================================================
     Very narrow screens
     =================================================== */

  @media (max-width: 340px) {
    :where(.section-block) ul:not(.list-emoji),
    :where(.section-block) ol {
      padding-left: 1.1rem;
    }

    :where(.section-block) ol.ritual {
      padding-left: 1.4rem;
    }

    :where(.section-block) ol.ritual > li {
      font-size: var(--ritual-font-size, var(--type-copy-size, 1em));
    }

    :where(.thesis-block) {
      padding: 0.85rem;
    }

    :where(.thesis-line) {
      font-size: 0.93rem;
    }
  }

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

  @media (prefers-reduced-motion: reduce) {
    :where(.section-block li a),
    :where(.lens-list a) {
      transition: none;
    }
  }
}