/* ── Reset ── */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;

      }
      html {
        height: 100%;
        width: 100%;
        scroll-behavior: smooth;
        background: #08040e;
      }
      body {
        font-family: var(--kh-font-inter);
        background: #08040e;
        color: #e0d8ec;
        line-height: 1.7;
        min-height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        isolation: isolate;
      }
      body::after {
        content: "";
        position: fixed;
        inset: -50%;
        width: 200%;
        height: 200%;
        background: url("../assets/img/SVGs/patterns/site-pattern.svg") repeat;
        background-size: 80px 80px;
        transform: rotate(15deg);
        pointer-events: none;
        z-index: -1;
      }
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        background: radial-gradient(
            ellipse 75% 55% at 50% -8%,
            rgba(120, 40, 200, 0.07) 0%,
            transparent 70%
          ),
          radial-gradient(
            ellipse 50% 45% at 80% 90%,
            rgba(200, 150, 50, 0.04) 0%,
            transparent 60%
          ),
          radial-gradient(
            ellipse 45% 35% at 15% 85%,
            rgba(60, 20, 120, 0.05) 0%,
            transparent 50%
          );
        pointer-events: none;
        z-index: -2;
      }
      ::-webkit-scrollbar {
        width: 6px;
      }
      ::-webkit-scrollbar-track {
        background: #08040e;
      }
      ::-webkit-scrollbar-thumb {
        background: #2a1a3e;

      }
      ::-webkit-scrollbar-thumb:hover {
        background: #4a2a6e;
      }

      /* ── Theme variables ── */
      :root {
        --kh-bg: #08040e;
        --kh-gold: #d4af37;
        --kh-gold-rgb: 212, 175, 55;
        --kh-text-muted: #9080a8;
        --kh-text-light: #c8b8e0;
        --kh-text-muted2: #6a5a78;
        --kh-link-muted: #8068a8;
        --kh-font-cinzel: "Cinzel", serif;
        --kh-font-inter: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
        --tag-pad-x: 5px;
        --kh-card-bg: linear-gradient(135deg, rgba(22,10,36,0.85), rgba(14,6,24,0.7));
        --kh-blur: blur(6px);
        --kh-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
        --kh-bg-solid: rgba(22, 10, 36, 0.85);
      }

      /* ── Shared tag/badge/chip base ── */
      .tag,
      .badge,
      .filter-chip,
      .filter-tag,
      .entry-collection,
      .plat {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px var(--tag-pad-x) 2px var(--tag-pad-x);

        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        white-space: nowrap;
        line-height: 1;
      }

      /* ── SVG icon base ── */
      i[class*="fa-"] {
        display: inline-block;
        width: 1.15em;
        height: 1.15em;
        vertical-align: middle;
      }
      .kh-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        width: 1.15em;
        height: 1.15em;
        line-height: 1;
        transform: translateY(-0.07em);
      }
      .kh-icon svg {
        width: 100%;
        height: 100%;
        fill: currentColor;
        display: block;
      }
      .kh-icon[data-icon="panel-left"] svg {
        fill: none;
      }

      /* ── Flag icons ── */
      .flag {
        display: inline-block;
        vertical-align: middle;
      }

      /* ── Skip navigation ── */
      .skip-link {
        position: absolute;
        top: -100%;
        left: 16px;
        z-index: 10000;
        padding: 8px 16px;
        background: var(--kh-gold);
        color: #08040e;
        font-weight: 600;
        font-size: 0.85rem;

        text-decoration: none;
        transition: top 0.2s;
      }
      .skip-link:focus {
        top: 0;
      }

      /* ── Focus styles ── */
      :focus-visible {
        outline: 2px solid var(--kh-gold);
        outline-offset: 2px;
      }

      /* ── Footer (shared) ── */
      .footer {
        text-align: center;
        padding: 32px 32px 20px;
        color: var(--kh-text-muted2);
        transition: padding 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .footer a {
        color: var(--kh-link-muted);
        text-decoration: none;
        transition: color 0.3s ease;
      }
      .footer a:hover {
        color: var(--kh-gold);
      }
      .footer-quote {
        font-family: var(--kh-font-cinzel);
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--kh-text-light);
        margin: 0;
        letter-spacing: 0.5px;
        transition: font-size 0.3s ease, line-height 0.3s ease;
      }
      .footer-icon {
        display: inline-block;
        width: 1.4em;
        height: 1.4em;
        vertical-align: middle;
        margin-left: 0.2em;
        margin-top: -0.1em;
        filter: brightness(0) invert(1);
        opacity: 0.85;
        transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease;
      }
      .footer-legal {
        font-size: 0.68rem;
        color: var(--kh-text-muted2);
        margin: 6px 0 0;
        line-height: 1.5;
      }
      .footer-legal span {
        display: block;
        max-height: 3em;
        overflow: hidden;
        opacity: 1;
        transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease;
      }
      .footer-legal span + span {
        margin-top: 2px;
      }
      @media (max-width: 580px) {
        .footer { padding: 24px 16px 16px; }
        .footer-quote { font-size: 0.85rem; }
        .legal-tm { opacity: 0; max-height: 0; margin-top: 0; }
      }
      @media (max-width: 500px) {
        .legal-disclaimer { opacity: 0; max-height: 0; margin-top: 0; }
      }
      @media (max-width: 420px) {
        .legal-links { opacity: 0; max-height: 0; margin-top: 0; }
      }

      /* ── Heading reset ── */
      h1, h2, h3, h4, h5, h6 {
        margin: 0;
        padding: 0;
      }

      /* ── Screen reader only ── */
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      /* ── Reduced motion ── */
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
        html {
          scroll-behavior: auto;
        }
      }