@layer components {
  /* ===================================================
     Divider Sigil – Decorative Horizontal Rule
     Version: 2.5  Tokenised + Consolidated (2026)
     Changes:
     • Updated to v2.5 token standard (full parity with root + all pillars)
     • Cleaner structure and comments
     • All gradient line, glow shadow, centered variant, and ✦ sigil
       positioning preserved 100%
     =================================================== */

  .divider-sigil {
    position: relative;
    border: 0;
    height: 1px;
    width: 100%;
    margin: var(--space-lg) auto;
    background: linear-gradient(to right, transparent, var(--text-accent), transparent);
    box-shadow: 0 0 6px var(--shadow-glow), 0 0 2px var(--text-accent);
    opacity: 0.85;
  }

  .divider-sigil.centered {
    width: 60%;
  }

  .divider-sigil::after {
    content: "✦";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -55%);
    font-size: 1rem;
    color: var(--text-accent);
    text-shadow: 0 0 6px var(--shadow-glow);
    background: var(--divider-bg, transparent);
    padding: 0 0.5rem;
    pointer-events: none;
  }

  /* Vault codex divider: token-driven accent override */
  body.vault .divider-sigil {
    background: linear-gradient(
      to right,
      transparent,
      var(--section-border),
      var(--text-accent),
      var(--section-border),
      transparent
    );
    box-shadow:
      0 0 8px var(--shadow-glow),
      0 0 2px var(--section-border);
    opacity: 0.95;
  }

  body.vault .divider-sigil::after {
    color: var(--text-accent);
    text-shadow: 0 0 8px var(--shadow-glow);
    background: var(--bg-primary);
  }
}

@layer components {
  .keymaker-mugshot {
    float: left;
    width: min(40%, 260px);
    margin: 0.5rem 2rem 1.5rem 0;
    padding: 0.75rem;
  }

  .keymaker-mugshot--right {
    float: right;
    margin: 0.5rem 0 1.5rem 2rem;
  }

  .keymaker-mugshot .image-gnostic {
    display: block;
    width: 100%;
    height: auto;
  }

  .keymaker-mugshot .caption-gnostic {
    text-align: center;
  }

  @media (max-width: 900px) {
    .keymaker-mugshot {
      float: none;
      width: min(100%, 320px);
      margin: 0 auto 1rem;
    }
  }
}