/* ═══════════════════════════════════════════════
   WAZIR Showcase — SPA · Royal-Tech Aesthetic
   ═══════════════════════════════════════════════ */

/* Fonts load from a <link> in <head> (a CSS @import here blocks first render). */

/* ── Palette ── */
:root {
  --obsidian:      #0B0B0B;
  --smoke:         #1C1C1C;
  --smoke-light:   #252525;
  --deep-green:    #0A2E1A;
  --emerald:       #034732;
  --neon:          #39FF14;
  --neon-dim:      #39ff1433;
  --neon-glow:     #39ff1466;
  --neon-bright:   #39ff1499;
  --silver:        #C0C0C0;
  --silver-dim:    #C0C0C088;
  --silver-faint:  #C0C0C044;
  --gold:          #FFD700;
  --gold-dim:      #FFD70044;
  --gold-bright:   #FFD700CC;
  --white:         #E8E8E8;

  --font-title:    'Cinzel', serif;
  --font-body:     'Rajdhani', sans-serif;
  --font-accent:   'Orbitron', sans-serif;
  --font-display:  'Cinzel', serif;
  --font-mono:     'Fira Code', 'JetBrains Mono', 'Courier New', monospace;

  --text-primary:  #E8E8E8;
  --text-secondary: #C0C0C088;
  --bg-dark:       #0B0B0B;

  --nav-height:    64px;
  --content-width: 1100px;
  --content-wide:  1300px;

  --space-2xs: 0.125rem;
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  --z-base:     1;
  --z-nav:     100;
  --z-overlay: 500;
  --z-modal:   900;
  --z-toast:   950;
  --z-tooltip: 999;
  --z-max:    9999;

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-smooth: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  --shadow-sm:    0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:    0 8px 30px rgba(0,0,0,0.6);
  --shadow-xl:    0 16px 50px rgba(0,0,0,0.7);
  --shadow-neon:  0 0 20px var(--neon-dim);
  --shadow-gold:  0 0 20px var(--gold-dim);
}

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

html { scroll-behavior: smooth; overflow-x: clip; max-width: 100%; }

body {
  background: var(--obsidian);
  color: var(--silver);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: clip;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--neon); text-decoration: none; transition: color 0.3s, text-shadow 0.3s; }
a:hover { color: var(--gold); text-shadow: 0 0 8px var(--gold-dim); }
img { max-width: 100%; height: auto; }

/* ── Global Particles ── */
.global-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ══════════════════════════════════════════════
   NAVIGATION
   ══════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  padding: 0 2rem;
  background: rgba(11, 11, 11, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--neon-dim);
  transition: background 0.4s, border-color 0.4s;
}

.nav--home {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

.nav--home.scrolled {
  background: rgba(11, 11, 11, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--neon-dim);
}

/* Brand */
.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--gold);
  flex-shrink: 0;
}

.nav__brand:hover { color: var(--gold); text-shadow: 0 0 12px var(--gold-dim); }

.nav__brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
  transition: transform 0.3s;
}
.nav__brand:hover .nav__brand-logo {
  transform: rotate(-5deg) scale(1.1);
}

.nav__brand-text {
  font-family: var(--font-title);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  white-space: nowrap;
}
@media (max-width: 1200px) {
  .nav__brand-text { font-size: 0.78rem; letter-spacing: 1.5px; }
}

/* Links */
.nav__links {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.25rem 1rem;
  flex: 1;
  min-width: 0;
}
.nav__links::-webkit-scrollbar { display: none; }

.nav__group {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.nav__group:last-child {
  justify-content: flex-end;
}

.nav__divider {
  display: none;
}

.nav__trio {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  padding: 0.2rem 1rem;
  background: linear-gradient(135deg, rgba(255,215,0,0.06), rgba(57,255,20,0.04));
  border: 1px solid rgba(255,215,0,0.15);
  border-radius: 6px;
  margin: 0 0.6rem;
}

.nav__trio a {
  font-weight: 600;
  letter-spacing: 3px;
  white-space: nowrap;
}

.nav__trio a.active {
  color: var(--gold);
  text-shadow: 0 0 10px var(--gold-dim);
}

.nav__icon {
  font-size: 0.85rem;
  vertical-align: middle;
}

/* ── Council flyout (mega-menu) ── */
.nav__council { position: relative; display: inline-flex; align-items: center; }

.nav__council-trigger { display: inline-flex; align-items: center; gap: 0.3rem; }

.nav__caret { font-size: 0.5rem; transition: transform var(--transition-base); }
.nav__council:hover .nav__caret,
.nav__council.open .nav__caret { transform: rotate(180deg); }

.nav__flyout {
  position: fixed;
  top: calc(var(--nav-height) - 4px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(680px, calc(100vw - 2rem));
  padding: 1rem;
  background: rgba(11, 11, 11, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--neon-dim);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  z-index: var(--z-modal);
}

.nav__council:hover .nav__flyout,
.nav__council:focus-within .nav__flyout,
.nav__council.open .nav__flyout {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav__flyout-head {
  font-family: var(--font-accent);
  font-size: 0.58rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin-bottom: 0.85rem;
}

.nav__flyout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.nav__agent {
  display: flex !important;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem !important;
  border: 1px solid rgba(192, 192, 192, 0.08);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  background: rgba(28, 28, 28, 0.4);
  text-transform: none !important;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.nav__agent:hover {
  background: rgba(28, 28, 28, 0.7);
  border-color: var(--accent);
  transform: translateX(2px);
}

.nav__agent-sigil { font-size: 1.3rem; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 0 6px var(--accent-soft)); }
.nav__agent-txt { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.nav__agent-name { font-family: var(--font-accent); font-size: 0.66rem; letter-spacing: 1.5px; color: var(--accent); }
.nav__agent-house { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0; color: var(--silver-dim); text-transform: none; }
.nav__agent-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 6px var(--neon); margin-left: auto; flex-shrink: 0; animation: courtSeatPulse 2.4s ease-in-out infinite; }

.nav__flyout-foot {
  display: block !important;
  margin-top: 0.85rem;
  padding: 0.6rem !important;
  text-align: center;
  font-size: 0.62rem !important;
  color: var(--gold) !important;
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transition: background var(--transition-fast);
}
.nav__flyout-foot:hover { background: rgba(255, 215, 0, 0.08); }

.nav__divider {
  width: 1px;
  height: 1rem;
  background: linear-gradient(to bottom, transparent, var(--gold, #FFD700), transparent);
  opacity: 0.4;
  flex-shrink: 0;
}

.nav__links a {
  font-family: var(--font-accent);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--silver-dim);
  transition: color 0.3s, text-shadow 0.3s;
  position: relative;
  padding-bottom: 2px;
}

.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--neon);
  box-shadow: 0 0 6px var(--neon-dim);
  transition: width 0.3s;
}

.nav__links a:hover,
.nav__links a.active {
  color: var(--neon);
  text-shadow: 0 0 8px var(--neon-dim);
}

.nav__links a.active::after { width: 100%; }

/* Actions */
.nav__actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }

.nav__github { display: flex; align-items: center; }
.nav__github svg { width: 20px; height: 20px; fill: var(--silver-dim); transition: fill 0.3s; }
.nav__github:hover svg { fill: var(--neon); }

/* Hamburger */
.nav__menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav__menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--silver);
  transition: transform 0.3s, opacity 0.3s;
}

.nav__menu-btn.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav__menu-btn.open span:nth-child(2) { opacity: 0; }
.nav__menu-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ══════════════════════════════════════════════
   PAGE SYSTEM
   ══════════════════════════════════════════════ */
.app { position: relative; z-index: 1; background: transparent; }

.page {
  display: none;
  min-height: 100vh;
  padding-top: var(--nav-height);
}

.page.active {
  display: block;
  animation: pageEnter 0.45s ease-out;
}

/* ── Background Animations ── */
.page::before {
  content: '';
  position: fixed;
  inset: -60px 0 0 -60px;
  z-index: -2;
  background-image:
    linear-gradient(rgba(57,255,20,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,255,20,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridDrift 20s linear infinite;
  pointer-events: none;
  will-change: transform;
}

@keyframes gridDrift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(60px, 60px, 0); }
}

.page::after {
  content: '';
  position: fixed;
  top: 20%;
  right: -200px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(57,255,20,0.04), transparent 60%);
  animation: orbFloat 15s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: -1;
}

@keyframes orbFloat {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-80px, 60px) scale(1.1); }
  66%  { transform: translate(40px, -40px) scale(0.9); }
  100% { transform: translate(-60px, 80px) scale(1.05); }
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   PAGE-SPECIFIC TRANSITIONS
   ═══════════════════════════════════════════════════════════ */
.page-exit-crt {
  animation: crtOff 0.25s ease-out forwards;
}
@keyframes crtOff {
  0% { opacity: 1; filter: none; }
  40% { opacity: 1; filter: brightness(2) contrast(3); transform: scaleY(0.01); }
  100% { opacity: 0; filter: brightness(0); transform: scaleY(0); }
}
.page-enter-terminal {
  animation: crtOn 0.4s ease-out;
}
@keyframes crtOn {
  0% { opacity: 0; filter: brightness(3); transform: scaleY(0.01); }
  50% { opacity: 1; filter: brightness(2); transform: scaleY(0.01); }
  60% { transform: scaleY(1) scaleX(0.8); }
  80% { transform: scaleX(1.05); filter: brightness(1.2); }
  100% { filter: none; transform: none; }
}

.page-exit-dissolve {
  animation: dissolve 0.3s ease-out forwards;
}
@keyframes dissolve {
  0% { opacity: 1; filter: blur(0); }
  100% { opacity: 0; filter: blur(8px); }
}
.page-enter-gallery {
  animation: galleryIn 0.5s ease-out;
}
@keyframes galleryIn {
  0% { opacity: 0; transform: scale(1.05); filter: blur(4px); }
  100% { opacity: 1; transform: none; filter: none; }
}

.page-exit-page {
  animation: pageTurn 0.3s ease-in forwards;
}
@keyframes pageTurn {
  0% { opacity: 1; transform: perspective(800px) rotateY(0); }
  100% { opacity: 0; transform: perspective(800px) rotateY(-30deg) translateX(-50px); }
}
.page-enter-shelf {
  animation: pageTurnIn 0.4s ease-out;
}
@keyframes pageTurnIn {
  0% { opacity: 0; transform: perspective(800px) rotateY(30deg) translateX(50px); }
  100% { opacity: 1; transform: none; }
}

.page-exit-glitch {
  animation: glitchOut 0.25s steps(4) forwards;
}
@keyframes glitchOut {
  0% { opacity: 1; transform: none; filter: none; }
  25% { opacity: 0.8; transform: translateX(-3px) skewX(-1deg); filter: hue-rotate(90deg); }
  50% { opacity: 0.6; transform: translateX(3px) skewX(1deg); filter: hue-rotate(180deg); }
  75% { opacity: 0.3; transform: translateX(-2px); filter: hue-rotate(270deg) saturate(2); }
  100% { opacity: 0; transform: none; filter: none; }
}
.page-enter-dashboard {
  animation: glitchIn 0.3s ease-out;
}
@keyframes glitchIn {
  0% { opacity: 0; clip-path: inset(0 0 100% 0); }
  50% { opacity: 0.5; clip-path: inset(40% 0 30% 0); }
  100% { opacity: 1; clip-path: inset(0); }
}

/* ═══════════════════════════════════════════════════════════
   AURORA BOREALIS — GLOBAL
   ═══════════════════════════════════════════════════════════ */
 .aurora {
   position: fixed;
   inset: 0;
   z-index: 2;
   pointer-events: none;
   overflow: hidden;
 }
.aurora__layer {
  position: absolute;
  top: -30%;
  left: -20%;
  width: 140%;
  height: 70%;
  filter: blur(50px);
  will-change: transform, opacity;
}
.aurora__layer--emerald {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(57, 255, 20, 0.12) 20%,
    rgba(100, 255, 80, 0.18) 40%,
    rgba(57, 255, 20, 0.14) 60%,
    transparent 80%
  );
  animation: auroraDrift 14s ease-in-out infinite;
}
.aurora__layer--gold {
  top: -15%;
  right: -20%;
  left: auto;
  width: 80%;
  height: 50%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 215, 0, 0.1) 30%,
    rgba(255, 215, 0, 0.15) 50%,
    transparent 70%
  );
  animation: auroraDrift 18s ease-in-out infinite reverse;
}
.aurora__layer--silver {
  top: 5%;
  left: 10%;
  width: 60%;
  height: 35%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(192, 192, 192, 0.08) 35%,
    rgba(192, 192, 192, 0.12) 55%,
    transparent 75%
  );
  animation: auroraDrift 22s ease-in-out infinite 3s;
  filter: blur(60px);
}
@keyframes auroraDrift {
  0%, 100% { transform: translateX(0) skewX(0deg); opacity: 0.6; }
  20% { transform: translateX(4%) skewX(1.5deg); opacity: 0.85; }
  40% { transform: translateX(-3%) skewX(-1deg); opacity: 1; }
  60% { transform: translateX(5%) skewX(2deg); opacity: 0.7; }
  80% { transform: translateX(-2%) skewX(-0.5deg); opacity: 0.95; }
}
body.theme-light .aurora__layer--emerald {
  background: linear-gradient(180deg, transparent 0%, rgba(10,107,53,0.08) 40%, transparent 80%);
}
body.theme-light .aurora__layer--gold {
  background: linear-gradient(180deg, transparent 0%, rgba(154,114,9,0.06) 40%, transparent 70%);
}
body.theme-light .aurora__layer--silver {
  background: linear-gradient(180deg, transparent 0%, rgba(100,100,100,0.04) 40%, transparent 70%);
}

/* ═══════════════════════════════════════════════════════════
   AMBIENT FLOATING RUNES (CSS)
   ═══════════════════════════════════════════════════════════ */
.ambient-runes {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.ambient-rune {
  position: absolute;
  font-size: 1.5rem;
  color: var(--neon-dim);
  opacity: 0.03;
  animation: runeFloat var(--dur, 20s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes runeFloat {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.04; }
  90% { opacity: 0.04; }
  100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }
}
body.theme-light .ambient-rune {
  color: var(--gold-dim);
  opacity: 0.02;
}

/* Page header (non-home pages) */
.page-header {
  text-align: center;
  padding: 5rem 2rem 3rem;
  position: relative;
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon), var(--gold), var(--neon), transparent);
  background-size: 200% 100%;
  animation: headerSweep 3s ease-in-out infinite;
}

@keyframes headerSweep {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}

.page-header__label {
  font-family: var(--font-accent);
  font-size: 0.65rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--neon);
  text-shadow: 0 0 6px var(--neon-dim);
  margin-bottom: 0.75rem;
}

.page-header__title {
  font-family: var(--font-title);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold), #FFA500, var(--gold), #FFEC8B);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
}

.page-header__subtitle {
  color: var(--silver-dim);
  font-size: 1.05rem;
  font-weight: 300;
  max-width: 500px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════
   TEXT SELECTION
   ═══════════════════════════════════════════════════════════ */
::selection {
  background: rgba(255, 215, 0, 0.3);
  color: var(--gold);
  text-shadow: 0 0 8px var(--gold-dim);
}
::-moz-selection {
  background: rgba(255, 215, 0, 0.3);
  color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════
   NAV LINK RIPPLE
   ═══════════════════════════════════════════════════════════ */
.nav__links a {
  position: relative;
  overflow: hidden;
}
.nav__links a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 215, 0, 0.15);
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s, opacity 0.4s;
  opacity: 0;
}
.nav__links a:active::before {
  width: 200px;
  height: 200px;
  opacity: 1;
  transition: width 0s, height 0s, opacity 0s;
}

/* ═══════════════════════════════════════════════════════════
   AMBIENT BACKGROUND PULSE
   ═══════════════════════════════════════════════════════════ */
body::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(57,255,20,0.02) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
  animation: ambientPulse 8s ease-in-out infinite;
}
body.theme-light::before {
  background: radial-gradient(circle, rgba(10,107,53,0.03) 0%, transparent 70%);
}
@keyframes ambientPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

/* Section wrapper */
.page-section {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 4rem 2rem;
}

.page-section--wide { max-width: var(--content-wide); }

.page-section--alt {
  max-width: none;
  background: linear-gradient(180deg, var(--smoke) 0%, var(--obsidian) 100%);
}

.page-section--alt > .page-section__inner {
  max-width: var(--content-width);
  margin: 0 auto;
}

/* Section titles (within pages) */
.subsection-title {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.subsection-subtitle {
  font-family: var(--font-accent);
  font-size: 0.6rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--neon);
  text-shadow: 0 0 4px var(--neon-dim);
  margin-bottom: 1.5rem;
}

/* ── Reveal animation ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Crown divider */
.crown-divider {
  text-align: center;
  padding: 2.5rem 0;
  font-size: 1.2rem;
  color: var(--gold-dim);
  letter-spacing: 12px;
  text-shadow: 0 0 10px rgba(255,215,0,0.22);
  animation: crownPulse 4s ease-in-out infinite;
}

@keyframes crownPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* ══════════════════════════════════════════════
   HOME — HERO
   ══════════════════════════════════════════════ */
.page--home { padding-top: 0; }
.page--home::before, .page--home::after { display: none; }

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 2rem;
}

.hero__glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--neon-dim) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  z-index: 0;
  animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -55%) scale(1); }
  50%      { opacity: 0.8; transform: translate(-50%, -55%) scale(1.08); }
}

.hero__content { position: relative; z-index: 1; }

.hero__logo {
  width: 200px;
  height: 200px;
  border-radius: 12px;
  object-fit: cover;
  margin-bottom: 1.5rem;
  animation: heroFadeIn 1s ease-out both;
  filter: drop-shadow(0 0 30px var(--neon-dim));
}

.hero__title {
  font-family: var(--font-title);
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 900;
  letter-spacing: 12px;
  line-height: 1.1;
  background: linear-gradient(135deg, var(--gold), #FFA500, var(--gold), #FFEC8B);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroFadeIn 1s 0.15s ease-out both;
}

.hero__acronym {
  font-family: var(--font-accent);
  font-size: clamp(0.55rem, 1.3vw, 0.8rem);
  letter-spacing: 4px;
  color: var(--neon);
  text-shadow: 0 0 10px var(--neon-dim);
  margin-top: 0.75rem;
  animation: heroFadeIn 1s 0.3s ease-out both;
}

.hero__tagline {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 300;
  font-style: italic;
  color: var(--silver-dim);
  margin-top: 1.5rem;
  animation: heroFadeIn 1s 0.45s ease-out both;
}

.hero__oath {
  font-family: var(--font-title);
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.9rem;
  animation: heroFadeIn 1s 0.5s ease-out both;
}
.hero__amp { color: var(--neon); font-weight: 400; margin: 0 0.18em; opacity: 0.85; }

.hero__intro {
  font-size: 0.95rem;
  color: var(--silver-dim);
  max-width: 550px;
  margin: 1rem auto 0;
  animation: heroFadeIn 1s 0.55s ease-out both;
}

.hero__cta-group {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
  animation: heroFadeIn 1s 0.65s ease-out both;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.8rem;
  font-family: var(--font-accent);
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon);
  border: 1px solid var(--neon-dim);
  background: transparent;
  clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);
  transition: background 0.3s, box-shadow 0.3s, color 0.3s;
}

.hero__cta:hover {
  background: var(--neon-dim);
  box-shadow: 0 0 20px var(--neon-dim);
  color: var(--white);
}

.hero__cta--secondary {
  color: var(--gold);
  border-color: var(--gold-dim);
}

.hero__cta--secondary:hover {
  background: var(--gold-dim);
  box-shadow: 0 0 20px var(--gold-dim);
  color: var(--white);
}

.hero__cta svg { width: 14px; height: 14px; fill: currentColor; }

@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero — Pillar previews */
/* ── Dual Hero Layout ── */
.hero-court {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 2rem;
  animation: heroFadeIn 1s ease-out both;
  position: relative;
  min-height: 280px;
}

.hero-court__agent {
  text-align: center;
  flex: 0 0 auto;
  width: 360px;
  z-index: 2;
}

.hero-court__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 400px;
  min-height: 320px;
  z-index: 1;
}

.hero-court__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.court-line {
  opacity: 0.5;
}

.court-pulse {
  filter: drop-shadow(0 0 4px currentColor);
}

.hero-court__monarch {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.hero-court__crown {
  filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.4)) drop-shadow(0 0 50px rgba(255, 165, 0, 0.2));
  animation: crownFloat 3s ease-in-out infinite;
}

.hero-court__ring-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  pointer-events: none;
}
.hero-court__ring-outer {
  animation: ringRotate 20s linear infinite;
  transform-origin: center;
}
.hero-court__ring-inner {
  animation: ringRotate 30s linear infinite reverse;
  transform-origin: center;
}
@keyframes ringRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes crownFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.hero-court__monarch-title {
  font-family: var(--font-title);
  font-size: 0.7rem;
  letter-spacing: 6px;
  color: var(--gold);
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.hero-court__monarch-name {
  font-family: var(--font-accent);
  font-size: 0.5rem;
  letter-spacing: 2px;
  color: var(--silver-dim);
}

.hero-court__link {
  display: block;
  text-decoration: none;
  transition: transform 0.3s;
}

.hero-court__link:hover { transform: translateY(-4px); }

.hero-court__logo {
  width: 180px;
  height: 180px;
  border-radius: 20px;
  object-fit: cover;
  margin-bottom: 0.6rem;
  filter: drop-shadow(0 0 30px var(--neon-dim));
}

.hero-court__agent--hakim .hero-court__logo {
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.15));
}

.hero-court__name {
  font-family: var(--font-title);
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 900;
  letter-spacing: 6px;
  line-height: 1.1;
}

.hero-court__acronym {
  font-family: var(--font-accent);
  font-size: clamp(0.4rem, 0.7vw, 0.55rem);
  letter-spacing: 1.5px;
  color: var(--neon);
  text-shadow: 0 0 8px var(--neon-dim);
  margin-top: 0.4rem;
}

.hero-court__role {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--silver-dim);
  margin-top: 0.3rem;
  font-style: italic;
}

/* ── Hero Court Agent Flames ── */
.hero-court__logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6rem;
}
 .hero-court__flames {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 70px;
  display: flex;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
}
.hero-court__flame {
  display: block;
  width: 18px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation-delay: calc(var(--i) * 0.1s), calc(var(--i) * 0.15s), calc(var(--i) * 0.2s);
  filter: blur(2px);
  position: relative;
}
.hero-court__flames--emerald .hero-court__flame {
  background: linear-gradient(to top, rgba(57,255,20,0.05), rgba(57,255,20,0.5), rgba(100,255,80,0.7), rgba(180,255,160,0.3));
  box-shadow: 0 0 8px rgba(57,255,20,0.6), 0 0 16px rgba(57,255,20,0.4), 0 0 32px rgba(57,255,20,0.2), 0 0 60px rgba(57,255,20,0.1);
  height: 50px;
}
.hero-court__flames--emerald .hero-court__flame:nth-child(odd) {
  height: 60px;
  width: 14px;
}
.hero-court__flames--gold .hero-court__flame {
  background: linear-gradient(to top, rgba(255,215,0,0.05), rgba(255,215,0,0.5), rgba(255,180,0,0.7), rgba(255,240,150,0.3));
  box-shadow: 0 0 8px rgba(255,215,0,0.6), 0 0 16px rgba(255,215,0,0.4), 0 0 32px rgba(255,215,0,0.2), 0 0 60px rgba(255,215,0,0.1);
  height: 50px;
}
.hero-court__flames--gold .hero-court__flame:nth-child(odd) {
  height: 60px;
  width: 14px;
}
@keyframes heroFlame {
  0%   { transform: scaleY(0.55) scaleX(1.1) translateY(0) skewX(-3deg); opacity: 0.4; }
  14%  { transform: scaleY(0.75) scaleX(0.95) translateY(-2px) skewX(2deg); opacity: 0.7; }
  28%  { transform: scaleY(1.0) scaleX(0.8) translateY(-4px) skewX(-1deg); opacity: 0.9; }
  42%  { transform: scaleY(1.2) scaleX(0.7) translateY(-7px) skewX(3deg); opacity: 1; }
  57%  { transform: scaleY(1.05) scaleX(0.85) translateY(-5px) skewX(-2deg); opacity: 0.85; }
  71%  { transform: scaleY(0.85) scaleX(1.0) translateY(-3px) skewX(1deg); opacity: 0.65; }
  85%  { transform: scaleY(0.95) scaleX(0.9) translateY(-1px) skewX(-1deg); opacity: 0.8; }
  100% { transform: scaleY(0.6) scaleX(1.15) translateY(0) skewX(-3deg); opacity: 0.5; }
}
@keyframes flameGlow {
  0% { filter: blur(2px) brightness(1); }
  50% { filter: blur(3px) brightness(1.3); }
  100% { filter: blur(1.5px) brightness(0.9); }
}
@keyframes flameTipSpark {
  0%   { opacity: 0; transform: translateY(0) scale(1); }
  20%  { opacity: 0.8; }
  60%  { opacity: 0.4; transform: translateY(-12px) scale(0.6); }
  100% { opacity: 0; transform: translateY(-20px) scale(0.2); }
}
@keyframes flameTempShift {
  0%   { filter: hue-rotate(0deg) saturate(1.1); }
  33%  { filter: hue-rotate(-8deg) saturate(1.3); }
  66%  { filter: hue-rotate(5deg) saturate(0.9); }
  100% { filter: hue-rotate(0deg) saturate(1.1); }
}
.hero-court__flame::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transform: translateX(-50%);
  animation: flameTipSpark 0.6s ease-out infinite;
  pointer-events: none;
}
.hero-court__flames--emerald .hero-court__flame::after {
  background: rgba(180,255,160,0.9);
  box-shadow: 0 0 4px rgba(57,255,20,0.8), 0 0 8px rgba(100,255,80,0.5);
}
.hero-court__flames--gold .hero-court__flame::after {
  background: rgba(255,240,150,0.9);
  box-shadow: 0 0 4px rgba(255,215,0,0.8), 0 0 8px rgba(255,180,0,0.5);
}
.hero-court__flame {
  filter: blur(1.5px) saturate(1.15);
  animation: heroFlame 0.8s ease-in-out infinite alternate;
}

/* ── Intro Overlay Agent Row ── */
.intro-agents {
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 3rem;
  margin-top: 1.5rem;
  opacity: 0;
  animation: introAgentsIn 1s 1.8s ease-out forwards;
}
@keyframes introAgentsIn {
  0% { opacity: 0; transform: translateY(15px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.intro-agent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.intro-agent__logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro-agent__logo {
  width: 200px;
  height: 200px;
  border-radius: 16px;
  object-fit: cover;
  filter: drop-shadow(0 0 20px rgba(57,255,20,0.3));
  animation: introAgentLogo 2s 2.8s ease-in-out infinite alternate;
}
.intro-agent--hakim .intro-agent__logo {
  filter: drop-shadow(0 0 12px rgba(255,215,0,0.3));
}
@keyframes introAgentLogo {
  0% { transform: translateY(0); }
  100% { transform: translateY(-3px); }
}
.intro-agent__name {
  font-family: var(--font-title);
  font-size: 1.8rem;
  letter-spacing: 6px;
  color: var(--neon);
  text-shadow: 0 0 10px var(--neon-dim);
  opacity: 0;
  animation: introSubIn 0.6s 2.2s ease-out forwards;
}
.intro-agent--hakim .intro-agent__name {
  color: var(--gold);
  text-shadow: 0 0 10px var(--gold-dim);
}
.intro-agent__divider {
  font-size: 2.4rem;
  color: var(--gold-dim);
  margin-top: 0.5rem;
  opacity: 0;
  animation: introSubIn 0.6s 2s ease-out forwards;
}

/* ── Intro Agent Flames ── */
.intro-agent__flames {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 60px;
  display: flex;
  justify-content: center;
  gap: 3px;
  pointer-events: none;
}
.intro-agent__flame {
  display: block;
  width: 14px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: heroFlame 0.7s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * 0.12s), calc(var(--i) * 0.18s), calc(var(--i) * 0.2s);
  filter: blur(2px);
  position: relative;
}
.intro-agent__flame::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  transform: translateX(-50%);
  animation: flameTipSpark 0.5s ease-out infinite;
  pointer-events: none;
}
.intro-agent__flames--emerald .intro-agent__flame::after {
  background: rgba(180,255,160,0.9);
  box-shadow: 0 0 3px rgba(57,255,20,0.8), 0 0 6px rgba(100,255,80,0.5);
}
.intro-agent__flames--gold .intro-agent__flame::after {
  background: rgba(255,240,150,0.9);
  box-shadow: 0 0 3px rgba(255,215,0,0.8), 0 0 6px rgba(255,180,0,0.5);
}
.intro-agent__flames--emerald .intro-agent__flame {
  background: linear-gradient(to top, rgba(57,255,20,0.05), rgba(57,255,20,0.6), rgba(100,255,80,0.7), rgba(180,255,160,0.3));
  box-shadow: 0 0 10px rgba(57,255,20,0.55), 0 0 20px rgba(57,255,20,0.35), 0 0 40px rgba(57,255,20,0.2), 0 0 70px rgba(57,255,20,0.08);
  height: 40px;
}
.intro-agent__flames--emerald .intro-agent__flame:nth-child(odd) {
  height: 50px;
  width: 10px;
}
.intro-agent__flames--gold .intro-agent__flame {
  background: linear-gradient(to top, rgba(255,215,0,0.05), rgba(255,215,0,0.6), rgba(255,180,0,0.7), rgba(255,240,150,0.3));
  box-shadow: 0 0 10px rgba(255,215,0,0.55), 0 0 20px rgba(255,215,0,0.35), 0 0 40px rgba(255,215,0,0.2), 0 0 70px rgba(255,215,0,0.08);
  height: 40px;
}
.intro-agent__flames--gold .intro-agent__flame:nth-child(odd) {
  height: 50px;
  width: 10px;
}

/* ── Pillar Preview Labels & HAKIM Variant ── */
.hero-pillars {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 1.5rem 2rem 2rem;
}

.hero-pillars:first-of-type { padding-top: 3rem; }
.hero-pillars--hakim { padding-bottom: 4rem; }

.hero-pillars__label {
  font-family: var(--font-accent);
  font-size: 0.6rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--neon);
  text-shadow: 0 0 6px var(--neon-dim);
  text-align: center;
  margin-bottom: 0.8rem;
}

.hero-pillars--hakim .hero-pillars__label {
  color: var(--gold);
  text-shadow: 0 0 6px var(--gold-dim);
}

.hero-pillar--hakim {
  border-color: rgba(255,215,0,0.1);
}

.hero-pillar--hakim:hover {
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(255,215,0,0.1);
}

.hero-pillar--hakim .hero-pillar__letter {
  color: var(--gold);
}

.hero-pillar--hakim .hero-pillar__name {
  color: var(--gold-dim);
}

.hero-pillars__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.hero-pillar {
  background: rgba(28,28,28,0.5);
  border: 1px solid rgba(57,255,20,0.08);
  border-radius: 4px;
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.hero-pillar:hover {
  border-color: var(--neon-glow);
  box-shadow: 0 0 20px rgba(57,255,20,0.08);
  transform: translateY(-3px);
}

.hero-pillar__letter {
  font-family: var(--font-title);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 10px var(--gold-dim);
  line-height: 1;
}

.hero-pillar__name {
  font-family: var(--font-accent);
  font-size: 0.55rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon);
  margin-top: 0.4rem;
}

/* ══════════════════════════════════════════════
   PILLARS PAGE
   ══════════════════════════════════════════════ */
.pillar-full {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(28,28,28,0.6), rgba(10,46,26,0.15));
  border: 1px solid rgba(57,255,20,0.1);
  border-radius: 4px;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s, box-shadow 0.4s;
}

.pillar-full:hover {
  border-color: var(--neon-glow);
  box-shadow: 0 0 30px rgba(57,255,20,0.08);
}

.pillar-full::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--gold), var(--neon), transparent);
}

.pillar-full__letter {
  font-family: var(--font-title);
  font-size: 4rem;
  font-weight: 900;
  background: linear-gradient(180deg, var(--gold), #FFA500);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  min-width: 60px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.25rem;
}

.pillar-full__name {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--neon);
  text-shadow: 0 0 6px var(--neon-dim);
  margin-bottom: 0.75rem;
}

.pillar-full__desc {
  font-size: 1rem;
  color: var(--silver);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.pillar-full__maxim {
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--gold);
  padding-left: 1rem;
  border-left: 2px solid var(--gold-dim);
  margin-bottom: 1rem;
}

.pillar-full__practice {
  font-size: 0.85rem;
  color: var(--silver-dim);
}

.pillar-full__practice strong {
  font-family: var(--font-accent);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon);
  margin-right: 0.5rem;
}

/* ══════════════════════════════════════════════
   IDENTITY PAGE
   ══════════════════════════════════════════════ */
/* Etymology */
.etymology {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.etymology__text p {
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.7;
}

.etymology__card {
  background: linear-gradient(135deg, rgba(28,28,28,0.6), rgba(10,46,26,0.2));
  border: 1px solid var(--neon-dim);
  border-radius: 4px;
  padding: 2.5rem 2rem;
  text-align: center;
}

.etymology__card-word {
  font-family: var(--font-title);
  font-size: 2.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold), #FFA500);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
}

.etymology__card-phonetic {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--silver-dim);
  font-style: italic;
  margin-bottom: 0.5rem;
}

.etymology__card-origin {
  font-family: var(--font-accent);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 1rem;
}

.etymology__card-meaning {
  font-size: 1.1rem;
  color: var(--silver);
}

/* Traits */
.traits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
}

.trait {
  padding: 1.2rem 1.2rem 1.2rem 1.5rem;
  border-left: 2px solid var(--neon-dim);
  background: rgba(28,28,28,0.3);
  border-radius: 0 4px 4px 0;
  transition: border-color 0.3s, background 0.3s;
}

.trait:hover {
  border-left-color: var(--neon);
  background: rgba(28,28,28,0.5);
}

.trait__label {
  font-family: var(--font-accent);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.3rem;
}

.trait__value {
  font-size: 0.95rem;
  color: var(--silver);
  line-height: 1.5;
}

/* Values */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
}

.value-card {
  background: rgba(28,28,28,0.4);
  border: 1px solid rgba(57,255,20,0.08);
  border-radius: 4px;
  padding: 1.5rem;
  text-align: center;
  transition: border-color 0.3s, transform 0.3s;
}

.value-card:hover {
  border-color: var(--neon-glow);
  transform: translateY(-2px);
}

.value-card__primary {
  font-family: var(--font-accent);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.3rem;
}

.value-card__over {
  font-size: 0.75rem;
  color: var(--silver-dim);
  margin-bottom: 0.5rem;
}

.value-card__desc {
  font-size: 0.85rem;
  color: var(--silver);
  line-height: 1.5;
}

/* Principles */
.principles-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.principle {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.2rem;
  background: rgba(28,28,28,0.3);
  border-radius: 4px;
  border: 1px solid rgba(57,255,20,0.06);
}

.principle__number {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold-dim);
  line-height: 1;
  padding-top: 0.15rem;
}

.principle__title {
  font-family: var(--font-accent);
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 0.3rem;
}

.principle__text {
  font-size: 0.95rem;
  color: var(--silver);
  line-height: 1.5;
}

/* Quote block (reusable) */
.quote-block {
  position: relative;
  background: linear-gradient(135deg, rgba(28,28,28,0.6), rgba(10,46,26,0.3));
  border: 1px solid var(--neon-dim);
  border-radius: 4px;
  padding: 2.5rem 2.5rem 2rem;
  text-align: center;
  margin-top: 2rem;
}

.quote-block::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.quote-block blockquote {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--gold);
  line-height: 1.7;
}

.quote-block cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-accent);
  font-size: 0.55rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon);
  font-style: normal;
}

/* ══════════════════════════════════════════════
   BY THE NUMBERS — Stats Strip
   ══════════════════════════════════════════════ */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  padding: 2.5rem 2rem;
  background: linear-gradient(135deg, rgba(10,46,26,0.3), rgba(28,28,28,0.4));
  border: 1px solid var(--neon-dim);
  border-radius: 8px;
  text-align: center;
}

.stats-strip__item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.stats-strip__number {
  font-family: var(--font-accent);
  font-size: 2rem;
  font-weight: 700;
  color: var(--neon);
  text-shadow: 0 0 12px var(--neon-dim);
  line-height: 1;
}

.stats-strip__label {
  font-family: var(--font-accent);
  font-size: 0.55rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--silver-dim);
}

/* ══════════════════════════════════════════════
   ARMORY CATALOG
   ══════════════════════════════════════════════ */
.armory-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.armory-filter__btn {
  background: transparent;
  border: 1px solid var(--neon-dim);
  color: var(--silver-dim);
  font-family: var(--font-accent);
  font-size: 0.65rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.armory-filter__btn:hover {
  border-color: var(--neon);
  color: var(--neon);
}

.armory-filter__btn.active {
  background: var(--neon);
  border-color: var(--neon);
  color: var(--obsidian);
}

.armory-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
}

.armory-catalog__card {
  background: linear-gradient(135deg, rgba(10,46,26,0.25), rgba(28,28,28,0.35));
  border: 1px solid var(--neon-dim);
  border-radius: 8px;
  padding: 1.5rem;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.armory-catalog__card.hidden {
  display: none;
}

.armory-catalog__card:hover {
  border-color: var(--neon);
}

.armory-catalog__icon {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.armory-catalog__name {
  font-family: var(--font-accent);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 0.5rem;
}

.armory-catalog__desc {
  font-size: 0.8rem;
  color: var(--silver-dim);
  line-height: 1.5;
  margin-bottom: 0.8rem;
}

.armory-catalog__examples {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.armory-catalog__examples code {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  background: rgba(57,255,20,0.08);
  border: 1px solid rgba(57,255,20,0.15);
  color: var(--neon);
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
}

/* ── Light theme overrides ── */
body.theme-light .armory-filter__btn {
  border-color: #DDD;
  color: #666;
}

body.theme-light .armory-filter__btn:hover {
  border-color: var(--neon);
  color: var(--neon);
}

body.theme-light .armory-filter__btn.active {
  background: var(--neon);
  border-color: var(--neon);
  color: #FFFFFF;
}

body.theme-light .armory-catalog__card {
  background: #FFFFFF;
  border: 1px solid #E8E8E8;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

body.theme-light .armory-catalog__examples code {
  background: rgba(10,107,53,0.06);
  border-color: rgba(10,107,53,0.15);
}

/* ══════════════════════════════════════════════
   PROJECT CONSTELLATION
   ══════════════════════════════════════════════ */
.constellation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.constellation-card {
  background: rgba(28,28,28,0.5);
  border: 1px solid rgba(57,255,20,0.08);
  border-radius: 4px;
  padding: 1.8rem;
  transition: border-color 0.3s, box-shadow 0.3s;
  position: relative;
}

.constellation-card:hover {
  border-color: var(--neon-glow);
  box-shadow: 0 0 20px rgba(57,255,20,0.1);
}

.constellation-card--phantom {
  border-color: rgba(255,215,0,0.15);
  background: linear-gradient(135deg, rgba(28,28,28,0.5), rgba(255,215,0,0.03));
}

.constellation-card--phantom:hover {
  border-color: var(--gold-dim);
  box-shadow: 0 0 20px rgba(255,215,0,0.1);
}

.constellation-card__icon {
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
}

.constellation-card__name {
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.3rem;
}

.constellation-card__role {
  font-family: var(--font-accent);
  font-size: 0.5rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 0.8rem;
}

.constellation-card__desc {
  font-size: 0.9rem;
  color: var(--silver);
  line-height: 1.5;
}

.constellation-card__status {
  display: inline-block;
  margin-top: 0.8rem;
  font-family: var(--font-accent);
  font-size: 0.5rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: 3px;
  border: 1px solid var(--neon-dim);
  color: var(--neon);
}

.constellation-card__status--upcoming {
  border-color: var(--gold-dim);
  color: var(--gold);
}

.constellation-card__status--envisioned {
  border-color: var(--silver-faint);
  color: var(--silver-dim);
}

@media (max-width: 600px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 1.5rem 1rem; }
  .stats-strip__number { font-size: 1.5rem; }
  .constellation-grid, .summon-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════
   MONARCH PROFILE
   ══════════════════════════════════════════════ */
.monarch-profile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(28,28,28,0.6), rgba(10,46,26,0.2));
  border: 1px solid var(--gold-dim);
  border-radius: 8px;
}

.monarch-profile__name {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.monarch-profile__title {
  font-family: var(--font-accent);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 1rem;
}

.monarch-profile__bio {
  font-size: 0.95rem;
  color: var(--silver);
  line-height: 1.6;
}

.monarch-profile__traits {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.monarch-trait {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 0.8rem;
  background: rgba(28,28,28,0.4);
  border-radius: 4px;
  border: 1px solid rgba(255,215,0,0.06);
  font-size: 0.85rem;
  color: var(--silver);
}

.monarch-trait__icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.monarch-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.monarch-links a {
  font-family: var(--font-accent);
  font-size: 0.55rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0.4rem 1rem;
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  transition: all 0.3s;
}

.monarch-links a:hover {
  background: rgba(255,215,0,0.1);
  box-shadow: 0 0 12px rgba(255,215,0,0.2);
}

@media (max-width: 600px) {
  .monarch-profile { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   ROADMAP TIMELINE
   ══════════════════════════════════════════════ */
.roadmap-timeline {
  position: relative;
  padding-left: 3rem;
}

.roadmap-timeline::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--neon-dim), var(--gold-dim), var(--silver-faint));
}

.roadmap-phase {
  position: relative;
  margin-bottom: 2rem;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.roadmap-phase__marker {
  position: absolute;
  left: -2.3rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-accent);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  z-index: 1;
  flex-shrink: 0;
}

.roadmap-phase--done .roadmap-phase__marker {
  background: var(--deep-green);
  border: 2px solid var(--neon);
  color: var(--neon);
  box-shadow: 0 0 8px var(--neon-dim);
}

.roadmap-phase--active .roadmap-phase__marker {
  background: rgba(255,215,0,0.15);
  border: 2px solid var(--gold);
  color: var(--gold);
  box-shadow: 0 0 12px var(--gold-dim);
  animation: pulse-glow-gold 2s ease-in-out infinite;
}

.roadmap-phase--future .roadmap-phase__marker {
  background: var(--smoke);
  border: 2px solid var(--silver-faint);
  color: var(--silver-dim);
}

@keyframes pulse-glow-gold {
  0%, 100% { opacity: 0.88; }
  50%      { opacity: 1; }
}

.roadmap-phase__content {
  background: rgba(28,28,28,0.5);
  border: 1px solid rgba(57,255,20,0.08);
  border-radius: 4px;
  padding: 1.5rem;
  flex: 1;
}

.roadmap-phase--done .roadmap-phase__content {
  border-color: rgba(57,255,20,0.15);
}

.roadmap-phase--active .roadmap-phase__content {
  border-color: rgba(255,215,0,0.2);
  background: linear-gradient(135deg, rgba(28,28,28,0.5), rgba(255,215,0,0.03));
}

.roadmap-phase--future .roadmap-phase__content {
  border-color: rgba(192,192,192,0.08);
  opacity: 0.7;
}

.roadmap-phase__title {
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.2rem;
}

.roadmap-phase__date {
  font-family: var(--font-accent);
  font-size: 0.5rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 0.6rem;
}

.roadmap-phase--future .roadmap-phase__date {
  color: var(--silver-dim);
}

.roadmap-phase__desc {
  font-size: 0.9rem;
  color: var(--silver);
  line-height: 1.5;
  margin-bottom: 0.8rem;
}

.roadmap-phase__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.roadmap-phase__tags span {
  font-family: var(--font-accent);
  font-size: 0.45rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  border: 1px solid var(--neon-dim);
  color: var(--neon);
}

.roadmap-phase--future .roadmap-phase__tags span {
  border-color: var(--silver-faint);
  color: var(--silver-dim);
}

@media (max-width: 600px) {
  .roadmap-timeline { padding-left: 2.5rem; }
  .roadmap-phase__marker { left: -2rem; width: 2rem; height: 2rem; font-size: 0.5rem; }
}

/* ══════════════════════════════════════════════
   ARSENAL PAGE
   ══════════════════════════════════════════════ */
.arsenal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}

.arsenal-card {
  background: rgba(28,28,28,0.5);
  border: 1px solid rgba(57,255,20,0.08);
  border-radius: 4px;
  padding: 2rem;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  position: relative;
  overflow: hidden;
}

.arsenal-card::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(57,255,20,0.03), transparent);
  transition: top 0.6s ease;
  pointer-events: none;
}

.arsenal-card:hover::before {
  top: 100%;
}

.arsenal-card:hover {
  border-color: var(--neon-glow);
  box-shadow: 0 0 25px rgba(57,255,20,0.1), inset 0 0 30px rgba(57,255,20,0.02);
  transform: translateY(-4px);
}

.arsenal-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.arsenal-card__icon {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(57,255,20,0.06);
  border-radius: 4px;
  flex-shrink: 0;
}

.arsenal-card__title {
  font-family: var(--font-accent);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
}

.arsenal-card__status {
  font-family: var(--font-accent);
  font-size: 0.5rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--neon);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.arsenal-card__status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 6px var(--neon);
}

.arsenal-card__desc {
  font-size: 0.95rem;
  color: var(--silver);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.arsenal-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.arsenal-card__features li {
  font-size: 0.85rem;
  color: var(--silver-dim);
  padding-left: 1rem;
  position: relative;
}

.arsenal-card__features li::before {
  content: '>';
  position: absolute;
  left: 0;
  color: var(--neon);
  font-family: var(--font-accent);
  font-size: 0.7rem;
}

/* ══════════════════════════════════════════════
   CREST PAGE
   ══════════════════════════════════════════════ */
/* Palette */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.2rem;
}

.palette-card {
  background: rgba(28,28,28,0.4);
  border: 1px solid rgba(57,255,20,0.06);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.palette-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 15px rgba(57,255,20,0.1);
}

.palette-card__swatch { height: 80px; }

.palette-card__info { padding: 1rem; }

.palette-card__name {
  font-family: var(--font-accent);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0.2rem;
}

.palette-card__hex {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--silver);
  margin-bottom: 0.4rem;
}

.palette-card__role {
  font-size: 0.8rem;
  color: var(--silver-dim);
  line-height: 1.4;
}

/* Typography showcase */
.type-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.type-card {
  background: rgba(28,28,28,0.4);
  border: 1px solid rgba(57,255,20,0.06);
  border-radius: 4px;
  padding: 2rem;
  text-align: center;
}

.type-card__label {
  font-family: var(--font-accent);
  font-size: 0.55rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 1rem;
}

.type-card__sample--cinzel {
  font-family: var(--font-title);
  font-size: 1.6rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--gold), #FFA500);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.75rem;
}

.type-card__sample--rajdhani {
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--silver);
  margin-bottom: 0.75rem;
}

.type-card__sample--orbitron {
  font-family: var(--font-accent);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--neon);
  text-shadow: 0 0 8px var(--neon-dim);
  margin-bottom: 0.75rem;
}

.type-card__context {
  font-size: 0.85rem;
  color: var(--silver-dim);
  line-height: 1.5;
}

/* Emblem anatomy */
.emblem-section {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3rem;
  align-items: start;
}

.emblem-section__img {
  width: 200px;
  border-radius: 8px;
  filter: drop-shadow(0 0 20px var(--neon-dim));
}

.emblem-anatomy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.emblem-element {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0.75rem;
  align-items: start;
}

.emblem-element__icon {
  font-size: 1.1rem;
  text-align: center;
  padding-top: 2px;
}

.emblem-element__name {
  font-family: var(--font-accent);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.2rem;
}

.emblem-element__desc {
  font-size: 0.9rem;
  color: var(--silver);
  line-height: 1.5;
}

/* Design principles */
.design-principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

.design-principle {
  padding: 1.5rem;
  background: rgba(28,28,28,0.3);
  border: 1px solid rgba(57,255,20,0.06);
  border-radius: 4px;
}

.design-principle__title {
  font-family: var(--font-accent);
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.design-principle__desc {
  font-size: 0.9rem;
  color: var(--silver);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════
   OATH PAGE
   ══════════════════════════════════════════════ */
.manifesto {
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
}

.manifesto p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--silver);
  margin-bottom: 1.5rem;
}

.manifesto p:last-child { margin-bottom: 0; }

.oath-quotes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 750px;
  margin: 0 auto;
}

.oath-quote {
  position: relative;
  padding: 1.5rem 2rem 1.5rem 3rem;
  background: rgba(28,28,28,0.3);
  border-left: 2px solid var(--gold-dim);
  border-radius: 0 4px 4px 0;
}

.oath-quote::before {
  content: '\201C';
  position: absolute;
  left: 0.6rem;
  top: 0.5rem;
  font-size: 2rem;
  color: var(--gold-dim);
  font-family: var(--font-title);
  line-height: 1;
}

.oath-quote p {
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--silver);
  line-height: 1.6;
}

/* Ecosystem links */
.ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.ecosystem-card {
  background: rgba(28,28,28,0.4);
  border: 1px solid rgba(57,255,20,0.08);
  border-radius: 4px;
  padding: 2rem;
  text-align: center;
  transition: border-color 0.3s, transform 0.3s;
}

.ecosystem-card:hover {
  border-color: var(--neon-glow);
  transform: translateY(-3px);
}

.ecosystem-card__name {
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.3rem;
}

.ecosystem-card__tagline {
  font-family: var(--font-accent);
  font-size: 0.55rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 0.75rem;
}

.ecosystem-card__desc {
  font-size: 0.9rem;
  color: var(--silver-dim);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.ecosystem-card__link {
  font-family: var(--font-accent);
  font-size: 0.6rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
.footer {
  border-top: 1px solid rgba(57,255,20,0.1);
  padding: 2.5rem 2rem;
  text-align: center;
}

.footer__creed {
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--gold-dim);
  margin-bottom: 1.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.footer__attribution {
  font-family: var(--font-accent);
  font-size: 0.55rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin-bottom: 1rem;
}

.footer__links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer__links a {
  font-family: var(--font-accent);
  font-size: 0.55rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--silver-dim);
}

/* ══════════════════════════════════════════════
   HOME — LIVING SYSTEM BADGE
   ══════════════════════════════════════════════ */
.hero__live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.5rem auto 1.5rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--neon-dim);
  border-radius: 999px;
  background: rgba(28, 28, 28, 0.75);
  font-family: var(--font-accent);
  font-size: 0.6rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--silver);
  transition: border-color 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.hero__live-badge:hover {
  border-color: var(--neon);
  color: var(--neon);
  transform: translateY(-1px);
  box-shadow: 0 0 18px var(--neon-dim);
  text-shadow: 0 0 6px var(--neon-glow);
}

.hero__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 8px var(--neon), 0 0 14px var(--neon-glow);
  animation: livePulse 2.4s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.78); }
}

/* ══════════════════════════════════════════════
   EVOLUTION PAGE
   ══════════════════════════════════════════════ */

/* Status banner */
.evo-status {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.6rem 2rem;
  background: linear-gradient(135deg, rgba(28, 28, 28, 0.7), rgba(10, 46, 26, 0.35));
  border: 1px solid var(--neon-dim);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.evo-status::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon), transparent);
}

.evo-status__pulse {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.evo-status__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 12px var(--neon), 0 0 24px var(--neon-glow);
  z-index: 2;
}

.evo-status__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--neon);
  opacity: 0;
  animation: evoRing 2.6s ease-out infinite;
}

@keyframes evoRing {
  0%   { transform: scale(0.4); opacity: 0.85; }
  80%  { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}

.evo-status__body { flex: 1; min-width: 0; }

.evo-status__label {
  font-family: var(--font-accent);
  font-size: 0.55rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 0.3rem;
}

.evo-status__value {
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.evo-status__sub {
  font-size: 0.9rem;
  color: var(--silver-dim);
  font-weight: 300;
}

/* The two living files */
.evo-files {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  margin-top: 1.5rem;
}

.evo-file {
  padding: 2rem 1.8rem;
  background: rgba(28, 28, 28, 0.45);
  border: 1px solid rgba(57, 255, 20, 0.1);
  border-radius: 6px;
  position: relative;
  transition: border-color 0.4s, transform 0.4s, box-shadow 0.4s;
}

.evo-file:hover {
  border-color: var(--neon-dim);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 18px rgba(57, 255, 20, 0.08);
}

.evo-file__header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(192, 192, 192, 0.1);
}

.evo-file__icon {
  font-size: 1.6rem;
  line-height: 1;
}

.evo-file__name {
  font-family: var(--font-accent);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--gold);
  flex: 1;
}

.evo-file__role {
  font-family: var(--font-accent);
  font-size: 0.55rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon);
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--neon-dim);
  border-radius: 999px;
}

.evo-file__desc {
  font-size: 0.95rem;
  color: var(--silver);
  line-height: 1.65;
  margin-bottom: 1.2rem;
}

.evo-file__rules {
  list-style: none;
  padding: 0;
  margin-bottom: 1.2rem;
}

.evo-file__rules li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.88rem;
  color: var(--silver-dim);
  margin-bottom: 0.55rem;
  line-height: 1.5;
}

.evo-file__rules li::before {
  content: '\25B8'; /* ▸ */
  position: absolute;
  left: 0;
  top: 0;
  color: var(--neon);
}

.evo-file__rules strong {
  color: var(--silver);
  font-weight: 600;
}

.evo-file__quote {
  font-family: var(--font-title);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--gold-bright);
  text-align: center;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 215, 0, 0.12);
}

/* The Loop */
/* ── Evolution Loop V2 ── */
.evo-loop-v2 {
  position: relative;
  margin-top: 2.5rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Ring sits behind the steps as an overlay */
.evo-loop-v2__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 320px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}
.evo-loop-v2__svg {
  width: 100%;
  height: 100%;
}
.evo-loop-v2__orbit {
  animation: loopOrbit 20s linear infinite;
  transform-origin: center;
}
@keyframes loopOrbit {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -1068; }
}
.evo-loop-v2__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.evo-loop-v2__infinity {
  font-size: 2.5rem;
  color: var(--gold);
  line-height: 1;
  text-shadow: 0 0 20px rgba(218, 165, 32, 0.3);
  animation: infinityPulse 3s ease-in-out infinite;
}
@keyframes infinityPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
.evo-loop-v2__center-label {
  font-family: var(--font-accent);
  font-size: 0.55rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 0.2rem;
}

/* Steps grid sits on top of the ring */
.evo-loop-v2__steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.evo-loop-v2__step {
  position: relative;
  padding: 0 1rem 2rem;
}
.evo-loop-v2__step:nth-child(odd) {
  padding-right: 2.5rem;
}
.evo-loop-v2__step:nth-child(even) {
  padding-left: 2.5rem;
}

/* Center spine — single vertical line down the middle */
.evo-loop-v2__connector {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, rgba(57, 255, 20, 0.4), rgba(57, 255, 20, 0.08));
}
.evo-loop-v2__step:nth-child(odd) .evo-loop-v2__connector {
  right: 0;
}
.evo-loop-v2__step:nth-child(even) .evo-loop-v2__connector {
  left: 0;
}
.evo-loop-v2__connector--return {
  background: linear-gradient(180deg, var(--emerald), var(--gold));
}

.evo-loop-v2__card {
  background: rgba(28, 28, 28, 0.5);
  border: 1px solid rgba(57, 255, 20, 0.08);
  border-radius: 12px;
  padding: 1.8rem;
  transition: border-color 0.4s, transform 0.3s, box-shadow 0.4s;
  position: relative;
}
.evo-loop-v2__card:hover {
  border-color: var(--neon-dim);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(57, 255, 20, 0.06);
}

/* Step number dot */
.evo-loop-v2__num {
  position: absolute;
  top: -12px;
  font-family: var(--font-accent);
  font-size: 0.55rem;
  letter-spacing: 3px;
  color: var(--bg-dark);
  background: var(--neon);
  padding: 3px 10px;
  border-radius: 10px;
  font-weight: 700;
}
.evo-loop-v2__step:nth-child(odd) .evo-loop-v2__num { right: 1.5rem; }
.evo-loop-v2__step:nth-child(even) .evo-loop-v2__num { left: 1.5rem; }

/* Step 5 and 6 get special accent colors */
.evo-loop-v2__step[data-step="5"] .evo-loop-v2__num {
  background: var(--gold);
}
.evo-loop-v2__step[data-step="6"] .evo-loop-v2__num {
  background: var(--emerald);
}
.evo-loop-v2__step[data-step="5"] .evo-loop-v2__card:hover {
  border-color: var(--gold);
  box-shadow: 0 8px 32px rgba(218, 165, 32, 0.08);
}
.evo-loop-v2__step[data-step="6"] .evo-loop-v2__card:hover {
  border-color: var(--emerald);
  box-shadow: 0 8px 32px rgba(16, 185, 129, 0.08);
}

.evo-loop-v2__icon {
  font-size: 1.6rem;
  margin-bottom: 0.6rem;
}

.evo-loop-v2__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.evo-loop-v2__step[data-step="5"] .evo-loop-v2__title { color: var(--gold); }
.evo-loop-v2__step[data-step="6"] .evo-loop-v2__title { color: var(--emerald); }

.evo-loop-v2__text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 0.8rem;
}

.evo-loop-v2__where {
  font-size: 0.72rem;
  color: var(--neon);
  opacity: 0.6;
  font-family: var(--font-body);
  letter-spacing: 0.5px;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(57, 255, 20, 0.08);
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hero-pillars__grid { grid-template-columns: repeat(3, 1fr); }
  .etymology { grid-template-columns: 1fr; }
  .traits-grid { grid-template-columns: 1fr; }
  .emblem-section { grid-template-columns: 1fr; }
  .emblem-section__img { margin: 0 auto; }
  .design-principles { grid-template-columns: 1fr; }
  .type-showcase { grid-template-columns: 1fr; }
  .ecosystem-grid { grid-template-columns: 1fr; }
  .pillar-full { grid-template-columns: 1fr; }
  .pillar-full__letter { justify-content: flex-start; }
  .evo-files { grid-template-columns: 1fr; }
  .evo-loop-v2__ring { display: none; }
  .evo-loop-v2__steps { grid-template-columns: 1fr; }
  .evo-loop-v2__step:nth-child(odd),
  .evo-loop-v2__step:nth-child(even) { padding: 0 0 1.5rem 2.5rem; }
  .evo-loop-v2__connector { left: 0 !important; right: auto !important; }
  .evo-loop-v2__step:nth-child(odd) .evo-loop-v2__num,
  .evo-loop-v2__step:nth-child(even) .evo-loop-v2__num { left: 1.5rem; right: auto; }
}

/* ══════════════════════════════════════════════
   HAKIM — The Inner Chamber
   ══════════════════════════════════════════════ */

/* Intro section: emblem + text side by side */
.hakim-intro {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3rem;
  align-items: center;
}

.hakim-intro__emblem {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hakim-intro__glow {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(57,255,20,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.hakim-intro__img {
  width: 260px;
  height: auto;
  border-radius: 8px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 20px rgba(57,255,20,0.15));
}

.hakim-intro__text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hakim-intro__name {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.hakim-intro__title-en {
  font-family: var(--font-title);
  font-size: 2.4rem;
  font-weight: 900;
  background: linear-gradient(180deg, var(--gold), #FFA500);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 6px;
}

.hakim-intro__title-ar {
  font-size: 2rem;
  color: var(--gold);
  opacity: 0.7;
}

.hakim-intro__role {
  font-family: var(--font-accent);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon);
  text-shadow: 0 0 6px var(--neon-dim);
}

.hakim-intro__text p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--silver);
}

/* Duality: WAZIR vs HAKIM comparison */
.duality {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: stretch;
}

.duality__card {
  background: rgba(28,28,28,0.4);
  border: 1px solid rgba(57,255,20,0.08);
  border-radius: 4px;
  padding: 2rem;
  text-align: center;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.duality__card:hover {
  border-color: var(--neon-glow);
  box-shadow: 0 0 30px rgba(57,255,20,0.06);
}

.duality__card--wazir { border-color: var(--neon-dim); }
.duality__card--wazir:hover { border-color: var(--neon); box-shadow: 0 0 30px rgba(57,255,20,0.12); }
.duality__card--hakim { border-color: var(--gold-dim); }
.duality__card--hakim:hover { border-color: var(--gold); box-shadow: 0 0 30px rgba(255,215,0,0.12); }

.duality__icon {
  font-size: 2.5rem;
  margin-bottom: 0.8rem;
}

.duality__name {
  font-family: var(--font-title);
  font-size: 1.6rem;
  font-weight: 700;
  background: linear-gradient(180deg, var(--gold), #FFA500);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 4px;
  margin-bottom: 0.3rem;
}

.duality__archetype {
  font-family: var(--font-accent);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon);
  text-shadow: 0 0 6px var(--neon-dim);
  margin-bottom: 1.2rem;
}

.duality__traits {
  list-style: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.duality__traits li {
  font-size: 0.9rem;
  color: var(--silver);
  padding-left: 1.2rem;
  position: relative;
}

.duality__traits li::before {
  content: '\25C6';
  position: absolute;
  left: 0;
  color: var(--neon);
  font-size: 0.5rem;
  top: 0.35rem;
}

.duality__quote {
  font-family: var(--font-title);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--gold);
  padding-top: 1rem;
  border-top: 1px solid var(--gold-dim);
}

.duality__vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

.duality__vs-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(180deg, transparent, var(--neon-glow), transparent);
}

.duality__vs-text {
  font-family: var(--font-title);
  font-size: 1.2rem;
  color: var(--gold);
  font-weight: 700;
}

/* HAKIM Pillars */
.hakim-pillars {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hakim-pillar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(28,28,28,0.6), rgba(10,46,26,0.15));
  border: 1px solid rgba(57,255,20,0.1);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s, box-shadow 0.4s;
}

.hakim-pillar:hover {
  border-color: var(--neon-glow);
  box-shadow: 0 0 30px rgba(57,255,20,0.08);
}

.hakim-pillar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--gold), var(--neon), transparent);
}

.hakim-pillar__letter {
  font-family: var(--font-title);
  font-size: 4rem;
  font-weight: 900;
  background: linear-gradient(180deg, var(--gold), #FFA500);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  min-width: 60px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.25rem;
}

.hakim-pillar__name {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--neon);
  text-shadow: 0 0 6px var(--neon-dim);
  margin-bottom: 0.75rem;
}

.hakim-pillar__arabic {
  font-family: 'Amiri', serif;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold);
  margin-left: 0.8rem;
  text-shadow: none;
}

.hakim-pillar__desc {
  font-size: 1rem;
  color: var(--silver);
  line-height: 1.7;
}

/* Summoning Protocol cards */
.summon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.summon-card {
  background: rgba(28,28,28,0.4);
  border: 1px solid rgba(57,255,20,0.08);
  border-radius: 4px;
  padding: 1.8rem;
  text-align: center;
  transition: border-color 0.3s, transform 0.3s;
}

.summon-card:hover {
  border-color: var(--neon-glow);
  transform: translateY(-2px);
}
.summon-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(57,255,20,0.05), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.summon-card:hover::after {
  opacity: 1;
}
.summon-card {
  position: relative;
  overflow: hidden;
}

.summon-card__mode {
  font-family: var(--font-accent);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--gold-dim);
}

.summon-card__desc {
  font-size: 0.9rem;
  color: var(--silver);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .nav__links {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    /* .nav has backdrop-filter → it is the containing block for this fixed
       child, so `bottom: 0` collapses to content height. Use a viewport-
       relative height (vh is viewport-based regardless of containing block). */
    height: calc(100vh - var(--nav-height));
    background: rgba(11, 11, 11, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 999;
  }

  .nav__links.open {
    opacity: 1;
    pointer-events: all;
  }

  .nav__group {
    flex-direction: column;
    gap: 1.5rem;
  }

  .nav__group:last-child {
    justify-content: center;
  }

  .nav__links a {
    font-size: 0.8rem;
    letter-spacing: 3px;
  }

  .nav__trio {
    gap: 1.5rem;
    padding: 0.4rem 1.5rem;
    border-color: rgba(255,215,0,0.25);
  }

  .nav__menu-btn { display: flex; }

  /* Council flyout: fixed panel pinned to both edges (no centering math —
     robust against the backdrop-filter containing-block offset), raised
     above the mobile-menu overlay (z 999), opened by tap. */
  .nav__flyout {
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    transform: translateY(-8px);
    max-height: calc(100vh - var(--nav-height) - 1.5rem);
    overflow-y: auto;
    z-index: 1001;
  }
  .nav__council.open .nav__flyout,
  .nav__council:focus-within .nav__flyout { transform: translateY(0); }
  .nav__flyout-grid { grid-template-columns: 1fr; }
  .nav__agent-house { white-space: normal; }
}

/* ══════════════════════════════════════════════
   HOME — Two Minds Teaser
   ══════════════════════════════════════════════ */

.home-duality {
  padding: 4rem 2rem 2rem;
  max-width: var(--content-width);
  margin: 0 auto;
}

.home-duality__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.home-duality__card {
  text-align: center;
}

.home-duality__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  color: var(--silver);
  transition: transform 0.3s;
}

.home-duality__link:hover {
  transform: translateY(-4px);
  color: var(--gold);
}

.home-duality__img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-dim);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.home-duality__link:hover .home-duality__img {
  border-color: var(--neon);
  box-shadow: 0 0 20px var(--neon-dim);
}

.home-duality__label {
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 4px;
  background: linear-gradient(180deg, var(--gold), #FFA500);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home-duality__sub {
  font-family: var(--font-accent);
  font-size: 0.55rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--silver-dim);
}

.home-duality__bridge {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.home-duality__bridge-line {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon-glow), transparent);
}

.home-duality__bridge-text {
  font-family: var(--font-title);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--silver-dim);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════
   IDENTITY — The Other Mind (HAKIM teaser)
   ══════════════════════════════════════════════ */

.identity-hakim {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.identity-hakim__img {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

.identity-hakim__text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.identity-hakim__text p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--silver);
}

.identity-hakim__cta {
  font-family: var(--font-accent);
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon);
  text-shadow: 0 0 6px var(--neon-dim);
  margin-top: 0.5rem;
  transition: color 0.3s, letter-spacing 0.3s;
}

.identity-hakim__cta:hover {
  color: var(--gold);
  letter-spacing: 3px;
  text-shadow: 0 0 8px var(--gold-dim);
}

/* ══════════════════════════════════════════════
   HAKIM — Library Scene Banner
   ══════════════════════════════════════════════ */

.hakim-scene {
  position: relative;
  width: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 6px;
}

.hakim-scene__img {
  width: 100%;
  display: block;
  filter: brightness(0.7);
  transition: filter 0.5s;
}

.hakim-scene:hover .hakim-scene__img {
  filter: brightness(0.85);
}

.hakim-scene__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 2rem;
  background: linear-gradient(180deg, transparent 50%, rgba(11,11,11,0.85) 100%);
}

.hakim-scene__caption {
  font-family: var(--font-title);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--gold);
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  text-align: center;
}

/* ══════════════════════════════════════════════
   ARSENAL — HAKIM card accent
   ══════════════════════════════════════════════ */

.arsenal-card--hakim {
  border-color: rgba(255,215,0,0.15);
}

.arsenal-card--hakim::before {
  background: linear-gradient(180deg, transparent, rgba(255,215,0,0.03), transparent);
}

.arsenal-card--hakim:hover {
  border-color: var(--gold);
  box-shadow: 0 0 25px rgba(255,215,0,0.1), inset 0 0 30px rgba(255,215,0,0.02);
}

/* ══════════════════════════════════════════════
   OATH — Dual Voices
   ══════════════════════════════════════════════ */

.oath-dual-voices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.oath-voice__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--gold-dim);
}

.oath-voice__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-dim);
}

.oath-voice__name {
  font-family: var(--font-title);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 4px;
  background: linear-gradient(180deg, var(--gold), #FFA500);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ══════════════════════════════════════════════
   ECOSYSTEM — Card images
   ══════════════════════════════════════════════ */

.ecosystem-card__img-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.ecosystem-card__img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-dim);
}

@media (max-width: 900px) {
  .hero-court { gap: 0; }
  .hero-court__agent { width: 240px; }
  .hero-court__center { width: 260px; min-height: 240px; }
  .hero-court__ring-wrap { transform: scale(0.7); }
  .hero-court__crown { width: 160px; height: 100px; }
  .hero-court__logo { width: 150px; height: 150px; }
  .hakim-intro { grid-template-columns: 1fr; text-align: center; }
  .hakim-intro__emblem { justify-content: center; }
  .hakim-intro__name { justify-content: center; }
  .duality { grid-template-columns: 1fr; }
  .duality__vs { flex-direction: row; }
  .duality__vs-line { width: 60px; height: 1px; }
  .identity-hakim { grid-template-columns: 1fr; }
  .oath-dual-voices { grid-template-columns: 1fr; }
  .home-duality__content { flex-direction: column; gap: 1.5rem; }
  .home-duality__bridge { flex-direction: column; }
  .home-duality__bridge-line { width: 1px; height: 30px; }
}

@media (max-width: 600px) {
  .hero-court { flex-direction: column; gap: 1rem; min-height: auto; }
  .hero-court__center { width: 100%; min-height: 160px; order: -1; }
  .hero-court__agent { width: 100%; }
  .hero-court__logo { width: 140px; height: 140px; }
  .hero-court__name { font-size: 2rem; letter-spacing: 3px; }
  .hero-court__flames { width: 120px; height: 50px; }
  .hero-court__flame { width: 12px; }
  .hero-court__flames--emerald .hero-court__flame { height: 35px; }
  .hero-court__flames--emerald .hero-court__flame:nth-child(odd) { height: 42px; }
  .hero-court__flames--gold .hero-court__flame { height: 35px; }
  .hero-court__flames--gold .hero-court__flame:nth-child(odd) { height: 42px; }
  .hero-pillars__grid { grid-template-columns: 1fr 1fr; }
  .hero__glow { width: 350px; height: 350px; }
  .hero__logo { width: 160px; height: 160px; }
  .intro-agents { gap: 1.5rem; }
  .intro-agent__logo { width: 100px; height: 100px; }
  .intro-agent__name { font-size: 1rem; }
  .intro-agent__flames { width: 80px; height: 35px; }
  .intro-agent__flame { width: 8px; }
  .intro-agent__flames--emerald .intro-agent__flame { height: 26px; }
  .intro-agent__flames--emerald .intro-agent__flame:nth-child(odd) { height: 32px; }
  .intro-agent__flames--gold .intro-agent__flame { height: 26px; }
  .intro-agent__flames--gold .intro-agent__flame:nth-child(odd) { height: 32px; }
  .intro-crown-svg { width: 160px; height: auto; }
  .page-section { padding: 3rem 1.2rem; }
  .arsenal-grid { grid-template-columns: 1fr; }
  .palette-grid { grid-template-columns: repeat(2, 1fr); }
  .evo-status { flex-direction: column; align-items: flex-start; gap: 1.1rem; padding: 1.4rem 1.2rem; }
  .evo-status__value { font-size: 1.05rem; }
  .evo-file { padding: 1.6rem 1.3rem; }
  .evo-file__header { flex-wrap: wrap; }
  .hakim-intro__img { width: 180px; }
  .hakim-intro__title-en { font-size: 1.8rem; }
  .hakim-pillar { grid-template-columns: 1fr; }
  .hakim-pillar__letter { justify-content: flex-start; }
}

@media (max-width: 400px) {
  .hero-pillars__grid { grid-template-columns: 1fr; }
  .nav { padding: 0 1rem; }
  .footer__emblems { gap: 0.8rem; }
  .footer__emblem { width: 32px; height: 32px; }
}

/* ══════════════════════════════════════════════
   SHIMMER & PULSE ANIMATIONS
   ══════════════════════════════════════════════ */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.shimmer-gold {
  background: linear-gradient(
    90deg,
    var(--gold) 0%,
    #fff8dc 25%,
    var(--gold) 50%,
    #fff8dc 75%,
    var(--gold) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.86; }
  50%      { opacity: 1; }
}

.pulse-slow {
  box-shadow: 0 0 14px rgba(57,255,20,0.35);
  animation: pulse-glow 3s ease-in-out infinite;
}

/* ══════════════════════════════════════════════
   SECTION BANNERS (WAZIR & HAKIM headers)
   ══════════════════════════════════════════════ */
.section-banner {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 1.8rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  border: 1px solid var(--neon-dim);
  background: linear-gradient(135deg, rgba(57,255,20,0.04), transparent);
}

.section-banner--wazir {
  border-color: var(--neon-dim);
  background: linear-gradient(135deg, rgba(57,255,20,0.06), transparent);
}

.section-banner--hakim {
  border-color: var(--gold-dim);
  background: linear-gradient(135deg, rgba(255,215,0,0.06), transparent);
}

.section-banner__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--neon-dim);
  flex-shrink: 0;
}

.section-banner--hakim .section-banner__icon {
  border-color: var(--gold-dim);
}

.section-banner__name {
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 2px;
}

/* Reusable forging-agent banner (glyph icon + accent) — used across
   Forms, Armory, Evolution, Covenant for the six forging minds. */
.section-banner--forge {
  border-color: var(--accent-soft);
  background: linear-gradient(135deg, var(--accent-soft), transparent);
}
.section-banner__icon--glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.7rem;
  line-height: 1;
  background: radial-gradient(circle at 35% 30%, rgba(28,28,28,0.95), rgba(11,11,11,0.92));
  border: 2px solid var(--accent-soft);
  box-shadow: 0 0 12px var(--accent-soft);
  flex-shrink: 0;
}
.section-banner--forge .section-banner__name { color: var(--accent); }
.section-banner__sub--forge {
  color: var(--accent);
  opacity: 0.85;
}
.section-banner__tag {
  margin-left: auto;
  font-family: var(--font-accent);
  font-size: 0.55rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffa500;
  border: 1px solid rgba(255,165,0,0.3);
  border-radius: var(--radius-full);
  padding: 0.15rem 0.6rem;
  flex-shrink: 0;
}

.section-banner__sub {
  font-family: var(--font-accent);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin-top: 0.15rem;
}

/* ══════════════════════════════════════════════
   FOOTER — UPGRADED
   ══════════════════════════════════════════════ */
.footer__glow {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 80px;
  background: radial-gradient(ellipse, rgba(57,255,20,0.12), transparent 70%);
  pointer-events: none;
}

.footer {
  position: relative;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-dim), var(--gold-dim), var(--neon-dim), transparent);
  background-size: 200% 100%;
  animation: footerLine 4s ease-in-out infinite;
}
@keyframes footerLine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Heartbeat vitals line */
.footer__vitals {
  display: block;
  width: 160px;
  height: 20px;
  margin: 0.6rem auto 0.8rem;
  color: var(--neon-dim);
  opacity: 0.4;
}
.footer__vitals-line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: vitalsDraw 3s ease-in-out infinite;
}
@keyframes vitalsDraw {
  0% { stroke-dashoffset: 400; opacity: 0.6; }
  50% { stroke-dashoffset: 0; opacity: 1; }
  80% { stroke-dashoffset: 0; opacity: 0.6; }
  100% { stroke-dashoffset: 400; opacity: 0.6; }
}
body.theme-light .footer__vitals {
  color: var(--gold-dim);
  opacity: 0.3;
}

.footer__emblems {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}

.footer__emblem {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--neon-dim);
}

.footer__amp {
  font-family: var(--font-title);
  font-size: 1.4rem;
  font-weight: 700;
}

.footer__tagline {
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}
.footer__oath {
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.9;
  margin-bottom: 0.45rem;
}
.footer__oath-amp { color: var(--neon); opacity: 0.75; margin: 0 0.15em; font-weight: 400; }

/* Oath page — larger footer */
.footer--final {
  padding: 3.5rem 2rem;
  border-top: 1px solid var(--gold-dim);
}

.footer__emblems--large {
  gap: 1.8rem;
  margin-bottom: 1.5rem;
}

.footer__emblem--large {
  width: 64px;
  height: 64px;
  border-width: 3px;
}

.footer__amp--large {
  font-size: 2rem;
}

/* ══════════════════════════════════════════════
   ETYMOLOGY CARDS (Identity page)
   ══════════════════════════════════════════════ */
.etymology--hakim .etymology__card {
  border-color: var(--gold-dim);
}

.etymology--hakim .etymology__card-word {
  color: var(--gold);
}

/* ══════════════════════════════════════════════
   HAKIM EVOLUTION FILE CARDS
   ══════════════════════════════════════════════ */
.evo-file--hakim {
  border-color: var(--gold-dim);
}

.evo-file--hakim:hover {
  border-color: var(--gold);
  box-shadow: 0 0 30px rgba(255,215,0,0.08);
}

.evo-file--hakim .evo-file__quote {
  color: var(--gold-dim);
}

/* ══════════════════════════════════════════════
   CREST — TALL EMBLEM IMAGE
   ══════════════════════════════════════════════ */
.emblem-section__img--tall {
  max-height: 380px;
  object-fit: contain;
  border-radius: 12px;
}

/* ══════════════════════════════════════════════
   SCROLL PROGRESS BAR
   ══════════════════════════════════════════════ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--neon), var(--gold));
  z-index: 10001;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px var(--neon-glow);
}
.scroll-progress::after {
  content: '✦';
  position: absolute;
  right: -6px;
  top: -8px;
  font-size: 0.7rem;
  color: var(--gold);
  text-shadow: 0 0 8px var(--gold-dim);
  opacity: 0;
  transition: opacity 0.2s;
}
.scroll-progress[style*="width"]:not([style*="width: 0"])::after {
  opacity: 1;
}

/* ══════════════════════════════════════════════
   PAGE TRANSITIONS
   ══════════════════════════════════════════════ */
.page {
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.page:not(.active) {
  opacity: 0;
  transform: translateY(12px);
}
.page.active {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════
   TYPED TERMINAL
   ══════════════════════════════════════════════ */
.typed-terminal {
  max-width: 720px;
  margin: 0 auto 2rem;
  background: #0d0d0d;
  border: 1px solid var(--neon-dim);
  border-radius: 10px;
  overflow: hidden;
  font-family: 'Courier New', monospace;
  box-shadow: 0 0 30px rgba(57,255,20,0.06);
}
.typed-terminal__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #151515;
  border-bottom: 1px solid var(--neon-dim);
}
.typed-terminal__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.typed-terminal__dot--red { background: #ff5f57; }
.typed-terminal__dot--yellow { background: #ffbd2e; }
.typed-terminal__dot--green { background: #28c840; }
.typed-terminal__title {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--silver-dim);
  margin-left: 8px;
  letter-spacing: 0.05em;
}
.typed-terminal__body {
  padding: 16px 18px;
  min-height: 160px;
  color: var(--neon);
  font-size: 0.85rem;
  line-height: 1.7;
}
.typed-terminal__line {
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
}
.typed-terminal__line.visible {
  opacity: 1;
}
.typed-terminal__line--prompt::before {
  content: '> ';
  color: var(--gold);
}
.typed-terminal__line--output {
  color: var(--silver-dim);
  padding-left: 1em;
}
.typed-terminal__cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  background: var(--neon);
  vertical-align: text-bottom;
  animation: blink-cursor 0.8s step-end infinite;
}
@keyframes blink-cursor {
  50% { opacity: 0; }
}

/* ══════════════════════════════════════════════
   CRON HEATMAP
   ══════════════════════════════════════════════ */
.cron-heatmap {
  max-width: 900px;
  margin: 0 auto;
}
.cron-heatmap__grid {
  display: grid;
  grid-template-columns: 50px repeat(24, 1fr);
  gap: 2px;
}
.cron-heatmap__hour-labels {
  display: grid;
  grid-template-columns: 50px repeat(24, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.cron-heatmap__hour-label {
  text-align: center;
  font-size: 0.55rem;
  font-family: var(--font-accent);
  color: var(--silver-dim);
  letter-spacing: 0.02em;
}
.cron-heatmap__day-label {
  font-size: 0.65rem;
  font-family: var(--font-accent);
  color: var(--silver);
  display: flex;
  align-items: center;
  padding-right: 6px;
  justify-content: flex-end;
}
.cron-heatmap__cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--smoke-light);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}
.cron-heatmap__cell:hover {
  transform: scale(1.6);
  z-index: 2;
}
.cron-heatmap__cell[data-count="1"] { background: rgba(57,255,20,0.2); }
.cron-heatmap__cell[data-count="2"] { background: rgba(57,255,20,0.35); }
.cron-heatmap__cell[data-count="3"] { background: rgba(57,255,20,0.5); }
.cron-heatmap__cell[data-count="4"] { background: rgba(57,255,20,0.65); box-shadow: 0 0 4px rgba(57,255,20,0.3); }
.cron-heatmap__cell[data-count="5"] { background: rgba(57,255,20,0.8); box-shadow: 0 0 6px rgba(57,255,20,0.4); }
.cron-heatmap__cell[data-count="6"] { background: var(--neon); box-shadow: 0 0 8px rgba(57,255,20,0.5); }
.cron-heatmap__cell[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--smoke);
  color: var(--silver);
  font-size: 0.6rem;
  font-family: var(--font-body);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--neon-dim);
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}
.cron-heatmap__legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.6rem;
  font-family: var(--font-accent);
  color: var(--silver-dim);
}
.cron-heatmap__legend-cell {
  width: 12px; height: 12px;
  border-radius: 2px;
}

/* ══════════════════════════════════════════════
   ARCHITECTURE DIAGRAM
   ══════════════════════════════════════════════ */
.arch-diagram {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 0;
}
.arch-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.arch-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 1.2rem 1rem;
  background: var(--smoke);
  border: 1px solid var(--neon-dim);
  border-radius: 10px;
  min-width: 110px;
  text-align: center;
  position: relative;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.arch-node:hover {
  border-color: var(--neon);
  box-shadow: 0 0 20px rgba(57,255,20,0.1);
}
.arch-node__icon {
  font-size: 1.8rem;
}
.arch-node__name {
  font-family: var(--font-accent);
  font-size: 0.7rem;
  color: var(--neon);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.arch-node__sub {
  font-size: 0.6rem;
  color: var(--silver-dim);
}
.arch-arrow {
  display: flex;
  align-items: center;
  padding: 0 4px;
  color: var(--neon-dim);
  font-size: 1.4rem;
  position: relative;
}
.arch-arrow::before {
  content: '';
  display: block;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-dim), transparent);
  animation: arch-pulse 2s ease-in-out infinite;
}
@keyframes arch-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
.arch-arrow__tip {
  color: var(--neon);
  font-size: 0.9rem;
}
.arch-branches {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.arch-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0.8rem 1rem;
  background: var(--smoke);
  border: 1px solid var(--neon-dim);
  border-radius: 8px;
  min-width: 100px;
  text-align: center;
  opacity: 0.7;
  transition: opacity 0.3s, border-color 0.3s;
}
.arch-branch:hover {
  opacity: 1;
  border-color: var(--neon);
}
.arch-branch__icon { font-size: 1.2rem; }
.arch-branch__name {
  font-family: var(--font-accent);
  font-size: 0.6rem;
  color: var(--silver);
  letter-spacing: 0.05em;
}
.arch-branch__count {
  font-size: 0.55rem;
  color: var(--neon-dim);
}
.arch-connector {
  width: 2px;
  height: 24px;
  background: linear-gradient(to bottom, var(--neon-dim), transparent);
  margin: 0 auto;
}

/* ══════════════════════════════════════════════
   CERT TIMELINE
   ══════════════════════════════════════════════ */
.cert-timeline {
  position: relative;
  padding-left: 30px;
  max-width: 700px;
  margin: 0 auto;
}
.cert-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--gold), var(--neon), var(--gold));
}
.cert-milestone {
  position: relative;
  margin-bottom: 1.5rem;
  padding: 0.8rem 1rem;
  background: var(--smoke);
  border: 1px solid var(--gold-dim);
  border-radius: 8px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.cert-milestone:hover {
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(255,215,0,0.08);
}
.cert-milestone::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--obsidian);
  box-shadow: 0 0 8px rgba(255,215,0,0.4);
}
.cert-milestone--highlight {
  border-color: var(--gold);
  background: linear-gradient(135deg, var(--smoke), rgba(255,215,0,0.05));
}
.cert-milestone--highlight::before {
  width: 16px;
  height: 16px;
  left: -28px;
  box-shadow: 0 0 12px rgba(255,215,0,0.6);
}
.cert-milestone__year {
  font-family: var(--font-accent);
  font-size: 0.6rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.cert-milestone__title {
  font-family: var(--font-title);
  font-size: 0.95rem;
  color: var(--white);
  margin-bottom: 4px;
}
.cert-milestone__detail {
  font-size: 0.75rem;
  color: var(--silver-dim);
}

/* ══════════════════════════════════════════════
   SKILLS EXPLORER
   ══════════════════════════════════════════════ */
.skills-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.skills-filter__btn {
  background: var(--smoke);
  color: var(--silver);
  border: 1px solid var(--neon-dim);
  border-radius: 20px;
  padding: 6px 16px;
  font-family: var(--font-accent);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.3s;
  text-transform: uppercase;
}
.skills-filter__btn:hover,
.skills-filter__btn.active {
  background: var(--neon);
  color: var(--obsidian);
  border-color: var(--neon);
  box-shadow: 0 0 12px rgba(57,255,20,0.2);
}
.skills-filter__btn--hakim:hover,
.skills-filter__btn--hakim.active {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(255,215,0,0.2);
}
.skills-filter__search {
  background: var(--smoke);
  color: var(--silver);
  border: 1px solid var(--neon-dim);
  border-radius: 20px;
  padding: 6px 16px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  width: 200px;
  outline: none;
  transition: border-color 0.3s;
}
.skills-filter__search:focus {
  border-color: var(--neon);
  box-shadow: 0 0 8px rgba(57,255,20,0.1);
}
.skills-filter__search::placeholder {
  color: var(--silver-dim);
}
.arsenal-card.filtered-out {
  display: none;
}

/* ══════════════════════════════════════════════
   INTERACTIVE TERMINAL PAGE
   ══════════════════════════════════════════════ */
.terminal-page {
  max-width: 800px;
  margin: 0 auto;
  background: #0a0a0a;
  border: 1px solid var(--neon-dim);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(57,255,20,0.06);
  min-height: 450px;
}
.terminal-page__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #111;
  border-bottom: 1px solid var(--neon-dim);
}
.terminal-page__dot {
  width: 11px; height: 11px;
  border-radius: 50%;
}
.terminal-page__dot--red { background: #ff5f57; }
.terminal-page__dot--yellow { background: #ffbd2e; }
.terminal-page__dot--green { background: #28c840; }
.terminal-page__bar-title {
  font-family: var(--font-accent);
  font-size: 0.65rem;
  color: var(--silver-dim);
  margin-left: 10px;
  letter-spacing: 0.1em;
}
.terminal-page__body {
  padding: 20px;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  color: var(--neon);
  line-height: 1.8;
  max-height: 500px;
  overflow-y: auto;
}
.terminal-page__body::-webkit-scrollbar {
  width: 6px;
}
.terminal-page__body::-webkit-scrollbar-track {
  background: #0a0a0a;
}
.terminal-page__body::-webkit-scrollbar-thumb {
  background: var(--neon-dim);
  border-radius: 3px;
}
.terminal-page__output-line {
  margin-bottom: 2px;
}
.terminal-page__output-line--gold { color: var(--gold); }
.terminal-page__output-line--silver { color: var(--silver-dim); }
.terminal-page__output-line--neon { color: var(--neon); }
.terminal-page__output-line--white { color: var(--white); }
.terminal-page__input-line {
  display: flex;
  align-items: center;
  margin-top: 4px;
}
.terminal-page__prompt {
  color: var(--gold);
  margin-right: 6px;
  white-space: nowrap;
}
.terminal-page__input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--neon);
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  flex: 1;
  caret-color: var(--neon);
}

/* ══════════════════════════════════════════════
   KEYBOARD NAV HINT
   ══════════════════════════════════════════════ */
.kbd-hint {
  position: fixed;
  bottom: 16px;
  right: 16px;
  background: var(--smoke);
  border: 1px solid var(--neon-dim);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: var(--font-accent);
  font-size: 0.55rem;
  color: var(--silver-dim);
  letter-spacing: 0.05em;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.kbd-hint.visible {
  opacity: 1;
}
.kbd-hint kbd {
  display: inline-block;
  background: var(--smoke-light);
  border: 1px solid var(--neon-dim);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.55rem;
  color: var(--neon);
  margin: 0 2px;
}

/* ══════════════════════════════════════════════
   BADGE WALL
   ══════════════════════════════════════════════ */
.badge-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 1rem 0;
}
.badge-wall img {
  height: 22px;
  border-radius: 3px;
  opacity: 0.85;
  transition: opacity 0.3s;
}
.badge-wall img:hover {
  opacity: 1;
}

/* ══════════════════════════════════════════════
   EVOLUTION — CROSS-POLLINATION
   ══════════════════════════════════════════════ */
.evo-cross {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}
.evo-cross__mind {
  text-align: center;
  flex: 1;
  max-width: 300px;
}
.evo-cross__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--emerald);
  margin-bottom: 0.75rem;
}
.evo-cross__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.evo-cross__gives, .evo-cross__takes {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
  line-height: 1.4;
}
.evo-cross__gives { color: var(--emerald); }
.evo-cross__file-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin-bottom: 0.8rem;
}
.evo-cross__file {
  font-family: var(--font-accent);
  font-size: 0.55rem;
  letter-spacing: 0.5px;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--neon-dim);
  color: var(--neon);
  background: rgba(57,255,20,0.04);
}
.evo-cross__file--hakim {
  border-color: var(--gold-dim);
  color: var(--gold);
  background: rgba(255,215,0,0.04);
}
.evo-cross__bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  color: var(--gold);
  font-size: 1.5rem;
}
.evo-cross__bridge-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.evo-cross__label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-secondary);
}
.evo-cross__bridge-stat {
  font-family: var(--font-accent);
  font-size: 0.55rem;
  color: var(--neon);
  letter-spacing: 1px;
}

/* ══════════════════════════════════════════════
   EVOLUTION — INFRASTRUCTURE CARDS
   ══════════════════════════════════════════════ */
.evo-infra {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.evo-infra__card {
  background: rgba(16, 185, 129, 0.04);
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
  transition: border-color 0.3s, transform 0.3s;
}
.evo-infra__card:hover {
  border-color: var(--emerald);
  transform: translateY(-2px);
}
.evo-infra__icon {
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
}
.evo-infra__name {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.evo-infra__desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.evo-infra__desc strong {
  color: var(--emerald);
}

/* ══════════════════════════════════════════════
   EVOLUTION — HEALTH METRICS
   ══════════════════════════════════════════════ */
.evo-metrics {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}
.evo-metric {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 1.5rem;
}
.evo-metric__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.evo-metric__name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-primary);
}
.evo-metric__target {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.evo-metric__levels {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.evo-metric__level {
  font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  line-height: 1.4;
}
.evo-metric__level--healthy {
  background: rgba(16, 185, 129, 0.08);
  border-left: 3px solid var(--emerald);
  color: var(--emerald);
}
.evo-metric__level--warning {
  background: rgba(251, 191, 36, 0.08);
  border-left: 3px solid #fbbf24;
  color: #fbbf24;
}
.evo-metric__level--critical {
  background: rgba(239, 68, 68, 0.08);
  border-left: 3px solid #ef4444;
  color: #ef4444;
}

/* ══════════════════════════════════════════════
   EVOLUTION — ANTI-PATTERNS
   ══════════════════════════════════════════════ */
.evo-antipatterns {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}
.evo-anti {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: rgba(239, 68, 68, 0.03);
  border: 1px solid rgba(239, 68, 68, 0.12);
  border-radius: 10px;
  padding: 1.2rem 1.5rem;
  transition: border-color 0.3s;
}
.evo-anti:hover {
  border-color: rgba(239, 68, 68, 0.35);
}
.evo-anti__icon {
  font-size: 1.4rem;
  color: #ef4444;
  flex-shrink: 0;
  margin-top: 2px;
}
.evo-anti__name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: #ef4444;
  margin-bottom: 0.4rem;
}
.evo-anti__desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.evo-anti__desc em {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.78rem;
}

/* ══════════════════════════════════════════════
   THEME TOGGLE
   ══════════════════════════════════════════════ */
.nav__theme-toggle {
  background: none;
  border: 1px solid var(--silver-faint);
  color: var(--gold);
  font-size: 1.1rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
  margin-right: 0.5rem;
}
.nav__theme-toggle:hover {
  border-color: var(--gold);
  background: rgba(255, 215, 0, 0.08);
}

/* ══════════════════════════════════════════════════════════
   DISCORD WIDGET
   ══════════════════════════════════════════════════════════ */
.discord-widget {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  max-width: 900px;
  margin: 2rem auto 0;
}

.discord-widget__info {
  flex: 1;
  min-width: 0;
}

.discord-widget__header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.discord-widget__icon {
  font-size: 2.2rem;
  line-height: 1;
  color: var(--gold);
}

.discord-widget__server-name {
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.3rem;
}

.discord-widget__tagline {
  font-size: 0.88rem;
  color: var(--silver-dim);
  line-height: 1.5;
}

.discord-widget__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}

.discord-widget__stat {
  text-align: center;
  padding: 0.8rem 0.4rem;
  background: rgba(28,28,28,0.4);
  border: 1px solid rgba(57,255,20,0.08);
  border-radius: 6px;
}

.discord-widget__stat-value {
  display: block;
  font-family: var(--font-accent);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--neon);
  margin-bottom: 0.2rem;
}

.discord-widget__stat-label {
  font-size: 0.65rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--silver-dim);
}

.discord-widget__channels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.discord-widget__channel {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--silver-dim);
  padding: 0.25rem 0.6rem;
  background: rgba(28,28,28,0.3);
  border: 1px solid rgba(57,255,20,0.06);
  border-radius: 999px;
}

.discord-widget__embed {
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--neon-dim);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.discord-widget__embed iframe {
  display: block;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .discord-widget {
    flex-direction: column;
    align-items: center;
  }
  .discord-widget__stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .discord-widget__embed iframe {
    width: 300px;
    height: 380px;
  }
}

/* ══════════════════════════════════════════════════════════
   LIGHT THEME — Full Overhaul
   Design: clean white page, cards separated by shadow, high-contrast text
   WCAG AA compliant (4.5:1 minimum for body text)
   ══════════════════════════════════════════════════════════ */

body.theme-light {
  /* Page background — clean white */
  --obsidian:      #FFFFFF;
  /* Card/panel surfaces — subtle off-white, separated by shadow not color */
  --smoke:         #F8F9FA;
  --smoke-light:   #F1F3F5;
  /* Accent backgrounds */
  --deep-green:    #E6F2EC;
  --emerald:       #0D7A3E;
  /* Primary accent — forest green (replaces neon) */
  --neon:          #0A6B35;
  --neon-dim:      rgba(10, 107, 53, 0.12);
  --neon-glow:     rgba(10, 107, 53, 0.25);
  --neon-bright:   rgba(10, 107, 53, 0.5);
  /* Body text — true dark, high contrast */
  --silver:        #2D2D2D;
  --silver-dim:    #555555;
  --silver-faint:  rgba(0, 0, 0, 0.08);
  /* Gold accent — darkened for light bg readability */
  --gold:          #9A7209;
  --gold-dim:      rgba(154, 114, 9, 0.12);
  --gold-bright:   rgba(154, 114, 9, 0.7);
  /* Text tokens */
  --white:         #1A1A1A;
  --text-primary:  #1A1A1A;
  --text-secondary: #555555;
  --bg-dark:       #FFFFFF;
}

/* ── Global Resets for Light ── */
body.theme-light { color: #1A1A1A; }
body.theme-light * { text-shadow: none !important; }
body.theme-light .global-particles { opacity: 0.6; }

/* ── Nav ── */
body.theme-light .nav {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid #E2E2E2;
  backdrop-filter: blur(10px);
}
body.theme-light .nav--home.scrolled {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: #E2E2E2;
}
body.theme-light .nav__brand { color: #1A1A1A; }
body.theme-light .nav__brand-icon { color: #0A6B35; }
body.theme-light .nav__links a { color: #444; }
body.theme-light .nav__links a:hover { color: #0A6B35; }
body.theme-light .nav__links a.active { color: #9A7209; font-weight: 600; }

/* ── Footer ── */
body.theme-light .footer { background: #F8F9FA; color: #444; border-top: 1px solid #E2E2E2; }
body.theme-light .footer a { color: #0A6B35; }

/* ── Theme Toggle ── */
body.theme-light .theme-toggle {
  background: #F8F9FA; color: #444;
  border: 1px solid #E2E2E2;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
body.theme-light .theme-toggle:hover { background: #F1F3F5; }

/* ── Scroll Progress ── */
body.theme-light .scroll-progress { background: #0A6B35; }

/* ── Typography — force all headings and body text dark ── */
body.theme-light h1, body.theme-light h2, body.theme-light h3,
body.theme-light h4, body.theme-light h5, body.theme-light h6 { color: #1A1A1A; }
body.theme-light p { color: #333; }
body.theme-light a { color: #0A6B35; }
body.theme-light a:hover { color: #085A2C; }

/* ── Hero ── */
body.theme-light .hero__title { color: #1A1A1A; }
body.theme-light .hero__subtitle { color: #333; }
body.theme-light .hero__tagline { color: #555; }

/* ── Status Banner ── */
body.theme-light .status-banner {
  background: #F0FFF4;
  border: 1px solid rgba(10, 107, 53, 0.15);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
body.theme-light .status-banner__text { color: #333; }
body.theme-light .status-banner__dot { background: #0A6B35; }

/* ── Section Titles ── */
body.theme-light .section__title { color: #1A1A1A; }
body.theme-light .section__subtitle { color: #555; }
body.theme-light .section__label { color: #0A6B35; }

/* ══ CARD FOUNDATION — white surface, every dark-bg card caught ══ */
body.theme-light .hero-pillar,
body.theme-light .arsenal-card,
body.theme-light .duality__card,
body.theme-light .stat-card,
body.theme-light .constellation__card,
body.theme-light .constellation-card,
body.theme-light .badge-item,
body.theme-light .changelog-entry__card,
body.theme-light .changelog__body,
body.theme-light .evo-loop-v2__step,
body.theme-light .evo-loop-v2__card,
body.theme-light .evo-infra__card,
body.theme-light .evo-health__metric,
body.theme-light .evo-cross__bridge,
body.theme-light .evo-file,
body.theme-light .cert-item,
body.theme-light .arch-node,
body.theme-light .skills-filter__card,
body.theme-light .value-card,
body.theme-light .roadmap-phase__content,
body.theme-light .palette-card,
body.theme-light .type-card,
body.theme-light .ecosystem-card,
body.theme-light .summon-card,
body.theme-light .trait,
body.theme-light .principle,
body.theme-light .monarch-trait,
body.theme-light .design-principle,
body.theme-light .oath-quote,
body.theme-light .hero__live-badge,
body.theme-light .arch-branch,
body.theme-light .cert-milestone,
body.theme-light .kbd-hint,
body.theme-light .skills-filter__search,
body.theme-light .cron-heatmap__cell[title]:hover::after,
body.theme-light .discord-widget__stat,
body.theme-light .discord-widget__channel {
  background: #FFFFFF;
  border: 1px solid #E8E8E8;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}
body.theme-light .hero-pillar:hover,
body.theme-light .arsenal-card:hover,
body.theme-light .duality__card:hover,
body.theme-light .constellation__card:hover,
body.theme-light .constellation-card:hover,
body.theme-light .evo-loop-v2__step:hover,
body.theme-light .evo-infra__card:hover,
body.theme-light .evo-file:hover,
body.theme-light .cert-item:hover,
body.theme-light .arch-node:hover,
body.theme-light .value-card:hover,
body.theme-light .ecosystem-card:hover,
body.theme-light .summon-card:hover,
body.theme-light .trait:hover,
body.theme-light .principle:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-color: #0A6B35;
}

/* ── Pillar Cards ── */
body.theme-light .hero-pillar__letter {
  background: linear-gradient(180deg, #0A6B35, #065A2B);
  -webkit-background-clip: text; background-clip: text;
}
body.theme-light .hero-pillar__title { color: #1A1A1A; }
body.theme-light .hero-pillar__desc { color: #444; }
body.theme-light .hero-pillars__label { color: #0A6B35; }

/* HAKIM pillar cards */
body.theme-light .hero-pillar--hakim { border-color: rgba(154, 114, 9, 0.25); }
body.theme-light .hero-pillar--hakim:hover { border-color: #9A7209; box-shadow: 0 4px 12px rgba(154,114,9,0.12); }
body.theme-light .hero-pillar--hakim .hero-pillar__letter {
  background: linear-gradient(180deg, #9A7209, #7A5B07);
  -webkit-background-clip: text; background-clip: text;
}
body.theme-light .hero-pillars--hakim .hero-pillars__label { color: #9A7209; }

/* ── Arsenal Cards ── */
body.theme-light .arsenal-card__icon { color: #0A6B35; }
body.theme-light .arsenal-card__name { color: #1A1A1A; }
body.theme-light .arsenal-card__desc { color: #444; }
body.theme-light .arsenal-card__tag { background: #E6F2EC; color: #0A6B35; border: 1px solid rgba(10,107,53,0.15); }

/* ── Stats ── */
body.theme-light .stats-row { background: transparent; }
body.theme-light .stat-card { background: #FFF; }
body.theme-light .stat-card__value { color: #0A6B35; }
body.theme-light .stat-card__label { color: #555; }

/* ── Duality ── */
body.theme-light .duality__card--wazir { border-color: rgba(10,107,53,0.2); }
body.theme-light .duality__card--wazir:hover { border-color: #0A6B35; }
body.theme-light .duality__card--hakim { border-color: rgba(154,114,9,0.2); }
body.theme-light .duality__card--hakim:hover { border-color: #9A7209; }
body.theme-light .duality__card-name { color: #1A1A1A; }
body.theme-light .duality__card-desc { color: #444; }
body.theme-light .duality__card-role { color: #555; }
body.theme-light .duality__versus { color: #999; }
body.theme-light .duality__trait-name { color: #333; }
body.theme-light .duality__trait-desc { color: #555; }

/* ── Constellation (Projects) ── */
body.theme-light .constellation__card-title { color: #1A1A1A; }
body.theme-light .constellation__card-desc { color: #444; }
body.theme-light .constellation__card-tag { background: #E6F2EC; color: #0A6B35; }

/* ── Cron Heatmap ── */
body.theme-light .heatmap-cell { background: #F1F3F5; }
body.theme-light .heatmap-cell--l1 { background: rgba(10, 107, 53, 0.15); }
body.theme-light .heatmap-cell--l2 { background: rgba(10, 107, 53, 0.30); }
body.theme-light .heatmap-cell--l3 { background: rgba(10, 107, 53, 0.50); }
body.theme-light .heatmap-cell--l4 { background: rgba(10, 107, 53, 0.70); }
body.theme-light .heatmap__day-label { color: #555; }
body.theme-light .heatmap__hour-label { color: #555; }
body.theme-light .heatmap__title { color: #1A1A1A; }
body.theme-light .heatmap__legend-label { color: #555; }

/* ── Architecture Diagram ── */
body.theme-light .arch-node { background: #FFF; color: #333; }
body.theme-light .arch-connector { background: #D0D0D0; }
body.theme-light .arch-label { color: #555; }

/* ── Cert Timeline ── */
body.theme-light .cert-item__name { color: #1A1A1A; }
body.theme-light .cert-item__org { color: #666; }
body.theme-light .cert-item__year { color: #0A6B35; }
body.theme-light .cert-timeline__line { background: #E8E8E8; }

/* ── Badge Wall ── */
body.theme-light .badge-item { background: #FFF; }
body.theme-light .badge-item__name { color: #1A1A1A; }
body.theme-light .badge-item__issuer { color: #555; }

/* ── Skills Filter ── */
body.theme-light .skills-filter__btn {
  background: #FFF; color: #444;
  border: 1px solid #E2E2E2;
}
body.theme-light .skills-filter__btn:hover { background: #E6F2EC; color: #0A6B35; border-color: #0A6B35; }
body.theme-light .skills-filter__btn.active { background: #0A6B35; color: #FFF; border-color: #0A6B35; }

/* ══ Evolution Page ══ */
body.theme-light .evo-loop-v2__num { color: #FFF; }
body.theme-light .evo-loop-v2__title { color: #1A1A1A; }
body.theme-light .evo-loop-v2__desc { color: #444; }
body.theme-light .evo-loop-v2__icon { color: #0A6B35; }
body.theme-light .evo-loop-v2__ring circle { stroke: rgba(10, 107, 53, 0.1); }

/* Evolution — living files */
body.theme-light .evo-file__name { color: #1A1A1A; }
body.theme-light .evo-file__desc { color: #444; }
body.theme-light .evo-file__icon { color: #0A6B35; }
body.theme-light .evo-file__role { color: #0A6B35; border-color: rgba(10,107,53,0.2); }
body.theme-light .evo-file__header { border-bottom-color: #E8E8E8; }
body.theme-light .evo-file__rules li { color: #444; }
body.theme-light .evo-file__rules strong { color: #1A1A1A; }
body.theme-light .evo-file__quote { color: #9A7209; border-top-color: rgba(154,114,9,0.15); }
body.theme-light .evo-file--hakim { border-color: rgba(154,114,9,0.15); }
body.theme-light .evo-file--hakim:hover { border-color: #9A7209; }

/* Trait cards */
body.theme-light .trait { border-left-color: rgba(10,107,53,0.3); }
body.theme-light .trait:hover { border-left-color: #0A6B35; }
body.theme-light .trait__label { color: #0A6B35; }
body.theme-light .trait__text { color: #444; }

/* Principles */
body.theme-light .principle { border-color: #E8E8E8; }
body.theme-light .principle__number { color: #0A6B35; }
body.theme-light .principle__title { color: #1A1A1A; }
body.theme-light .principle__text { color: #444; }

/* Monarch traits */
body.theme-light .monarch-trait { border-color: rgba(154,114,9,0.12); }
body.theme-light .monarch-trait__icon { color: #9A7209; }

/* Value cards */
body.theme-light .value-card__title { color: #1A1A1A; }
body.theme-light .value-card__desc { color: #444; }

/* Design principles */
body.theme-light .design-principle { border-color: #E8E8E8; }
body.theme-light .design-principle__title { color: #0A6B35; }
body.theme-light .design-principle__text { color: #444; }

/* ══ Crest Page — full light mode ══ */

/* Crown dividers */
body.theme-light .crown-divider { color: rgba(154,114,9,0.4); }

/* Palette cards */
body.theme-light .palette-card {
  background: #FFFFFF;
  border: 1px solid #E8E8E8;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
body.theme-light .palette-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-color: #0A6B35;
}
body.theme-light .palette-card__name { color: #1A1A1A; }
body.theme-light .palette-card__hex { color: #333; }
body.theme-light .palette-card__role { color: #555; }

/* Typography cards */
body.theme-light .type-card {
  background: #FFFFFF;
  border: 1px solid #E8E8E8;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
body.theme-light .type-card__label { color: #0A6B35; }
body.theme-light .type-card__sample--cinzel {
  background: linear-gradient(135deg, #9A7209, #7A5B07);
  -webkit-background-clip: text; background-clip: text;
}
body.theme-light .type-card__sample--rajdhani { color: #333; }
body.theme-light .type-card__sample--orbitron { color: #0A6B35; text-shadow: none; }
body.theme-light .type-card__context { color: #555; }

/* Emblem sections */
body.theme-light .emblem-section__img {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1));
}
body.theme-light .emblem-element__icon { color: #9A7209; }
body.theme-light .emblem-element__name { color: #9A7209; }
body.theme-light .emblem-element__desc { color: #444; }

/* Oath page — voice headers and avatars */
body.theme-light .oath-voice__header { border-bottom-color: rgba(154,114,9,0.2); }
body.theme-light .oath-voice__avatar { border-color: rgba(154,114,9,0.3); }
body.theme-light .oath-voice__name {
  background: linear-gradient(180deg, #9A7209, #7A5B07);
  -webkit-background-clip: text; background-clip: text;
}
body.theme-light .oath-quote { border-left-color: rgba(154,114,9,0.3); }
body.theme-light .oath-quote p { color: #333; }
body.theme-light .oath-quote::before { color: rgba(154,114,9,0.3); }

/* Ecosystem cards */
body.theme-light .ecosystem-card__name { color: #1A1A1A; }
body.theme-light .ecosystem-card__desc { color: #444; }

/* Constellation cards (alternate class) */
body.theme-light .constellation-card__title { color: #1A1A1A; }
body.theme-light .constellation-card__desc { color: #444; }

/* Summon cards */
body.theme-light .summon-card__name { color: #1A1A1A; }
body.theme-light .summon-card__desc { color: #444; }

/* Roadmap */
body.theme-light .roadmap-phase__content { border-color: #E8E8E8; }
body.theme-light .roadmap-phase__title { color: #1A1A1A; }
body.theme-light .roadmap-phase__desc { color: #444; }

/* Live badge */
body.theme-light .hero__live-badge { border-color: rgba(10,107,53,0.2); }
body.theme-light .hero__live-badge-text { color: #0A6B35; }

/* Discord widget — light */
body.theme-light .discord-widget__stat {
  background: #FFFFFF;
  border-color: #E8E8E8;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}
body.theme-light .discord-widget__stat-value { color: #0A6B35; }
body.theme-light .discord-widget__stat-label { color: #555; }
body.theme-light .discord-widget__server-name { color: #1A1A1A; }
body.theme-light .discord-widget__tagline { color: #555; }
body.theme-light .discord-widget__icon { color: #9A7209; }
body.theme-light .discord-widget__channel {
  background: #FFFFFF; border-color: #E8E8E8; color: #444;
}
body.theme-light .discord-widget__embed {
  border-color: #E8E8E8;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* Changelog body */
body.theme-light .changelog__body { border-color: #E8E8E8; }

/* ══ GRADIENT BACKGROUNDS — all dark gradients → white ══ */
body.theme-light .quote-block,
body.theme-light .evo-status,
body.theme-light .pillar-full,
body.theme-light .hakim-pillar,
body.theme-light .etymology__card,
body.theme-light .stats-strip,
body.theme-light .monarch-profile,
body.theme-light .constellation-card--phantom,
body.theme-light .roadmap-phase--active .roadmap-phase__content,
body.theme-light .section-banner,
body.theme-light .section-banner--wazir,
body.theme-light .section-banner--hakim {
  background: #FFFFFF;
  border: 1px solid #E8E8E8;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}
/* Gradient top accents → subtle green or gold lines */
body.theme-light .quote-block::before,
body.theme-light .evo-status::before {
  background: linear-gradient(90deg, transparent, #0A6B35, transparent);
}
/* Quote block text */
body.theme-light .quote-block blockquote { color: #9A7209; }
body.theme-light .quote-block cite { color: #0A6B35; }

/* Evo status text */
body.theme-light .evo-status__label { color: #0A6B35; }
body.theme-light .evo-status__value { color: #1A1A1A; }
body.theme-light .evo-status__sub { color: #444; }
body.theme-light .evo-status__dot { background: #0A6B35; box-shadow: 0 0 8px rgba(10,107,53,0.4); }
body.theme-light .evo-status__ring { border-color: #0A6B35; }

/* Pillar full cards */
body.theme-light .pillar-full { border-color: rgba(10,107,53,0.15); }
body.theme-light .hakim-pillar { border-color: rgba(154,114,9,0.15); }

/* Stats strip */
body.theme-light .stats-strip { border-color: #E8E8E8; }

/* Monarch profile */
body.theme-light .monarch-profile { border-color: rgba(154,114,9,0.15); }

/* PHANTOM constellation card */
body.theme-light .constellation-card--phantom { border-color: rgba(154,114,9,0.2); }

/* Section banners */
body.theme-light .section-banner__name { color: #1A1A1A; }
body.theme-light .section-banner__sub { color: #555; }

/* Architecture branches */
body.theme-light .arch-branch { border-color: #E8E8E8; opacity: 1; }
body.theme-light .arch-branch:hover { border-color: #0A6B35; }
body.theme-light .arch-branch__name { color: #333; }
body.theme-light .arch-branch__count { color: #0A6B35; }
body.theme-light .arch-arrow { color: #CCC; }

/* Cert milestones */
body.theme-light .cert-milestone { border-color: rgba(154,114,9,0.2); }
body.theme-light .cert-milestone:hover { border-color: #9A7209; box-shadow: 0 4px 12px rgba(154,114,9,0.08); }
body.theme-light .cert-milestone::before { background: #9A7209; border-color: #FFF; box-shadow: 0 0 6px rgba(154,114,9,0.3); }
body.theme-light .cert-milestone__year { color: #9A7209; }
body.theme-light .cert-milestone__name { color: #1A1A1A; }
body.theme-light .cert-milestone__org { color: #555; }

/* Keyboard hint */
body.theme-light .kbd-hint { border-color: #E8E8E8; color: #555; }
body.theme-light .kbd-hint kbd { background: #F1F3F5; border-color: #E8E8E8; color: #0A6B35; }

/* Skills search */
body.theme-light .skills-filter__search { border-color: #E8E8E8; color: #1A1A1A; }
body.theme-light .skills-filter__search::placeholder { color: #999; }

/* Heatmap tooltip */
body.theme-light .cron-heatmap__cell[title]:hover::after { color: #333; }

/* Heatmap cells with data */
body.theme-light .cron-heatmap__cell[data-count="1"] { background: rgba(10,107,53,0.15); }
body.theme-light .cron-heatmap__cell[data-count="2"] { background: rgba(10,107,53,0.28); }
body.theme-light .cron-heatmap__cell[data-count="3"] { background: rgba(10,107,53,0.42); }
body.theme-light .cron-heatmap__cell[data-count="4"] { background: rgba(10,107,53,0.56); box-shadow: none; }
body.theme-light .cron-heatmap__cell[data-count="5"] { background: rgba(10,107,53,0.70); box-shadow: none; }
body.theme-light .cron-heatmap__cell[data-count="6"] { background: #0A6B35; box-shadow: none; }

/* Constellation card status badges */
body.theme-light .constellation-card__status { color: #0A6B35; }
body.theme-light .constellation-card__status--upcoming { color: #9A7209; }
body.theme-light .constellation-card__status--envisioned { color: #555; }
body.theme-light .constellation-card__role { color: #555; }
body.theme-light .constellation-card__icon { color: #0A6B35; }

/* Roadmap markers */
body.theme-light .roadmap-phase__marker { background: #0A6B35; }
body.theme-light .roadmap-phase--future .roadmap-phase__marker { background: #E8E8E8; }

/* Evolution — infrastructure */
body.theme-light .evo-infra__icon { color: #0A6B35; }
body.theme-light .evo-infra__name { color: #1A1A1A; }
body.theme-light .evo-infra__desc { color: #444; }

/* Evolution — health metrics */
body.theme-light .evo-health__metric-name { color: #333; }
body.theme-light .evo-health__metric-target { color: #555; }
body.theme-light .evo-health__level--healthy { border-left-color: #0A6B35; color: #0A6B35; }
body.theme-light .evo-health__level--warning { border-left-color: #9A7209; color: #9A7209; }
body.theme-light .evo-health__level--critical { border-left-color: #C53030; color: #C53030; }

/* Evolution — anti-patterns */
body.theme-light .evo-anti__card {
  background: #FFF8F8; border: 1px solid rgba(197, 48, 48, 0.15);
}
body.theme-light .evo-anti__card:hover { border-color: rgba(197, 48, 48, 0.4); }
body.theme-light .evo-anti__icon { color: #C53030; }
body.theme-light .evo-anti__name { color: #9B2C2C; }
body.theme-light .evo-anti__desc { color: #555; }

/* Evolution — cross-pollination */
body.theme-light .evo-cross__label { color: #444; }
body.theme-light .evo-cross__arrow { color: #999; }
body.theme-light .evo-cross__gives { color: #0A6B35; }
body.theme-light .evo-cross__file {
  background: #FFF; border-color: rgba(10,107,53,0.2); color: #0A6B35;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
body.theme-light .evo-cross__file--hakim {
  border-color: rgba(154,114,9,0.2); color: #9A7209;
}
body.theme-light .evo-cross__bridge-stat { color: #0A6B35; }
body.theme-light .evo-cross__takes { color: #9A7209; }

/* ══ Changelog Page ══ */
body.theme-light .changelog-timeline__line,
body.theme-light .changelog::before { background: linear-gradient(180deg, #0A6B35, rgba(10,107,53,0.1)); }
body.theme-light .changelog-entry__dot { background: #0A6B35; box-shadow: 0 0 6px rgba(10,107,53,0.3); }
body.theme-light .changelog-entry__date { color: #0A6B35; font-weight: 600; }
body.theme-light .changelog-entry__title { color: #1A1A1A; }
body.theme-light .changelog-entry__body { color: #444; }
body.theme-light .changelog-entry__body li { color: #444; }
body.theme-light .changelog-entry__tag { background: #E6F2EC; color: #0A6B35; }

/* ══ Typed Terminal (Home page) — light mode ══ */
body.theme-light .typed-terminal {
  background: #F8F9FA;
  border: 1px solid #D0D5DD;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
body.theme-light .typed-terminal * { text-shadow: none !important; }
body.theme-light .typed-terminal__bar {
  background: #EBEDF0;
  border-bottom: 1px solid #D0D5DD;
}
body.theme-light .typed-terminal__title { color: #666; }
body.theme-light .typed-terminal__body { color: #0A6B35; }
body.theme-light .typed-terminal__line--prompt::before { color: #9A7209; }
body.theme-light .typed-terminal__line--output { color: #555; }
body.theme-light .typed-terminal__cursor { background: #0A6B35; }

/* ══ Interactive Terminal Page — light mode ══ */
body.theme-light .terminal-page {
  background: #F8F9FA;
  border: 1px solid #D0D5DD;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
body.theme-light .terminal-page * { text-shadow: none !important; }
body.theme-light .terminal-page__bar {
  background: #EBEDF0;
  border-bottom: 1px solid #D0D5DD;
}
body.theme-light .terminal-page__bar-title { color: #666; }
body.theme-light .terminal-page__body {
  color: #0A6B35;
  scrollbar-color: #C0C0C0 #F8F9FA;
}
body.theme-light .terminal-page__body::-webkit-scrollbar-track { background: #F8F9FA; }
body.theme-light .terminal-page__body::-webkit-scrollbar-thumb { background: #C0C0C0; }
body.theme-light .terminal-page__output-line--gold { color: #9A7209; }
body.theme-light .terminal-page__output-line--silver { color: #666; }
body.theme-light .terminal-page__output-line--neon { color: #0A6B35; }
body.theme-light .terminal-page__output-line--white { color: #1A1A1A; }
body.theme-light .terminal-page__prompt { color: #9A7209; }
body.theme-light .terminal-page__input {
  color: #0A6B35;
  caret-color: #0A6B35;
}

/* ══ Neon glow suppression — clean borders instead ══ */
body.theme-light [class*="__letter"] { filter: none; }
body.theme-light .hero-pillar__letter,
body.theme-light .hero-pillar--hakim .hero-pillar__letter { filter: none; }

/* ══════════════════════════════════════════════
   CHANGELOG PAGE
   ══════════════════════════════════════════════ */
.changelog {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  padding-left: 2rem;
}
.changelog::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--neon), var(--gold), var(--emerald), transparent);
}
.changelog__entry {
  position: relative;
  margin-bottom: 2rem;
  padding-left: 1.5rem;
}
.changelog__entry::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--obsidian);
  border: 2px solid var(--neon);
  z-index: 1;
}
.changelog__entry:first-child::before {
  border-color: var(--gold);
  box-shadow: 0 0 8px var(--gold-dim);
}
.changelog__entry:last-child::before {
  border-color: var(--emerald);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}
.changelog__date {
  font-family: var(--font-accent);
  font-size: 0.65rem;
  letter-spacing: 2px;
  color: var(--neon);
  margin-bottom: 0.2rem;
}
.changelog__phase {
  font-family: var(--font-accent);
  font-size: 0.55rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.changelog__body {
  background: rgba(28, 28, 28, 0.4);
  border: 1px solid rgba(57, 255, 20, 0.08);
  border-radius: 10px;
  padding: 1.4rem;
  transition: border-color 0.3s, transform 0.3s;
}
.changelog__body:hover {
  border-color: var(--neon-dim);
  transform: translateX(4px);
}
.changelog__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.changelog__desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 0.6rem;
}
.changelog__files {
  font-size: 0.7rem;
  color: var(--neon);
  opacity: 0.5;
  font-family: var(--font-body);
}

/* ══════════════════════════════════════════════
   RESPONSIVE — NEW COMPONENTS
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .section-banner { padding: 1rem 1.2rem; gap: 0.8rem; }
  .section-banner__icon { width: 36px; height: 36px; }
  .section-banner__name { font-size: 1.1rem; }
  .footer__emblem--large { width: 48px; height: 48px; }
  .footer__amp--large { font-size: 1.5rem; }
  .typed-terminal { margin: 0 1rem 2rem; }
  .typed-terminal__body { font-size: 0.75rem; min-height: 130px; }
  .cron-heatmap__hour-label { font-size: 0.4rem; }
  .cron-heatmap__day-label { font-size: 0.5rem; }
  .arch-flow { flex-direction: column; gap: 0; }
  .arch-arrow { transform: rotate(90deg); padding: 4px 0; }
  .arch-branches { flex-direction: column; align-items: center; gap: 0.8rem; }
  .cert-timeline { padding-left: 24px; }
  .skills-filter__search { width: 160px; }
  .terminal-page { margin: 0 0.5rem; }
  .terminal-page__body { font-size: 0.7rem; max-height: 380px; }
  .kbd-hint { display: none; }
  .evo-cross { flex-direction: column; gap: 1rem; }
  .evo-cross__bridge { flex-direction: row; }
  .evo-cross__mind { max-width: 100%; }
  .evo-infra { grid-template-columns: 1fr; }
  .evo-metric__header { flex-direction: column; }
  .changelog { padding-left: 1.5rem; }
  .changelog__entry { padding-left: 1rem; }
  .changelog__entry::before { left: -1.5rem; width: 10px; height: 10px; }
  .changelog__title { font-size: 1rem; }
}

/* ═══════════════════════════════════════════════════════════
   CINEMATIC INTRO OVERLAY
   ═══════════════════════════════════════════════════════════ */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 1.2s ease, filter 1.2s ease;
}
.intro-overlay.fade-out {
  opacity: 0;
  filter: blur(8px);
  pointer-events: none;
}
.intro-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.intro-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 70%, #000 100%);
}
.intro-crown-wrap {
  z-index: 3;
  opacity: 0;
  transform: scale(0.3) translateY(40px);
  animation: introCrownIn 2s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  color: var(--gold);
}
.intro-crown-svg {
  filter: drop-shadow(0 0 40px rgba(255, 215, 0, 0.5)) drop-shadow(0 0 80px rgba(255, 165, 0, 0.3));
  animation: crownPulse 3s 2.5s ease-in-out infinite;
}
@keyframes crownPulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}
@keyframes introCrownIn {
  0% { opacity: 0; transform: scale(0.3) translateY(40px) rotate(-10deg); }
  50% { opacity: 1; transform: scale(1.15) translateY(-8px) rotate(2deg); }
  70% { transform: scale(0.95) translateY(3px) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); }
}
.intro-title {
  z-index: 3;
  font-family: var(--font-title);
  font-size: clamp(1.5rem, 5vw, 3.5rem);
  letter-spacing: 16px;
  color: var(--gold);
  opacity: 0;
  margin-top: 1.5rem;
  text-shadow: 0 0 40px rgba(255, 215, 0, 0.4), 0 0 80px rgba(255, 165, 0, 0.2);
  animation: introTitleIn 1.5s 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes introTitleIn {
  0% { opacity: 0; transform: translateY(30px); letter-spacing: 30px; }
  100% { opacity: 1; transform: translateY(0); letter-spacing: 16px; }
}
.intro-subtitle {
  z-index: 3;
  font-family: var(--font-accent);
  font-size: clamp(0.55rem, 1.2vw, 0.8rem);
  letter-spacing: 8px;
  text-transform: uppercase;
  color: var(--neon);
  opacity: 0;
  min-height: 1.2em;
  margin-top: 0.8rem;
  text-shadow: 0 0 20px rgba(57, 255, 20, 0.3);
}
.intro-subtitle.visible {
  animation: introSubIn 1s 0.3s ease-out forwards;
}
@keyframes introSubIn {
  to { opacity: 0.9; }
}
.intro-latin {
  z-index: 3;
  font-family: var(--font-accent);
  font-size: clamp(0.5rem, 0.9vw, 0.65rem);
  letter-spacing: 5px;
  color: var(--silver-dim);
  opacity: 0;
  min-height: 1em;
  margin-top: 0.5rem;
  font-style: italic;
}
.intro-latin.visible {
  animation: introSubIn 0.8s 0.3s ease-out forwards;
}
.intro-line {
  z-index: 3;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--neon), var(--gold), transparent);
  margin: 1.2rem 0;
  animation: introLineGrow 2s 2s ease-out forwards;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
@keyframes introLineGrow {
  0% { width: 0; opacity: 0; }
  30% { opacity: 1; }
  100% { width: min(320px, 60vw); }
}
.intro-fog {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent 20%, #000 70%);
  animation: introFogLift 3s 1s ease-out forwards;
  pointer-events: none;
}
@keyframes introFogLift {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
.intro-medieval-bg {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.intro-emblem {
  position: absolute;
  opacity: 0;
  color: var(--gold-dim);
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.3));
}
.intro-emblem--left {
  left: 6%;
  top: 30%;
  transform: rotate(-30deg);
  animation: emblemIn 2.5s 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.intro-emblem--right {
  right: 6%;
  top: 30%;
  transform: rotate(30deg) scaleX(-1);
  animation: emblemIn 2.5s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.intro-emblem--shield-l {
  left: 10%;
  bottom: 15%;
  transform: rotate(-10deg);
  animation: emblemIn 2.5s 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.intro-emblem--shield-r {
  right: 10%;
  bottom: 15%;
  transform: rotate(10deg);
  animation: emblemIn 2.5s 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes emblemIn {
  0% { opacity: 0; transform: rotate(var(--fr, 0deg)) scale(0.3); filter: blur(10px) drop-shadow(0 0 20px rgba(255, 215, 0, 0.3)); }
  60% { opacity: 0.2; filter: blur(0) drop-shadow(0 0 20px rgba(255, 215, 0, 0.3)); }
  100% { opacity: 0.12; transform: rotate(var(--fr, 0deg)) scale(1); filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.3)); }
}
.intro-smoke {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   PARALLAX HERO DEPTH
   ═══════════════════════════════════════════════════════════ */
.hero-parallax-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
  transition: transform 0.15s ease-out;
}
.hero-parallax-layer--stars {
  z-index: 0;
  opacity: 0.5;
}
.hero-parallax-layer--grid {
  z-index: 1;
  opacity: 0.15;
}
.hero-parallax-layer--glow {
  z-index: 2;
}
.hero-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--white);
  border-radius: 50%;
  animation: starTwinkle var(--dur, 3s) var(--delay, 0s) ease-in-out infinite;
}
@keyframes starTwinkle {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}

/* ═══════════════════════════════════════════════════════════
   SCROLL-TRIGGERED CHAPTER MARKERS
   ═══════════════════════════════════════════════════════════ */
.chapter-marker {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 3rem 0 1rem;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.chapter-marker.visible {
  opacity: 1;
  transform: translateX(0);
}
.chapter-marker__num {
  font-family: var(--font-title);
  font-size: 0.7rem;
  letter-spacing: 4px;
  color: var(--neon);
  border: 1px solid var(--neon-dim);
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  white-space: nowrap;
}
.chapter-marker__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--neon-dim), transparent);
}
.chapter-marker__title {
  font-family: var(--font-title);
  font-size: 1.4rem;
  color: var(--gold);
  letter-spacing: 2px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   ENHANCED SECTION TRANSITIONS
   ═══════════════════════════════════════════════════════════ */
.page-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-section.section-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.page-section.section-visible .constellation-card,
.page-section.section-visible .arsenal-card,
.page-section.section-visible .evo-file,
.page-section.section-visible .cert-milestone,
.page-section.section-visible .evo-infra__card,
.page-section.section-visible .trait,
.page-section.section-visible .palette-card,
.page-section.section-visible .emblem-element,
.page-section.section-visible .value-card,
.page-section.section-visible .summon-card,
.page-section.section-visible .stats-strip__item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.page-section.section-visible .constellation-card:nth-child(1),
.page-section.section-visible .arsenal-card:nth-child(1),
.page-section.section-visible .evo-file:nth-child(1),
.page-section.section-visible .cert-milestone:nth-child(1),
.page-section.section-visible .evo-infra__card:nth-child(1),
.page-section.section-visible .trait:nth-child(1),
.page-section.section-visible .palette-card:nth-child(1),
.page-section.section-visible .emblem-element:nth-child(1),
.page-section.section-visible .value-card:nth-child(1),
.page-section.section-visible .summon-card:nth-child(1),
.page-section.section-visible .stats-strip__item:nth-child(1) { transition-delay: 0.05s; }
.page-section.section-visible .constellation-card:nth-child(2),
.page-section.section-visible .arsenal-card:nth-child(2),
.page-section.section-visible .evo-file:nth-child(2),
.page-section.section-visible .cert-milestone:nth-child(2),
.page-section.section-visible .evo-infra__card:nth-child(2),
.page-section.section-visible .trait:nth-child(2),
.page-section.section-visible .palette-card:nth-child(2),
.page-section.section-visible .emblem-element:nth-child(2),
.page-section.section-visible .value-card:nth-child(2),
.page-section.section-visible .summon-card:nth-child(2),
.page-section.section-visible .stats-strip__item:nth-child(2) { transition-delay: 0.1s; }
.page-section.section-visible .constellation-card:nth-child(n+3),
.page-section.section-visible .arsenal-card:nth-child(n+3),
.page-section.section-visible .evo-file:nth-child(n+3),
.page-section.section-visible .cert-milestone:nth-child(n+3),
.page-section.section-visible .evo-infra__card:nth-child(n+3),
.page-section.section-visible .trait:nth-child(n+3),
.page-section.section-visible .palette-card:nth-child(n+3),
.page-section.section-visible .emblem-element:nth-child(n+3),
.page-section.section-visible .value-card:nth-child(n+3),
.page-section.section-visible .summon-card:nth-child(n+3),
.page-section.section-visible .stats-strip__item:nth-child(n+3) { transition-delay: calc(0.12s + (var(--i, 3) - 3) * 0.06s); }

.page-section.section-visible > * > * {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ═══════════════════════════════════════════════════════════
   INTERACTIVE CONSTELLATION CARDS — TILT + GLOW
   ═══════════════════════════════════════════════════════════ */
.constellation-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  transform-style: preserve-3d;
  perspective: 800px;
}
.constellation-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 40px rgba(57, 255, 20, 0.08);
  border-color: var(--neon-dim);
}
.constellation-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(57,255,20,0.06), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.constellation-card:hover::after {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   COUNTER ANIMATION — NUMBERS COUNT UP
   ═══════════════════════════════════════════════════════════ */
.stats-strip__number {
  transition: color 0.4s;
}
.stats-strip__number.counting {
  color: var(--neon);
  text-shadow: 0 0 12px var(--neon-glow);
}
.stats-strip__number.counted {
  color: var(--gold);
  text-shadow: 0 0 8px var(--gold-dim);
  animation: counterFlash 0.6s ease-out;
}
@keyframes counterFlash {
  0% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════
   ENHANCED ARSENAL CARDS — SHIMMER BORDER
   ═══════════════════════════════════════════════════════════ */
.arsenal-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s, border-color 0.4s;
}
.arsenal-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(57, 255, 20, 0.08);
}
.arsenal-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(57,255,20,0.04), transparent);
  transition: left 0.8s ease;
  pointer-events: none;
}
.arsenal-card:hover::after {
  left: 100%;
}
.arsenal-card--hakim:hover {
  box-shadow: 0 16px 48px rgba(80, 200, 120, 0.08);
  border-color: rgba(80, 200, 120, 0.3);
}
.arsenal-card--hakim::after {
  background: linear-gradient(90deg, transparent, rgba(80,200,120,0.04), transparent);
}

/* ═══════════════════════════════════════════════════════════
   ROADMAP PHASE — GLOW ON SCROLL
   ═══════════════════════════════════════════════════════════ */
.roadmap-phase {
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.roadmap-phase--done .roadmap-phase__marker {
  transition: box-shadow 0.4s, transform 0.4s;
}
.roadmap-phase--done:hover .roadmap-phase__marker {
  box-shadow: 0 0 20px var(--neon-glow);
  transform: scale(1.1);
}
.roadmap-phase--active .roadmap-phase__content {
  transition: transform 0.3s;
}
.roadmap-phase--active:hover .roadmap-phase__content {
  transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════════
   MAGICAL SCROLL PROGRESS — GRADIENT SHIFT
   ═══════════════════════════════════════════════════════════ */
.scroll-progress {
  background: linear-gradient(90deg, var(--neon), var(--gold), var(--neon));
  background-size: 200% 100%;
  animation: progressShimmer 3s linear infinite;
}
@keyframes progressShimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ═══════════════════════════════════════════════════════════
   DUALITY CARDS — ENERGY CONNECTION
   ═══════════════════════════════════════════════════════════ */
.duality__vs {
  position: relative;
}
.duality__vs-text {
  position: relative;
  z-index: 1;
}
.duality__vs::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-dim), transparent);
  animation: dualityPulse 3s ease-in-out infinite;
}
@keyframes dualityPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
  50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.6; }
}

/* ═══════════════════════════════════════════════════════════
   QUOTE BLOCKS — FADE IN WITH GLOW
   ═══════════════════════════════════════════════════════════ */
.quote-block {
  position: relative;
  padding: 2rem;
}
.quote-block::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-image: linear-gradient(135deg, var(--gold-dim), transparent, var(--neon-dim)) 1;
  opacity: 0;
  transition: opacity 0.8s;
}
.quote-block.visible::before {
  opacity: 1;
}
.quote-block blockquote {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s 0.3s, transform 0.8s 0.3s;
}
.quote-block.visible blockquote {
  opacity: 1;
  transform: translateY(0);
}
.quote-block cite {
  opacity: 0;
  transition: opacity 0.6s 0.6s;
}
.quote-block.visible cite {
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER — EMBLEM HOVER GLOW
   ═══════════════════════════════════════════════════════════ */
.footer__emblem {
  transition: filter 0.4s, transform 0.4s;
}
.footer__emblem:hover {
  filter: drop-shadow(0 0 20px var(--gold-dim));
  transform: scale(1.15);
}

/* ═══════════════════════════════════════════════════════════
   ENHANCED REVEAL — MORE DRAMATIC
   ═══════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ═══════════════════════════════════════════════════════════
   NAV LINKS — ACTIVE INDICATOR ANIMATION
   ═══════════════════════════════════════════════════════════ */
.nav__links a {
  position: relative;
}
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--neon);
  box-shadow: 0 0 6px var(--neon-glow);
  transition: width 0.3s ease;
}
.nav__links a:hover::after,
.nav__links a.active::after {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   MONARCH PROFILE — SHIMMER BORDER
   ═══════════════════════════════════════════════════════════ */
.monarch-profile {
  position: relative;
}
.monarch-profile::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--gold-dim), transparent, var(--neon-dim), transparent);
  background-size: 300% 300%;
  animation: monarchShimmer 6s ease infinite;
  z-index: -1;
}
@keyframes monarchShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ═══════════════════════════════════════════════════════════
   HERO PILLAR LETTERS — HOVER RIPPLE
   ═══════════════════════════════════════════════════════════ */
.hero-pillar {
  transition: transform 0.3s, box-shadow 0.3s;
}
.hero-pillar:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 24px rgba(57, 255, 20, 0.1);
}
.hero-pillar__letter {
  transition: color 0.3s, text-shadow 0.3s;
}
.hero-pillar:hover .hero-pillar__letter {
  color: var(--gold);
  text-shadow: 0 0 20px var(--gold-dim);
}
.hero-pillar--hakim:hover .hero-pillar__letter {
  color: var(--gold);
  text-shadow: 0 0 20px var(--gold-dim);
}

/* ═══════════════════════════════════════════════════════════
   SMOKE CANVAS
   ═══════════════════════════════════════════════════════════ */
.smoke-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════
   MEDIEVAL FLOATING ELEMENTS
   ═══════════════════════════════════════════════════════════ */
.medieval-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.medieval-float {
  position: absolute;
  left: var(--fx);
  top: var(--fy);
  opacity: 0;
  will-change: transform, opacity;
  color: var(--silver-dim);
  filter: drop-shadow(0 0 10px rgba(255,215,0,0.26));
  transition: color 0.5s, filter 0.5s;
}
.medieval-float svg {
  width: var(--fs, 24px);
  height: auto;
  display: block;
  filter: inherit;
}
.medieval-float.visible {
  opacity: 1;
  animation: mfBreath var(--breath, 8s) ease-in-out infinite,
             mfDrift var(--drift, 25s) ease-in-out infinite;
}

@keyframes mfBreath {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}

@keyframes mfDrift {
  0%, 100% { transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) - var(--sy, 0px)), 0) rotate(var(--fr, 0deg)) scale(1); }
  20% { transform: translate3d(calc(var(--mx, 0px) + 6px), calc(var(--my, 0px) - var(--sy, 0px) - 12px), 0) rotate(calc(var(--fr, 0deg) + 2deg)) scale(1.02); }
  40% { transform: translate3d(calc(var(--mx, 0px) - 8px), calc(var(--my, 0px) - var(--sy, 0px) - 6px), 0) rotate(calc(var(--fr, 0deg) - 1deg)) scale(0.98); }
  60% { transform: translate3d(calc(var(--mx, 0px) + 4px), calc(var(--my, 0px) - var(--sy, 0px) - 18px), 0) rotate(calc(var(--fr, 0deg) + 3deg)) scale(1.03); }
  80% { transform: translate3d(calc(var(--mx, 0px) - 5px), calc(var(--my, 0px) - var(--sy, 0px) - 8px), 0) rotate(var(--fr, 0deg)) scale(1); }
}

.mf-lion    { color: var(--gold); --breath: 6s; --drift: 22s; filter: drop-shadow(0 0 8px rgba(255,215,0,0.3)); }
.mf-dragon  { color: #39FF14; --breath: 7s; --drift: 28s; filter: drop-shadow(0 0 10px rgba(57,255,20,0.3)); }
.mf-crown   { color: var(--gold); --breath: 5s; --drift: 20s; filter: drop-shadow(0 0 8px rgba(255,215,0,0.3)); }
.mf-sword   { color: #D0D0D0; --breath: 8s; --drift: 24s; filter: drop-shadow(0 0 6px rgba(192,192,192,0.25)); }
.mf-shield  { color: #B8B8B8; --breath: 9s; --drift: 26s; filter: drop-shadow(0 0 6px rgba(192,192,192,0.2)); }
.mf-owl     { color: #FFD700; --breath: 7s; --drift: 23s; filter: drop-shadow(0 0 8px rgba(255,215,0,0.25)); }
.mf-scroll  { color: #A0A0A0; --breath: 10s; --drift: 28s; filter: drop-shadow(0 0 6px rgba(192,192,192,0.2)); }
.mf-crescent { color: var(--gold); --breath: 6s; --drift: 18s; filter: drop-shadow(0 0 8px rgba(255,215,0,0.3)); }
.mf-crossed { color: #39FF14; --breath: 7s; --drift: 25s; filter: drop-shadow(0 0 8px rgba(57,255,20,0.3)); }
.mf-castle  { color: #989898; --breath: 12s; --drift: 32s; filter: drop-shadow(0 0 6px rgba(192,192,192,0.15)); }
.mf-tower   { color: #909090; --breath: 11s; --drift: 30s; filter: drop-shadow(0 0 6px rgba(192,192,192,0.15)); }
.mf-key     { color: #FFD700; --breath: 8s; --drift: 22s; filter: drop-shadow(0 0 6px rgba(255,215,0,0.25)); }
.mf-chess   { color: var(--gold); --breath: 7s; --drift: 21s; filter: drop-shadow(0 0 8px rgba(255,215,0,0.3)); }
.mf-goblet  { color: #FFD700; --breath: 9s; --drift: 24s; filter: drop-shadow(0 0 6px rgba(255,215,0,0.25)); }
.mf-arrow   { color: #A8A8A8; --breath: 6s; --drift: 20s; filter: drop-shadow(0 0 6px rgba(192,192,192,0.2)); }
.mf-moon    { color: #C8C8FF; --breath: 10s; --drift: 30s; filter: drop-shadow(0 0 10px rgba(200,200,255,0.3)); }
.mf-sun     { color: var(--gold); --breath: 8s; --drift: 26s; filter: drop-shadow(0 0 10px rgba(255,215,0,0.35)); }
.mf-compass { color: #39FF14; --breath: 9s; --drift: 35s; filter: drop-shadow(0 0 6px rgba(57,255,20,0.25)); }
.mf-axe     { color: #A0A0A0; --breath: 8s; --drift: 23s; filter: drop-shadow(0 0 6px rgba(192,192,192,0.2)); }

/* ═══════════════════════════════════════════════════════════
   MEDIEVAL DIVIDERS — Ornate Sword-Crown-Sword
   ═══════════════════════════════════════════════════════════ */
.crown-divider {
  text-align: center;
  padding: 2.5rem 0;
  font-size: 1.2rem;
  color: var(--gold-dim);
  letter-spacing: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

.md-orn {
  color: var(--silver-dim);
  font-size: 1rem;
  animation: mdOrn 4s ease-in-out infinite;
}

.md-gem {
  color: var(--gold);
  font-size: 1.4rem;
  animation: mdGem 3s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255,215,0,0.3));
}

@keyframes mdOrn {
  0%, 100% { opacity: 0.5; transform: rotate(-8deg); }
  50%      { opacity: 0.8; transform: rotate(8deg); }
}

@keyframes mdGem {
  0%, 100% { text-shadow: none; transform: scale(1); }
  50%      { text-shadow: 0 0 12px rgba(255,215,0,0.4); transform: scale(1.1); }
}

/* ═══════════════════════════════════════════════════════════
   INTRO — ENHANCED MEDIEVAL (SVG)
   ═══════════════════════════════════════════════════════════ */
.intro-smoke {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.intro-medieval-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.intro-medieval {
  position: absolute;
  font-size: 3rem;
  color: var(--gold-dim);
  opacity: 0;
  filter: drop-shadow(0 0 20px rgba(255,215,0,0.3));
}

.intro-medieval--sword-l {
  left: 8%;
  top: 35%;
  transform: rotate(-45deg);
  animation: introMedIn 2s 0.8s ease-out forwards;
}

.intro-medieval--sword-r {
  right: 8%;
  top: 35%;
  transform: rotate(45deg);
  animation: introMedIn 2s 1s ease-out forwards;
}

.intro-medieval--shield-l {
  left: 15%;
  bottom: 20%;
  animation: introMedIn 2s 1.2s ease-out forwards;
}

.intro-medieval--shield-r {
  right: 15%;
  bottom: 20%;
  animation: introMedIn 2s 1.4s ease-out forwards;
}

@keyframes introMedIn {
  0%   { opacity: 0; transform: scale(0.5); filter: blur(8px) drop-shadow(0 0 20px rgba(255,215,0,0.3)); }
  100% { opacity: 0.15; transform: scale(1); filter: blur(0) drop-shadow(0 0 20px rgba(255,215,0,0.3)); }
}

/* ═══════════════════════════════════════════════════════════
   MONARCH PAGE
   ═══════════════════════════════════════════════════════════ */
.monarch-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem 2rem;
  overflow: hidden;
}

.monarch-hero__crown {
  font-size: 4rem;
  animation: monarchCrownFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(255,215,0,0.4));
  color: var(--gold);
}

@keyframes monarchCrownFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.monarch-hero__name {
  font-family: var(--font-title);
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 900;
  letter-spacing: 8px;
  background: linear-gradient(135deg, var(--gold), #FFA500, var(--gold), #FFEC8B);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 1rem;
}

.monarch-hero__alias {
  font-family: var(--font-accent);
  font-size: 0.65rem;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--neon);
  text-shadow: 0 0 8px var(--neon-dim);
  margin-top: 0.5rem;
}

.monarch-hero__motto {
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--gold-dim);
  margin-top: 1.5rem;
}

/* Four Forms Grid */
.forms-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: var(--content-wide);
  margin: 0 auto;
}

.form-card {
  background: rgba(28,28,28,0.5);
  border: 1px solid rgba(255,215,0,0.1);
  border-radius: 8px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: border-color 0.4s, transform 0.4s, box-shadow 0.4s;
  position: relative;
  overflow: hidden;
}

.form-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}

.form-card:hover {
  border-color: var(--gold-dim);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(255,215,0,0.08);
}

.form-card:hover::before {
  opacity: 1;
}

.form-card__icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 12px rgba(255,215,0,0.3));
}

.form-card__name {
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.3rem;
}

.form-card__sub {
  font-family: var(--font-accent);
  font-size: 0.55rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 0.8rem;
}

.form-card__desc {
  font-size: 0.85rem;
  color: var(--silver-dim);
  line-height: 1.5;
}

/* Three Pillars */
.pillars-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.pillar-trio {
  text-align: center;
  padding: 2rem;
  background: linear-gradient(180deg, rgba(28,28,28,0.6), rgba(10,46,26,0.15));
  border: 1px solid rgba(255,215,0,0.1);
  border-radius: 8px;
  transition: border-color 0.3s, transform 0.3s;
}

.pillar-trio:hover {
  border-color: var(--gold-dim);
  transform: translateY(-3px);
}

.pillar-trio__icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.pillar-trio__name {
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.2rem;
}

.pillar-trio__arabic {
  font-size: 0.95rem;
  color: var(--gold-dim);
  margin-bottom: 0.6rem;
}

.pillar-trio__desc {
  font-size: 0.85rem;
  color: var(--silver-dim);
  line-height: 1.5;
}

/* Companions — Dragon & Lion */
.companions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: var(--content-width);
  margin: 0 auto;
}

.companion-card {
  padding: 2rem;
  border-radius: 8px;
  border: 1px solid rgba(57,255,20,0.1);
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s, box-shadow 0.4s;
}

.companion-card--dragon {
  background: linear-gradient(135deg, rgba(28,28,28,0.6), rgba(57,255,20,0.05));
  border-color: rgba(57,255,20,0.15);
}

.companion-card--lion {
  background: linear-gradient(135deg, rgba(28,28,28,0.6), rgba(255,215,0,0.05));
  border-color: rgba(255,215,0,0.15);
}

.companion-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.companion-card--dragon:hover { border-color: var(--neon-dim); }
.companion-card--lion:hover { border-color: var(--gold-dim); }

.companion-card__icon {
  font-size: 2.5rem;
  margin-bottom: 0.8rem;
}

.companion-card__name {
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.2rem;
}

.companion-card__arabic {
  font-size: 1rem;
  color: var(--gold-dim);
  margin-bottom: 0.5rem;
}

.companion-card__title {
  font-family: var(--font-accent);
  font-size: 0.55rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 1rem;
}

.companion-card__desc {
  font-size: 0.9rem;
  color: var(--silver);
  line-height: 1.6;
}

/* Saber — Three Modes */
.saber-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.saber-mode {
  text-align: center;
  padding: 1.8rem;
  background: rgba(28,28,28,0.5);
  border: 1px solid rgba(192,192,192,0.1);
  border-radius: 8px;
  transition: border-color 0.3s, transform 0.3s;
}

.saber-mode:hover {
  border-color: var(--silver-dim);
  transform: translateY(-3px);
}

.saber-mode__icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.saber-mode__name {
  font-family: var(--font-accent);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.saber-mode__desc {
  font-size: 0.82rem;
  color: var(--silver-dim);
  line-height: 1.5;
}

/* Arsenal Grid on Monarch Page */
.monarch-arsenal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  max-width: var(--content-wide);
  margin: 0 auto;
}

.monarch-arsenal__card {
  padding: 1.5rem;
  background: rgba(28,28,28,0.4);
  border: 1px solid rgba(57,255,20,0.08);
  border-radius: 8px;
  text-align: center;
  transition: border-color 0.3s, transform 0.3s;
}

.monarch-arsenal__card:hover {
  border-color: var(--neon-dim);
  transform: translateY(-3px);
}

.monarch-arsenal__icon {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.monarch-arsenal__name {
  font-family: var(--font-accent);
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.monarch-arsenal__desc {
  font-size: 0.82rem;
  color: var(--silver-dim);
  line-height: 1.5;
}

/* Mottos Grid */
.mottos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  max-width: var(--content-wide);
  margin: 0 auto;
}

.motto-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.2rem;
  background: rgba(28,28,28,0.3);
  border: 1px solid rgba(255,215,0,0.08);
  border-radius: 6px;
  transition: border-color 0.3s;
}

.motto-card:hover {
  border-color: var(--gold-dim);
}

.motto-card__icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.motto-card__text {
  font-family: var(--font-title);
  font-size: 0.95rem;
  color: var(--gold);
  line-height: 1.4;
}

.motto-card__sub {
  font-size: 0.8rem;
  color: var(--silver-dim);
  margin-top: 0.2rem;
}

/* Responsive — Monarch Page */
@media (max-width: 900px) {
  .forms-grid { grid-template-columns: repeat(2, 1fr); }
  .companions-grid { grid-template-columns: 1fr; }
  .saber-grid { grid-template-columns: 1fr; }
  .pillars-trio { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .forms-grid { grid-template-columns: 1fr; }
  .mottos-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   SMOKE CANVAS — LIGHT THEME
   ═══════════════════════════════════════════════════════════ */
body.theme-light .smoke-canvas { opacity: 0.15; }
body.theme-light .medieval-layer { opacity: 0.5; }
body.theme-light .medieval-float {
  color: #5A4A1A !important;
  filter: drop-shadow(0 0 4px rgba(154,114,9,0.15)) !important;
}
body.theme-light .mf-lion,
body.theme-light .mf-crown,
body.theme-light .mf-crescent,
body.theme-light .mf-chess,
body.theme-light .mf-sun,
body.theme-light .mf-goblet,
body.theme-light .mf-key,
body.theme-light .mf-owl { color: #8B6914 !important; }
body.theme-light .mf-dragon,
body.theme-light .mf-crossed,
body.theme-light .mf-compass { color: #1A6B35 !important; }
body.theme-light .mf-sword,
body.theme-light .mf-shield,
body.theme-light .mf-scroll,
body.theme-light .mf-castle,
body.theme-light .mf-tower,
body.theme-light .mf-arrow,
body.theme-light .mf-axe { color: #6B6B6B !important; }
body.theme-light .mf-moon { color: #7B7BA0 !important; }
body.theme-light .md-orn { color: rgba(154,114,9,0.3); }
body.theme-light .md-gem { color: #9A7209; filter: none; }
body.theme-light .form-card,
body.theme-light .pillar-trio,
body.theme-light .companion-card,
body.theme-light .saber-mode,
body.theme-light .monarch-arsenal__card,
body.theme-light .motto-card {
  background: #FFF;
  border: 1px solid #E8E8E8;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
body.theme-light .companion-card--dragon { border-color: rgba(10,107,53,0.15); }
body.theme-light .companion-card--lion { border-color: rgba(154,114,9,0.15); }
body.theme-light .intro-emblem { color: rgba(154,114,9,0.15); }

/* ═══════════════════════════════════════════════════════════
   PAGE TRANSITIONS
   ═══════════════════════════════════════════════════════════ */
.page {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.page.active {
  opacity: 1;
  transform: translateY(0);
}
.page.page-exit {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .medieval-float { animation: none !important; }
  .hero-star { animation: none !important; opacity: 0.3 !important; }
  .smoke-canvas { display: none !important; }
  .global-particles { display: none !important; }
  .intro-overlay { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   CURSOR GLOW TRAIL
   ═══════════════════════════════════════════════════════════ */
.cursor-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  background: radial-gradient(circle, rgba(57,255,20,0.06) 0%, rgba(57,255,20,0.02) 40%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  opacity: 0;
}
.cursor-glow.visible {
  opacity: 1;
}
body.theme-light .cursor-glow {
  background: radial-gradient(circle, rgba(3,71,50,0.06) 0%, rgba(3,71,50,0.02) 40%, transparent 70%);
}

/* ═══════════════════════════════════════════════════════════
   BACK TO TOP
   ═══════════════════════════════════════════════════════════ */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--smoke);
  border: 1px solid var(--neon-dim);
  color: var(--gold);
  cursor: pointer;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s;
  pointer-events: none;
  box-shadow: 0 0 0 rgba(57,255,20,0);
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  box-shadow: 0 0 20px var(--neon-dim);
  border-color: var(--neon);
}
.back-to-top svg {
  width: 22px;
  height: 22px;
}

/* ═══════════════════════════════════════════════════════════
   SHARE BUTTON
   ═══════════════════════════════════════════════════════════ */
.share-btn {
  position: fixed;
  bottom: 2rem;
  right: 5.5rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--smoke);
  border: 1px solid var(--neon-dim);
  color: var(--silver);
  cursor: pointer;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s, color 0.3s;
  pointer-events: none;
}
.share-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.share-btn:hover {
  color: var(--gold);
  box-shadow: 0 0 20px var(--gold-dim);
  border-color: var(--gold);
}
.share-btn svg {
  width: 20px;
  height: 20px;
}
.share-btn--toast {
  position: fixed;
  bottom: 6rem;
  right: 5.5rem;
  background: var(--smoke-light);
  border: 1px solid var(--neon-dim);
  color: var(--neon);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  z-index: 950;
}
.share-btn--toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════
   LOADING SKELETON
   ═══════════════════════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--smoke) 25%, var(--smoke-light) 50%, var(--smoke) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.stats-strip__number.skeleton {
  display: inline-block;
  width: 60px;
  height: 28px;
}

/* ═══════════════════════════════════════════════════════════
   MATRIX OVERLAY
   ═══════════════════════════════════════════════════════════ */
.matrix-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.matrix-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.matrix-overlay canvas {
  width: 100%;
  height: 100%;
}
.matrix-exit {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  color: #0f0;
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  opacity: 0.5;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   KONAMI EASTER EGG
   ═══════════════════════════════════════════════════════════ */
.konami-flash {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: radial-gradient(circle at center, var(--gold-bright), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
}
.konami-flash.active {
  opacity: 1;
  animation: konami-pulse 2s ease-out forwards;
}
@keyframes konami-pulse {
  0% { opacity: 0.8; }
  50% { opacity: 0.4; }
  100% { opacity: 0; }
}
.konami-text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  z-index: 10002;
  font-family: var(--font-title);
  font-size: 3rem;
  color: var(--gold);
  text-shadow: 0 0 30px var(--gold-dim), 0 0 60px var(--gold-dim);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s, transform 0.5s;
  text-align: center;
  white-space: nowrap;
}
.konami-text.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ═══════════════════════════════════════════════════════════
   COMMAND PALETTE
   ═══════════════════════════════════════════════════════════ */
.cmd-palette {
  position: fixed;
  inset: 0;
  z-index: 10003;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.cmd-palette.active {
  opacity: 1;
  pointer-events: auto;
}
.cmd-palette__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}
.cmd-palette__dialog {
  position: relative;
  width: 520px;
  max-width: 90vw;
  background: var(--obsidian);
  border: 1px solid var(--smoke-light);
  border-radius: 12px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 40px var(--neon-dim);
  overflow: hidden;
  transform: scale(0.96) translateY(-10px);
  transition: transform 0.15s;
}
.cmd-palette.active .cmd-palette__dialog {
  transform: scale(1) translateY(0);
}
.cmd-palette__search-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--smoke-light);
}
.cmd-palette__icon {
  color: var(--neon);
  font-size: 1.2rem;
  flex-shrink: 0;
}
.cmd-palette__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--silver);
  font-family: var(--font-body);
  font-size: 1rem;
}
.cmd-palette__input::placeholder {
  color: var(--smoke-light);
}
.cmd-palette__esc {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  padding: 2px 6px;
  border: 1px solid var(--smoke-light);
  border-radius: 4px;
  color: var(--smoke-light);
  flex-shrink: 0;
}
.cmd-palette__list {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  max-height: 360px;
  overflow-y: auto;
}
.cmd-palette__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  color: var(--silver);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: background 0.1s, color 0.1s;
}
.cmd-palette__item:hover,
.cmd-palette__item.selected {
  background: var(--smoke);
  color: var(--gold);
}
.cmd-palette__item.selected {
  box-shadow: inset 3px 0 0 var(--gold);
}
.cmd-palette__item-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--smoke);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.cmd-palette__item-label {
  flex: 1;
}
.cmd-palette__item-hint {
  font-size: 0.75rem;
  color: var(--smoke-light);
}
.cmd-palette__item.selected .cmd-palette__item-hint {
  color: var(--gold-dim);
}
.cmd-palette__empty {
  padding: 2rem;
  text-align: center;
  color: var(--smoke-light);
  font-size: 0.9rem;
}
.cmd-palette__footer {
  display: flex;
  gap: 1.5rem;
  padding: 0.6rem 1.25rem;
  border-top: 1px solid var(--smoke-light);
  font-size: 0.72rem;
  color: var(--smoke-light);
}
.cmd-palette__footer kbd {
  font-family: var(--font-mono, monospace);
  padding: 1px 4px;
  border: 1px solid var(--smoke-light);
  border-radius: 3px;
  font-size: 0.65rem;
  margin: 0 2px;
}
body.theme-light .cmd-palette__dialog {
  background: #fff;
  border-color: #ddd;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15), 0 0 40px rgba(0, 201, 167, 0.15);
}
body.theme-light .cmd-palette__input {
  color: #222;
}
body.theme-light .cmd-palette__item:hover,
body.theme-light .cmd-palette__item.selected {
  background: #f0f0f0;
  color: #b8860b;
}
body.theme-light .cmd-palette__item-icon {
  background: #f0f0f0;
}

/* ═══════════════════════════════════════════════════════════
   GALLERY PAGE
   ═══════════════════════════════════════════════════════════ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  padding: 1rem 0;
}
.gallery-card {
  position: relative;
  background: var(--smoke);
  border: 1px solid var(--smoke-light);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  cursor: pointer;
}
.gallery-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,215,0,0.04), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 1;
}
.gallery-card:hover::after {
  opacity: 1;
}
.gallery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(57,255,20,0.08);
  border-color: var(--neon-dim);
}
.gallery-card__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: var(--obsidian);
}
.gallery-card__img--svg {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.gallery-card__img--svg svg {
  width: 80%;
  height: 80%;
}
.gallery-card__body {
  padding: 1rem 1.25rem;
}
.gallery-card__title {
  font-family: var(--font-title);
  font-size: 1rem;
  color: var(--gold);
  margin-bottom: 0.25rem;
}
.gallery-card__desc {
  font-size: 0.85rem;
  color: var(--silver-dim);
  line-height: 1.4;
}
.gallery-card__tag {
  display: inline-block;
  font-size: 0.7rem;
  font-family: var(--font-accent);
  color: var(--neon);
  background: var(--neon-dim);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  margin-top: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════
   TIMELINE PAGE
   ═══════════════════════════════════════════════════════════ */
.timeline {
  position: relative;
  padding: 2rem 0;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--neon-dim), var(--neon), var(--neon-dim), transparent);
  transform: translateX(-50%);
}
.timeline-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2.5rem;
  position: relative;
}
.timeline-item:nth-child(odd) {
  flex-direction: row;
  padding-right: calc(50% + 2rem);
  text-align: right;
}
.timeline-item:nth-child(even) {
  flex-direction: row-reverse;
  padding-left: calc(50% + 2rem);
  text-align: left;
}
.timeline-item__dot {
  position: absolute;
  left: 50%;
  top: 0.5rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--neon);
  border: 2px solid var(--obsidian);
  box-shadow: 0 0 10px var(--neon-glow);
  transform: translateX(-50%);
  z-index: 2;
}
.timeline-item__dot--gold {
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold-dim);
}
.timeline-item__content {
  background: var(--smoke);
  border: 1px solid var(--smoke-light);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.timeline-item__content:hover {
  border-color: var(--neon-dim);
  box-shadow: 0 4px 20px rgba(57,255,20,0.06);
}
.timeline-item__date {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  color: var(--neon);
  margin-bottom: 0.35rem;
}
.timeline-item__title {
  font-family: var(--font-title);
  font-size: 1.1rem;
  color: var(--gold);
  margin-bottom: 0.35rem;
}
.timeline-item__desc {
  font-size: 0.9rem;
  color: var(--silver-dim);
  line-height: 1.5;
}
@media (max-width: 768px) {
  .timeline::before { left: 1rem; }
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    flex-direction: row;
    padding-right: 0;
    padding-left: 3rem;
    text-align: left;
  }
  .timeline-item__dot {
    left: 1rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   SERVER DASHBOARD PAGE
   ═══════════════════════════════════════════════════════════ */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 1rem 0;
}
.dash-card--wide { grid-column: span 2; }
@media (max-width: 700px) { .dash-card--wide { grid-column: auto; } }
.dash-card__detail a { color: var(--gold, #FFD700); text-decoration: none; }
.dash-card__detail a:hover, .dash-card__detail a:focus-visible { text-decoration: underline; }
.dash-card {
  background: var(--smoke);
  border: 1px solid var(--smoke-light);
  border-radius: 12px;
  padding: 1.5rem;
  transition: border-color 0.3s;
}
.dash-card:hover {
  border-color: var(--neon-dim);
}
.dash-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.dash-card__icon {
  font-size: 1.5rem;
}
.dash-card__label {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  color: var(--silver-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dash-card__value {
  font-family: var(--font-accent);
  font-size: 2rem;
  font-weight: 700;
  color: var(--neon);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.dash-card__value--gold { color: var(--gold); }
.dash-card__value--silver { color: var(--silver); }
.dash-card__bar {
  height: 6px;
  background: var(--obsidian);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.5rem;
}
.dash-card__bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 1s ease;
  background: linear-gradient(90deg, var(--neon), var(--emerald));
}
.dash-card__bar-fill--gold {
  background: linear-gradient(90deg, var(--gold), #FFA500);
}
.dash-card__bar-fill--warn {
  background: linear-gradient(90deg, #FF6B35, #FF3D00);
}
.dash-card__detail {
  font-size: 0.8rem;
  color: var(--silver-dim);
  margin-top: 0.35rem;
}
.dash-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-family: var(--font-accent);
  margin-top: 0.5rem;
}
.dash-card__status--ok { color: var(--neon); }
.dash-card__status--warn { color: #FF6B35; }
.dash-card__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: dash-pulse 2s ease infinite;
}
@keyframes dash-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.dash-cpu-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 60px;
  margin-top: 0.75rem;
}
.dash-cpu-chart__bar {
  flex: 1;
  background: var(--neon-dim);
  border-radius: 2px 2px 0 0;
  min-height: 4px;
  transition: height 0.5s ease;
}
.dash-log {
  background: var(--obsidian);
  border: 1px solid var(--smoke-light);
  border-radius: 8px;
  padding: 1rem;
  font-family: monospace;
  font-size: 0.8rem;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 1rem;
}
.dash-log__line {
  color: var(--silver-dim);
  padding: 0.15rem 0;
}
.dash-log__line--neon { color: var(--neon); }
.dash-log__line--gold { color: var(--gold); }
.dash-log__line--warn { color: #FF6B35; }

/* ═══════════════════════════════════════════════════════════
   INTERCOM PAGE — mesh vitals rendered from data/cip.json
   ═══════════════════════════════════════════════════════════ */
.intercom-mesh {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.55rem;
  max-width: var(--content-width);
  margin: 0 auto 2rem;
  padding: 0 1rem;
}
.intercom-cell {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-left: 3px solid var(--accent, #C0C0C0);
}
.intercom-cell__head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
  color: var(--accent, var(--silver, #E8E4D0));
}
.intercom-cell__sigil { font-size: 1.1rem; line-height: 1; }
.intercom-cell__stats {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  color: var(--silver-dim, #9aa2ad);
}
.intercom-cell__stat b { font-weight: 600; color: var(--white, #fff); }
:root[data-theme="light"] .intercom-cell__stat b { color: #2c2c33; }

/* ═══════════════════════════════════════════════════════════
   DELIBERATION PAGE — reasoning measure from data/reasoning.json
   The mind grid reuses .intercom-mesh / .intercom-cell.
   ═══════════════════════════════════════════════════════════ */
/* .vitals / .vitals__chip set display, which beats the [hidden] attribute:
   an unhydrated strip showed a row of dashes instead of staying hidden. */
.vitals[hidden], .vitals__chip[hidden], .intercom-mesh[hidden], .delib-days[hidden] { display: none; }
.delib-strip { margin-top: -1.4rem; }
.delib-strip a.vitals__chip { text-decoration: none; cursor: pointer; }
.delib-strip a.vitals__chip:hover, .delib-strip a.vitals__chip:focus-visible { border-color: var(--v); }
.delib-note {
  max-width: 68ch;
  margin: 0 auto 1.5rem;
  padding: 0 1rem;
  color: var(--silver-dim, #9aa2ad);
  line-height: 1.7;
  text-align: left;
}
.delib-days {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0.6rem;
  max-width: var(--content-width);
  margin: 0 auto 1.5rem;
  padding: 0 1rem;
}
.delib-days__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex: 0 1 56px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.5px;
  color: var(--silver-dim, #9aa2ad);
}
.delib-days__n { color: var(--white, #fff); font-variant-numeric: tabular-nums; }
.delib-days__bar {
  display: block;
  width: 100%;
  min-height: 4px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--neon, #39FF14), rgba(57,255,20,.18));
}
.delib-depth {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--silver-dim, #9aa2ad);
}
.delib-depth--deep { color: var(--gold, #FFD700); border-color: rgba(255,215,0,.4); }
.delib-depth--off { opacity: 0.6; }
.delib-tier {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  max-width: var(--content-width);
  margin: 0 auto 2rem;
  padding: 0 1rem;
}
.delib-tier__seat {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 1px;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(255,215,0,.06);
  border: 1px solid rgba(255,215,0,.35);
  color: var(--gold, #FFD700);
}
.delib-records {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.9rem;
  max-width: var(--content-width);
  margin: 0 auto 2rem;
  padding: 0 1rem;
}
.delib-record {
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--accent, #C0C0C0);
  text-align: left;
}
.delib-record__meta {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.8px;
  color: var(--accent, var(--silver-dim, #9aa2ad));
}
.delib-record__q {
  margin: 0.5rem 0 0.7rem;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--white, #fff);
  overflow-wrap: anywhere;
}
.delib-record__label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold, #FFD700);
}
.delib-record__text {
  margin: 0.2rem 0 0.7rem;
  line-height: 1.6;
  color: var(--silver, #E8E4D0);
  overflow-wrap: anywhere;
}
:root[data-theme="light"] .delib-days__n,
:root[data-theme="light"] .delib-record__q { color: #2c2c33; }
:root[data-theme="light"] .delib-record__text { color: #3d3d46; }
:root[data-theme="light"] .delib-record { background: rgba(0,0,0,.025); border-color: rgba(0,0,0,.1); border-left-color: var(--accent, #888); }
:root[data-theme="light"] .delib-depth { border-color: rgba(0,0,0,.18); }
:root[data-theme="light"] .delib-depth--deep,
:root[data-theme="light"] .delib-tier__seat,
:root[data-theme="light"] .delib-record__label { color: #8a6d00; }

/* ═══════════════════════════════════════════════════════════
   SKILLS GRAPH PAGE
   ═══════════════════════════════════════════════════════════ */
.skills-graph {
  position: relative;
  width: 100%;
  min-height: 600px;
  background: var(--obsidian);
  border: 1px solid var(--smoke-light);
  border-radius: 12px;
  overflow: hidden;
}
.skills-graph canvas {
  width: 100%;
  height: 600px;
  cursor: grab;
}
.skills-graph canvas:active {
  cursor: grabbing;
}
.skills-graph__legend {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-family: var(--font-accent);
}
.skills-graph__legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--silver-dim);
}
.skills-graph__legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.skills-graph__info {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--smoke);
  border: 1px solid var(--smoke-light);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  min-width: 200px;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.skills-graph__info.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.skills-graph__info-title {
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 1rem;
  margin-bottom: 0.25rem;
}
.skills-graph__info-cat {
  font-family: var(--font-accent);
  font-size: 0.7rem;
  color: var(--neon);
  margin-bottom: 0.5rem;
}
.skills-graph__info-desc {
  font-size: 0.85rem;
  color: var(--silver-dim);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════
   NEW PAGE LIGHT THEME OVERRIDES
   ═══════════════════════════════════════════════════════════ */
body.theme-light .gallery-card,
body.theme-light .timeline-item__content,
body.theme-light .dash-card,
body.theme-light .skills-graph__info,
body.theme-light .bookshelf-tooltip {
  background: #FFF;
  border-color: #E8E8E8;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
body.theme-light .skills-graph {
  background: #F5F5F5;
  border-color: #E8E8E8;
}
body.theme-light .dash-log {
  background: #F5F5F5;
  border-color: #E8E8E8;
}
body.theme-light .back-to-top,
body.theme-light .share-btn {
  background: #FFF;
  border-color: #E8E8E8;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — NEW ELEMENTS
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .book { width: 35px; height: 110px; }
  .share-btn { right: 5rem; bottom: 1.5rem; width: 40px; height: 40px; }
  .back-to-top { bottom: 1.5rem; right: 1.5rem; width: 40px; height: 40px; }
  .share-btn--toast { right: 5rem; bottom: 5rem; }
  .skills-graph canvas { height: 400px; }
  .cmd-palette__dialog { width: 95vw; }
  .cmd-palette { padding-top: 8vh; }
}

/* ═══════════════════════════════════════════════════════════
   SKIP LINK
   ═══════════════════════════════════════════════════════════ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--gold, #FFD700);
  color: #0B0B0B;
  padding: 0.75rem 1.5rem;
  z-index: 10000;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 0 0 0.5rem 0;
}
.skip-link:focus {
  top: 0;
}

/* ═══════════════════════════════════════════════════════════
   FOCUS-VISIBLE
   ═══════════════════════════════════════════════════════════ */
*:focus-visible {
  outline: 2px solid var(--gold, #FFD700);
  outline-offset: 2px;
}
.nav__links a:focus-visible {
  outline-offset: 4px;
}
button:focus-visible {
  outline: 2px solid var(--neon, #39FF14);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   SOUND TOGGLE
   ═══════════════════════════════════════════════════════════ */
.nav__sound-toggle {
  background: none;
  border: 1px solid var(--silver-dim, #C0C0C080);
  color: var(--silver, #C0C0C0);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  transition: color 0.2s, border-color 0.2s;
  line-height: 1;
}
.nav__sound-toggle:hover {
  color: var(--gold, #FFD700);
  border-color: var(--gold, #FFD700);
}
.nav__sound-toggle.active {
  color: var(--neon, #39FF14);
  border-color: var(--neon, #39FF14);
}

/* ═══════════════════════════════════════════════════════════
   PRINT STYLESHEET
   ═══════════════════════════════════════════════════════════ */
@media print {
  .nav, .global-particles, .intro-overlay, .scroll-progress,
  .back-to-top, .share-btn, .cursor-glow, .nav__sound-toggle,
  .nav__theme-toggle, .nav__menu-btn, .nav__github,
  .footer__glow, .bookshelf-tooltip, #cursor-glow {
    display: none !important;
  }
  body {
    background: #FFF !important;
    color: #000 !important;
    font-size: 12pt;
  }
  .page {
    display: none !important;
  }
  .page.active {
    display: block !important;
  }
  .page__inner {
    padding: 0 !important;
  }
  .footer {
    border-top: 1px solid #CCC;
    margin-top: 2rem;
    padding-top: 1rem;
  }
  .footer__emblems img {
    width: 30px;
    height: 30px;
  }
  .gallery-card__img, .dash-card__bar, .skills-graph canvas {
    break-inside: avoid;
  }
  a {
    color: #000;
    text-decoration: underline;
  }
}

/* ═══════════════════════════════════════════════════════════
   TAB HIDDEN — PAUSE ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
body.tab-hidden .aurora__layer,
body.tab-hidden .ambient-rune,
body.tab-hidden .footer__vitals-line,
body.tab-hidden .footer::before,
body.tab-hidden .pulse-slow,
body.tab-hidden .shimmer-gold {
  animation-play-state: paused;
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION — COMPREHENSIVE
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .shimmer-gold, .pulse-slow, .intro-fog, .intro-vignette,
  .footer__glow, .cursor-glow, .medieval-float, .glow-text,
  .ambient-rune, #mouse-trail, .aurora__layer, .hero-court__ring-outer,
  .hero-court__ring-inner, .footer__vitals-line {
    animation: none !important;
    display: none !important;
  }
  .page.active, .page-exit,
  .page-exit-crt, .page-exit-dissolve, .page-exit-page, .page-exit-glitch {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .cmd-palette__dialog {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   UI/UX ENHANCEMENT LAYER — Site-Wide Improvements
   ═══════════════════════════════════════════════════════════ */

/* ── Enhanced Body & Scroll ── */
body {
  scroll-padding-top: calc(var(--nav-height) + var(--space-lg));
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

::selection {
  background: var(--gold);
  color: var(--obsidian);
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--obsidian);
}

::-webkit-scrollbar-thumb {
  background: var(--smoke-light);
  border-radius: var(--radius-full);
  border: 2px solid var(--obsidian);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--emerald);
}

/* ── Enhanced Navigation ── */
.nav {
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.nav.scrolled {
  border-bottom-color: var(--silver-faint);
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.nav__links a {
  position: relative;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast), text-shadow var(--transition-base);
}

.nav__links a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon), transparent);
  border-radius: var(--radius-full);
  transition: transform var(--transition-smooth);
}

.nav__links a:hover::before,
.nav__links a.active::before {
  transform: translateX(-50%) scaleX(1);
}

.nav__links a:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.nav__brand {
  transition: transform var(--transition-base);
}

.nav__brand:hover {
  transform: scale(1.02);
}

.nav__actions button {
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-base);
}

.nav__actions button:hover {
  background: var(--smoke-light);
  transform: scale(1.05);
  box-shadow: var(--shadow-neon);
}

.nav__actions button:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
}

/* ── Enhanced Hero ── */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.8rem;
  border-radius: var(--radius-md);
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: transform var(--transition-base), box-shadow var(--transition-smooth), background var(--transition-base);
  position: relative;
  overflow: hidden;
}

.hero__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.hero__cta:hover::after {
  opacity: 1;
}

.hero__cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), 0 0 30px var(--neon-dim);
}

.hero__cta:active {
  transform: translateY(0);
}

.hero__cta--secondary:hover {
  box-shadow: var(--shadow-lg), 0 0 30px var(--gold-dim);
}

.hero__cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.hero__live-badge {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  border-radius: var(--radius-full);
}

.hero__live-badge:hover {
  transform: scale(1.02);
  box-shadow: 0 0 25px var(--neon-dim);
}

/* ── Enhanced Page Headers ── */
.page-header__title {
  letter-spacing: 3px;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
}

.page-header__subtitle {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

/* ── Enhanced Chapter Markers ── */
.chapter-marker {
  position: relative;
}

.chapter-marker__num {
  letter-spacing: 4px;
  font-size: 0.6rem;
}

.chapter-marker__title {
  letter-spacing: 2px;
}

/* ── Enhanced Crown Dividers ── */
.crown-divider {
  transition: transform var(--transition-base);
}

.crown-divider:hover {
  transform: scale(1.05);
}

.crown-divider .md-gem {
  transition: text-shadow var(--transition-base);
}

.crown-divider:hover .md-gem {
  text-shadow: 0 0 15px var(--gold), 0 0 30px var(--gold-dim);
}

/* ── Enhanced Constellation Cards ── */
.constellation-card {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
  will-change: transform;
}

.constellation-card:hover {
  box-shadow: var(--shadow-lg), 0 0 40px rgba(57, 255, 20, 0.05);
}

.constellation-card:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
}

.constellation-card__icon {
  transition: transform var(--transition-spring), text-shadow var(--transition-base);
}

.constellation-card:hover .constellation-card__icon {
  transform: scale(1.15);
  text-shadow: 0 0 20px currentColor;
}

.constellation-card__name {
  transition: color var(--transition-base);
}

.constellation-card__status {
  letter-spacing: 1px;
  transition: background var(--transition-base);
}

/* ── Enhanced Arsenal Cards ── */
.arsenal-card {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.arsenal-card:hover {
  box-shadow: var(--shadow-lg);
}

.arsenal-card__icon {
  transition: transform var(--transition-spring);
}

.arsenal-card:hover .arsenal-card__icon {
  transform: scale(1.1) rotate(5deg);
}

/* ── Enhanced Form Cards ── */
.form-card {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.form-card:hover {
  box-shadow: var(--shadow-lg), 0 0 30px rgba(255, 215, 0, 0.05);
}

.form-card__icon {
  transition: transform var(--transition-spring), text-shadow var(--transition-base);
}

.form-card:hover .form-card__icon {
  transform: scale(1.2);
  text-shadow: 0 0 20px var(--gold);
}

/* ── Enhanced Companion Cards ── */
.companion-card {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.companion-card:hover {
  box-shadow: var(--shadow-xl);
}

.companion-card--dragon:hover {
  box-shadow: var(--shadow-xl), 0 0 40px rgba(57, 255, 20, 0.08);
}

.companion-card--lion:hover {
  box-shadow: var(--shadow-xl), 0 0 40px rgba(255, 215, 0, 0.08);
}

.companion-card__icon {
  transition: transform var(--transition-spring);
}

.companion-card:hover .companion-card__icon {
  transform: scale(1.15);
}

/* ── Enhanced Pillar Cards ── */
.pillar-full {
  transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.pillar-full:hover {
  box-shadow: var(--shadow-md), 0 0 30px var(--gold-dim);
}

.pillar-full__letter {
  transition: transform var(--transition-spring), text-shadow var(--transition-base);
}

.pillar-full:hover .pillar-full__letter {
  transform: scale(1.1);
  text-shadow: 0 0 25px var(--gold);
}

.pillar-trio {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.pillar-trio:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.pillar-trio__icon {
  transition: transform var(--transition-spring);
}

.pillar-trio:hover .pillar-trio__icon {
  transform: scale(1.2);
}

/* ── Enhanced Hero Pillar Previews ── */
.hero-pillar {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
  cursor: pointer;
  user-select: none;
}

.hero-pillar:hover {
  box-shadow: var(--shadow-md), 0 0 25px var(--neon-dim);
}

.hero-pillar__letter {
  transition: transform var(--transition-spring), text-shadow var(--transition-base);
}

.hero-pillar:hover .hero-pillar__letter {
  transform: scale(1.3);
  text-shadow: 0 0 20px currentColor;
}

/* ── Enhanced Monarch Profile ── */
.monarch-profile {
  transition: box-shadow var(--transition-smooth);
}

.monarch-profile:hover {
  box-shadow: var(--shadow-lg), 0 0 40px var(--gold-dim);
}

.monarch-trait {
  transition: transform var(--transition-base), background var(--transition-base);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
}

.monarch-trait:hover {
  transform: translateX(4px);
  background: var(--smoke-light);
}

.monarch-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.5rem 1.2rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--silver-faint);
  font-family: var(--font-accent);
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all var(--transition-base);
}

.monarch-links a:hover {
  border-color: var(--neon);
  box-shadow: var(--shadow-neon);
  transform: translateY(-2px);
}

.monarch-links a:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
}

/* ── Enhanced Motto Cards ── */
.motto-card {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.motto-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-lg);
}

.motto-card__icon {
  transition: transform var(--transition-spring), text-shadow var(--transition-base);
}

.motto-card:hover .motto-card__icon {
  transform: scale(1.2) rotate(10deg);
  text-shadow: 0 0 15px currentColor;
}

/* ── Enhanced Saber Mode Cards ── */
.saber-mode {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.saber-mode:hover {
  box-shadow: var(--shadow-lg), 0 0 30px var(--gold-dim);
}

.saber-mode__icon {
  transition: transform var(--transition-spring);
}

.saber-mode:hover .saber-mode__icon {
  transform: scale(1.2) rotate(5deg);
}

/* ── Enhanced Monarch Arsenal Cards ── */
.monarch-arsenal__card {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.monarch-arsenal__card:hover {
  box-shadow: var(--shadow-md);
}

.monarch-arsenal__icon {
  transition: transform var(--transition-spring);
}

.monarch-arsenal__card:hover .monarch-arsenal__icon {
  transform: scale(1.15);
}

/* ── Enhanced Evolution Components ── */
.evo-file {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

.evo-file:hover {
  box-shadow: var(--shadow-md);
}

.evo-file__icon {
  transition: transform var(--transition-spring);
}

.evo-file:hover .evo-file__icon {
  transform: scale(1.15);
}

.evo-loop-v2__step {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.evo-loop-v2__step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.evo-metric {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.evo-metric:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.evo-anti {
  transition: transform var(--transition-smooth), border-color var(--transition-smooth);
}

.evo-anti:hover {
  transform: translateY(-2px);
}

.evo-infra__card {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.evo-infra__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ── Enhanced Roadmap ── */
.roadmap-phase {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.roadmap-phase:hover {
  box-shadow: var(--shadow-md);
}

.roadmap-phase--active {
  box-shadow: var(--shadow-md), 0 0 18px var(--neon-glow);
  animation: roadmapActiveGlow 3s ease-in-out infinite;
}

@keyframes roadmapActiveGlow {
  0%, 100% { opacity: 0.94; }
  50%      { opacity: 1; }
}

/* ── Enhanced Value Cards ── */
.value-card {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ── Enhanced Trait Items ── */
.trait {
  transition: transform var(--transition-base), background var(--transition-base);
  border-radius: var(--radius-sm);
}

.trait:hover {
  transform: translateX(4px);
  background: var(--smoke-light);
}

/* ── Enhanced Summon Cards ── */
.summon-card {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.summon-card:hover {
  box-shadow: var(--shadow-lg);
}

/* ── Enhanced Quote Blocks ── */
.quote-block {
  position: relative;
}

.quote-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: var(--radius-full);
}

.quote-block blockquote {
  transition: text-shadow var(--transition-smooth);
}

.quote-block:hover blockquote {
  text-shadow: 0 0 30px var(--gold-dim);
}

/* ── Enhanced Stats Strip ── */
.stats-strip__item {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
  border-radius: var(--radius-md);
}

.stats-strip__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.stats-strip__number {
  transition: text-shadow var(--transition-base);
}

.stats-strip__item:hover .stats-strip__number {
  text-shadow: 0 0 20px currentColor;
}

/* ── Enhanced Section Banners ── */
.section-banner {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.section-banner:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ── Enhanced Typed Terminal ── */
.typed-terminal {
  box-shadow: var(--shadow-lg);
}

.typed-terminal:hover {
  box-shadow: var(--shadow-xl), 0 0 40px rgba(57, 255, 20, 0.03);
}

/* ── Enhanced Architecture Diagram ── */
.arch-node {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.arch-node:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: var(--shadow-lg);
}

.arch-branch {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.arch-branch:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ── Enhanced Discord Widget ── */
.discord-widget {
  transition: box-shadow var(--transition-smooth);
}

.discord-widget:hover {
  box-shadow: var(--shadow-lg);
}

/* ── Enhanced Footer ── */
.footer__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--silver-faint);
  font-family: var(--font-accent);
  font-size: 0.65rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all var(--transition-base);
}

.footer__links a:hover {
  border-color: var(--neon);
  box-shadow: var(--shadow-neon);
  transform: translateY(-2px);
}

.footer__links a:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
}

.footer__emblem {
  transition: transform var(--transition-spring), box-shadow var(--transition-base);
  border-radius: var(--radius-md);
}

.footer__emblem:hover {
  transform: scale(1.1) translateY(-3px);
  box-shadow: var(--shadow-gold);
}

.footer__creed {
  transition: text-shadow var(--transition-smooth);
}

.footer:hover .footer__creed {
  text-shadow: 0 0 15px var(--silver-dim);
}

/* ── Enhanced Gallery ── */
.gallery-card {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.gallery-card:hover {
  box-shadow: var(--shadow-xl);
}

.gallery-card__tag {
  transition: background var(--transition-base), color var(--transition-base);
}

.gallery-card:hover .gallery-card__tag {
  background: var(--neon);
  color: var(--obsidian);
}

/* ── Enhanced Timeline ── */
.timeline-item {
  transition: transform var(--transition-smooth);
}

.timeline-item:hover {
  transform: translateX(5px);
}

.timeline-item__dot {
  transition: transform var(--transition-spring), box-shadow var(--transition-base);
}

.timeline-item:hover .timeline-item__dot {
  transform: scale(1.4);
  box-shadow: 0 0 15px currentColor;
}

/* ── Enhanced Cert Timeline ── */
.cert-milestone {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.cert-milestone:hover {
  transform: translateX(5px);
  box-shadow: var(--shadow-md);
}

.cert-milestone--highlight:hover {
  box-shadow: var(--shadow-md), 0 0 30px var(--gold-dim);
}

/* ── Enhanced Changelog ── */
.changelog__entry {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.changelog__entry:hover {
  transform: translateX(5px);
  box-shadow: var(--shadow-sm);
}

/* ── Enhanced Dashboard ── */
.dash-card {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.dash-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* ── Enhanced Bookshelf ── */
.bookshelf-tooltip {
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  pointer-events: none;
}

/* ── Enhanced Command Palette ── */
.cmd-palette__list a {
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), padding-left var(--transition-fast);
}

.cmd-palette__list a:hover,
.cmd-palette__list a.active {
  padding-left: 1.2rem;
}

/* ── Enhanced Back to Top ── */
.back-to-top {
  transition: transform var(--transition-spring), box-shadow var(--transition-base), opacity var(--transition-base);
}

.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-neon);
}

/* ── Enhanced Share Button ── */
.share-btn {
  transition: transform var(--transition-spring), box-shadow var(--transition-base);
}

.share-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-gold);
}

/* ── Enhanced Palette Cards (Crest) ── */
.palette-card {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.palette-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-lg);
}

/* ── Enhanced Duality Cards ── */
.duality__card {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.duality__card:hover {
  box-shadow: var(--shadow-lg);
}

/* ── Enhanced Etymology Cards ── */
.etymology__card {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.etymology__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ── Enhanced Ecosystem / Identity Cards ── */
.identity-hakim {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.identity-hakim:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ── Enhanced Oath Voices ── */
.oath-voice {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.oath-voice:hover {
  box-shadow: var(--shadow-md);
}

/* ── Enhanced Monarch Hero ── */
.monarch-hero__name {
  letter-spacing: 4px;
}

.monarch-hero__motto {
  transition: text-shadow var(--transition-smooth);
}

.monarch-hero:hover .monarch-hero__motto {
  text-shadow: 0 0 30px var(--gold-dim);
}

/* ── Enhanced Badge Wall ── */
.badge-wall img {
  border-radius: var(--radius-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.badge-wall img:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* ── Enhanced Intro Overlay ── */
.intro-agent {
  transition: transform var(--transition-smooth);
}

.intro-agent:hover {
  transform: scale(1.05);
}

/* ── Enhanced Buttons & Interactive ── */
.nav__sound-toggle,
.nav__theme-toggle {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-size: 1.1rem;
  background: transparent;
  border: 1px solid var(--silver-faint);
  color: var(--silver);
  cursor: pointer;
}

.nav__sound-toggle:hover,
.nav__theme-toggle:hover {
  border-color: var(--neon);
  color: var(--neon);
}

.nav__github {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid var(--silver-faint);
  transition: all var(--transition-base);
}

.nav__github svg {
  fill: var(--silver);
  transition: fill var(--transition-fast);
}

.nav__github:hover {
  border-color: var(--silver);
  background: var(--smoke-light);
}

.nav__github:hover svg {
  fill: var(--white);
}

/* ── Enhanced Hero Court Agent Links ── */
.hero-court__link {
  display: block;
  border-radius: var(--radius-lg);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.hero-court__link:hover {
  box-shadow: var(--shadow-xl);
}

/* ── Enhanced Skills Filter ── */
.skills-filter__btn {
  transition: all var(--transition-base);
  border-radius: var(--radius-full);
}

.skills-filter__btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.skills-filter__btn.active {
  box-shadow: var(--shadow-neon);
}

.skills-filter__search {
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  border-radius: var(--radius-md);
}

.skills-filter__search:focus {
  border-color: var(--neon);
  box-shadow: 0 0 15px var(--neon-dim);
  outline: none;
}

/* ── Enhanced Armory Filter ── */
.armory-filter__btn {
  transition: all var(--transition-base);
  border-radius: var(--radius-full);
}

.armory-filter__btn:hover {
  transform: translateY(-2px);
}

.armory-filter__btn.active {
  box-shadow: var(--shadow-neon);
}

/* ── Enhanced Armory Catalog Cards ── */
.armory-catalog__card {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.armory-catalog__card:hover {
  box-shadow: var(--shadow-md);
}

/* ── Enhanced Emoji/Symbol Icons ── */
.nav__icon {
  transition: transform var(--transition-spring);
  display: inline-block;
}

.nav__links a:hover .nav__icon {
  transform: scale(1.2) rotate(-5deg);
}

/* ── Smooth Scroll Progress ── */
.scroll-progress {
  transition: none;
  will-change: width;
}

/* ── Enhanced HAKIM Scene ── */
.hakim-scene {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.hakim-scene:hover {
  box-shadow: var(--shadow-lg);
}

/* ── Enhanced Intro Subtitle Animation ── */
.intro-title {
  text-shadow: 0 0 40px var(--gold-dim), 0 0 80px rgba(255, 215, 0, 0.1);
}

/* ── Page Section Polish ── */
.page-section {
  position: relative;
}

.page-section + .page-section {
  padding-top: var(--space-3xl);
}

/* ── Enhanced Link States ── */
a:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

button:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
}

/* ── Interactive Terminal Enhancement ── */
.terminal-page__input {
  caret-color: var(--neon);
}

.terminal-page__input:focus {
  outline: none;
  box-shadow: 0 0 10px var(--neon-dim);
}

/* ── Enhanced Cron Heatmap Cells ── */
.cron-heatmap [data-intensity] {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  border-radius: var(--radius-xs);
}

.cron-heatmap [data-intensity]:hover {
  transform: scale(1.3);
  z-index: 10;
  box-shadow: 0 0 10px currentColor;
}

/* ═══════════════════════════════════════════════════════════
   MISSING RESPONSIVE RULES
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .badge-wall {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
  }

  .badge-wall img {
    max-height: 22px;
  }

  .monarch-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
  }

  .monarch-links a {
    font-size: 0.6rem;
    padding: 0.4rem 0.8rem;
  }

  .footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
  }

  .footer__links a {
    font-size: 0.55rem;
    padding: 0.3rem 0.7rem;
  }

  .hero__cta {
    padding: 0.6rem 1.2rem;
    font-size: 0.65rem;
  }

  .hero__cta-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
  }

  .hero__intro {
    font-size: 0.85rem;
    padding: 0 var(--space-md);
  }

  .stats-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .mottos-grid {
    grid-template-columns: 1fr;
  }

  .saber-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .badge-wall img {
    max-height: 18px;
  }

  .stats-strip {
    grid-template-columns: 1fr 1fr;
  }

  .hero__tagline {
    font-size: 0.85rem;
    padding: 0 var(--space-md);
  }

  .subsection-title {
    font-size: 1.1rem;
  }

  .subsection-subtitle {
    font-size: 0.75rem;
  }

  .page-header__title {
    font-size: 1.6rem;
  }

  .monarch-hero__name {
    font-size: 1.8rem;
    letter-spacing: 2px;
  }

  .page-section {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .constellation-grid {
    grid-template-columns: 1fr;
  }

  .companions-grid {
    grid-template-columns: 1fr;
  }

  .forms-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 400px) {
  .monarch-hero__name {
    font-size: 1.4rem;
  }

  .hero__cta {
    padding: 0.5rem 1rem;
    font-size: 0.6rem;
    letter-spacing: 1px;
  }

  .page-header__title {
    font-size: 1.3rem;
  }

  .nav__brand-text {
    display: none;
  }

  .badge-wall {
    gap: 3px;
  }

  .badge-wall img {
    max-height: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME ENHANCEMENTS — Missing Coverage
   ═══════════════════════════════════════════════════════════ */

body.theme-light .timeline-item__content {
  background: #FFFFFF;
  border-color: #E0E0E0;
  color: #333;
}

body.theme-light .timeline-item__title {
  color: #1A1A1A;
}

body.theme-light .timeline-item__desc {
  color: #555;
}

body.theme-light .timeline-item__dot {
  border-color: #0A6B35;
}

body.theme-light .timeline-item__dot--gold {
  border-color: #9A7209;
}

body.theme-light .gallery-card__tag {
  background: #E8F5E9;
  color: #0A6B35;
}

body.theme-light .dash-card {
  background: #FFFFFF;
  border-color: #E0E0E0;
}

body.theme-light .dash-card__value {
  color: #1A1A1A;
}

body.theme-light .dash-card__label {
  color: #666;
}

body.theme-light .dash-card__bar {
  background: #E8E8E8;
}

body.theme-light .dash-card__bar-fill {
  background: linear-gradient(90deg, #0A6B35, #14A050);
}

body.theme-light .dash-log {
  background: #F5F5F5;
  border-color: #E0E0E0;
  color: #333;
}

body.theme-light .bookshelf-tooltip {
  background: #FFFFFF;
  color: #1A1A1A;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

body.theme-light .bookshelf-tooltip__title {
  color: #1A1A1A;
}

body.theme-light .bookshelf-tooltip__author {
  color: #555;
}

body.theme-light .skills-graph__info-title {
  color: #1A1A1A;
}

body.theme-light .skills-graph__info-cat {
  color: #0A6B35;
}

body.theme-light .skills-graph__info-desc {
  color: #555;
}

body.theme-light .badge-wall img {
  border-radius: var(--radius-sm);
}

body.theme-light .monarch-hero {
  background: linear-gradient(180deg, #F0F5F1 0%, #FFFFFF 100%);
}

body.theme-light .monarch-hero__name {
  color: #1A1A1A;
}

body.theme-light .monarch-hero__alias,
body.theme-light .monarch-hero__motto {
  color: #555;
}

body.theme-light .monarch-hero__crown {
  color: #9A7209;
}

body.theme-light .form-card {
  background: #FFFFFF;
  border-color: #E0E0E0;
}

body.theme-light .form-card__name {
  color: #1A1A1A;
}

body.theme-light .form-card__sub {
  color: #888;
}

body.theme-light .form-card__desc {
  color: #555;
}

body.theme-light .pillar-trio {
  background: #FFFFFF;
  border-color: #E0E0E0;
}

body.theme-light .pillar-trio__name {
  color: #1A1A1A;
}

body.theme-light .pillar-trio__desc {
  color: #555;
}

body.theme-light .companion-card {
  background: #FFFFFF;
  border-color: #E0E0E0;
}

body.theme-light .companion-card__name {
  color: #1A1A1A;
}

body.theme-light .companion-card__desc {
  color: #555;
}

body.theme-light .cmd-palette__dialog {
  background: #FFFFFF;
  border-color: #E0E0E0;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

body.theme-light .cmd-palette__input {
  background: #F5F5F5;
  border-color: #E0E0E0;
  color: #1A1A1A;
}

body.theme-light .cmd-palette__list a {
  color: #333;
}

body.theme-light .cmd-palette__list a:hover,
body.theme-light .cmd-palette__list a.active {
  background: #E8F5E9;
  color: #0A6B35;
}

body.theme-light .cron-heatmap [data-intensity] {
  border-color: #E0E0E0;
}

body.theme-light .typed-terminal {
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

body.theme-light ::-webkit-scrollbar-track {
  background: #F0F0F0;
}

body.theme-light ::-webkit-scrollbar-thumb {
  background: #CCC;
  border: 2px solid #F0F0F0;
}

body.theme-light ::-webkit-scrollbar-thumb:hover {
  background: #AAA;
}

/* ═══════════════════════════════════════════════════════════
   SMOOTH ENTRANCE KEYFRAMES
   ═══════════════════════════════════════════════════════════ */

@keyframes roadmapActiveGlow {
  0%, 100% { opacity: 0.94; }
  50%      { opacity: 1; }
}

@keyframes subtlePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Enhanced Reveal Transitions ── */
.reveal {
  will-change: transform, opacity;
}

.reveal.visible {
  animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.reveal-delay-1 { animation-delay: 0.08s; }
.reveal-delay-2 { animation-delay: 0.16s; }
.reveal-delay-3 { animation-delay: 0.24s; }
.reveal-delay-4 { animation-delay: 0.32s; }

/* ── Print Enhancement ── */
@media print {
  .nav, .scroll-progress, .back-to-top, .share-btn,
  .cmd-palette, .cursor-glow, .smoke-canvas,
  .global-particles, .ambient-runes, .medieval-layer,
  .aurora, #particles, .kbd-hint {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .page {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .page[data-page] {
    page-break-after: always;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .constellation-card, .arsenal-card, .form-card,
  .companion-card, .pillar-full, .motto-card {
    break-inside: avoid;
    border: 1px solid #CCC;
  }
}

/* ── Enhanced Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .constellation-card:hover,
  .arsenal-card:hover,
  .form-card:hover,
  .companion-card:hover,
  .pillar-trio:hover,
  .monarch-trait:hover,
  .motto-card:hover,
  .value-card:hover,
  .gallery-card:hover,
  .timeline-item:hover,
  .cert-milestone:hover,
  .changelog__entry:hover,
  .dash-card:hover,
  .roadmap-phase:hover,
  .evo-file:hover,
  .evo-loop-v2__step:hover,
  .evo-metric:hover,
  .arch-node:hover,
  .palette-card:hover {
    transform: none;
  }

  .scroll-progress {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   SUMMONING RITUAL — 4-PHASE CINEMATIC INTRO
   Phase 1: Letterbox + Darkness (0-0.5s)
   Phase 2: Rune Circle Draws (0.5-2.5s)
   Phase 3: Crown Materializes + Particle Burst (2.5-3.5s)
   Phase 4: Agents Summoned (3.5-5s)
   ═══════════════════════════════════════════════════════════ */

/* ── Letterbox Bars ── */
.intro-letterbox {
  position: absolute;
  left: 0;
  right: 0;
  height: 12vh;
  background: #000;
  z-index: 10;
  transition: height 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.intro-letterbox--top { top: 0; }
.intro-letterbox--bottom { bottom: 0; }
.intro-overlay.ritual-phase-4 .intro-letterbox,
.intro-overlay.fade-out .intro-letterbox {
  height: 0;
}

/* ── Rune Circle ── */
.intro-rune-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.3);
  width: min(85vw, 500px);
  height: min(85vw, 500px);
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.intro-overlay.ritual-phase-2 .intro-rune-circle {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.intro-rune-svg {
  width: 100%;
  height: 100%;
  animation: runeRotate 30s linear infinite;
}

@keyframes runeRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.intro-rune-path {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.intro-overlay.ritual-phase-2 .intro-rune-path {
  stroke-dashoffset: 0;
}

.intro-rune-glyph {
  opacity: 0;
  transition: opacity 0.8s ease 2s;
}
.intro-overlay.ritual-phase-2 .intro-rune-glyph {
  opacity: 0.6;
}

.intro-rune-orbit {
  opacity: 0;
  transition: opacity 0.6s ease 2.2s;
}
.intro-overlay.ritual-phase-2 .intro-rune-orbit {
  opacity: 0.15;
}

.intro-rune-orbiter {
  opacity: 0;
  transition: opacity 0.4s ease 2.4s;
}
.intro-overlay.ritual-phase-2 .intro-rune-orbiter {
  opacity: 0.6;
}

/* Pulse ring on rune circle */
.intro-rune-circle::after {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 1px solid var(--neon);
  opacity: 0;
  animation: runePulse 2s ease-in-out infinite;
}

@keyframes runePulse {
  0%, 100% { transform: scale(1); opacity: 0; }
  50% { transform: scale(1.05); opacity: 0.15; }
}

/* ── Crown Materialization ── */
.intro-crown-wrap {
  opacity: 0;
  transform: scale(0.5) translateY(20px);
  filter: blur(8px);
  transition: opacity 0.8s ease, transform 1s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.8s ease;
}
.intro-overlay.ritual-phase-3 .intro-crown-wrap {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0);
}

/* Crown golden glow burst */
.intro-crown-wrap::after {
  content: '';
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.6s ease 0.2s, transform 0.8s ease;
  transform: scale(0.5);
}
.intro-overlay.ritual-phase-3 .intro-crown-wrap::after {
  opacity: 1;
  transform: scale(1);
}

/* ── Agent Summoning ── */
.intro-agent {
  opacity: 0;
  transform: translateY(30px) scale(0.8);
  filter: blur(4px);
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.6s ease;
}
.intro-overlay.ritual-phase-4 .intro-agent {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.intro-overlay.ritual-phase-4 .intro-agent--hakim {
  transition-delay: 0.15s;
}

.intro-agent__divider {
  opacity: 0;
  transition: opacity 0.5s ease 0.3s;
}
.intro-overlay.ritual-phase-4 .intro-agent__divider {
  opacity: 1;
}

/* ── Title + Subtitle in ritual ── */
.intro-title {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  text-shadow: 0 0 40px var(--gold-dim), 0 0 80px rgba(255, 215, 0, 0.1);
}
.intro-overlay.ritual-phase-4 .intro-title {
  opacity: 1;
  transform: translateY(0);
}

.intro-subtitle,
.intro-latin {
  opacity: 0;
}
.intro-subtitle.visible,
.intro-latin.visible {
  opacity: 1;
}

/* ── Title golden shimmer sweep ── */
.intro-title::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
  transition: none;
}
.intro-overlay.ritual-phase-4 .intro-title::after {
  animation: titleShimmer 1.5s ease 0.3s;
}

@keyframes titleShimmer {
  from { left: -100%; }
  to { left: 200%; }
}

/* ── Intro Line ── */
.intro-line {
  opacity: 0;
  transform: scaleX(0);
  transition: opacity 0.5s ease 0.5s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}
.intro-overlay.ritual-phase-4 .intro-line {
  opacity: 1;
  transform: scaleX(1);
}

/* ── Fade Out Enhancement ── */
.intro-overlay.fade-out {
  animation: introDissolve 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes introDissolve {
  0% { opacity: 1; backdrop-filter: blur(0); }
  60% { opacity: 0.8; backdrop-filter: blur(2px); }
  100% { opacity: 0; backdrop-filter: blur(8px); }
}

/* ── Skip Button ── */
.intro-skip {
  position: absolute;
  bottom: 14vh;
  right: 3vw;
  font-family: var(--font-accent);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--silver-dim);
  background: transparent;
  border: 1px solid var(--silver-faint);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.5s ease 0.5s, color 0.3s, border-color 0.3s;
}
.intro-skip.visible {
  opacity: 1;
}
.intro-skip:hover {
  color: var(--gold);
  border-color: var(--gold-dim);
}

/* ── Reduced Motion Override for Ritual ── */
@media (prefers-reduced-motion: reduce) {
  .intro-rune-circle,
  .intro-crown-wrap,
  .intro-agent,
  .intro-title,
  .intro-line,
  .intro-letterbox,
  .intro-subtitle,
  .intro-latin {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .intro-rune-svg { animation: none !important; }
  .intro-overlay.ritual-phase-2 .intro-rune-circle,
  .intro-overlay.ritual-phase-3 .intro-crown-wrap,
  .intro-overlay.ritual-phase-4 .intro-agent,
  .intro-overlay.ritual-phase-4 .intro-title {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 2: FROSTED GLASS + WAX SEALS + ILLUMINATED INITIALS
   ═══════════════════════════════════════════════════════════ */

/* ── Frosted Glass Cards ── */
.constellation-card,
.arsenal-card,
.form-card,
.companion-card,
.pillar-trio,
.motto-card,
.value-card,
.evo-file,
.evo-loop-v2__step,
.evo-metric,
.evo-anti,
.evo-infra__card,
.summon-card,
.saber-mode,
.monarch-arsenal__card,
.roadmap-phase,
.palette-card,
.gallery-card,
.dash-card,
.timeline-item {
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(26, 26, 26, 0.82);
}

body.theme-light .constellation-card,
body.theme-light .arsenal-card,
body.theme-light .form-card,
body.theme-light .companion-card,
body.theme-light .pillar-trio,
body.theme-light .motto-card,
body.theme-light .value-card,
body.theme-light .evo-file,
body.theme-light .evo-loop-v2__step,
body.theme-light .evo-metric,
body.theme-light .evo-anti,
body.theme-light .evo-infra__card,
body.theme-light .summon-card,
body.theme-light .saber-mode,
body.theme-light .monarch-arsenal__card,
body.theme-light .roadmap-phase,
body.theme-light .palette-card,
body.theme-light .gallery-card,
body.theme-light .dash-card,
body.theme-light .timeline-item {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.06);
}

/* ── Wax Seal Dividers ── */
.crown-divider--wax {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 1.5rem 0;
  position: relative;
}

.crown-divider--wax::before,
.crown-divider--wax::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

.wax-seal {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e8a000, #c88400, #a06800);
  box-shadow:
    inset 0 2px 4px rgba(255, 215, 0, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 0 20px var(--gold-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #3a1f00;
  text-shadow: 0 1px 0 rgba(255, 215, 0, 0.3);
  flex-shrink: 0;
  transition: transform var(--transition-spring), box-shadow var(--transition-base);
  cursor: default;
  user-select: none;
  position: relative;
  margin: 0 1rem;
}

.wax-seal::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px solid rgba(255, 215, 0, 0.2);
}

.wax-seal:hover {
  transform: scale(1.15) rotate(5deg);
  box-shadow:
    inset 0 2px 4px rgba(255, 215, 0, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 4px 16px rgba(0, 0, 0, 0.5),
    0 0 30px var(--gold-dim);
}

.wax-seal--emerald {
  background: radial-gradient(circle at 35% 35%, #0a6b35, #034732, #021f18);
  box-shadow:
    inset 0 2px 4px rgba(57, 255, 20, 0.2),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 0 20px var(--neon-dim);
  color: #39FF14;
  text-shadow: 0 0 8px var(--neon-dim);
}

.wax-seal--emerald::after {
  border-color: rgba(57, 255, 20, 0.15);
}

.wax-seal--emerald:hover {
  box-shadow:
    inset 0 2px 4px rgba(57, 255, 20, 0.2),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 4px 16px rgba(0, 0, 0, 0.5),
    0 0 30px var(--neon-dim);
}

/* ── Illuminated Manuscript Initials ── */
.hero-pillar__letter,
.pillar-full__letter,
.hakim-pillar__letter {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--gold);
  border: 2px solid var(--gold-dim);
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), transparent);
  text-shadow: 0 0 15px var(--gold-dim);
  box-shadow:
    inset 0 0 20px rgba(255, 215, 0, 0.05),
    0 0 15px var(--gold-dim);
}

.hero-pillar__letter::before,
.pillar-full__letter::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid var(--gold-dim);
  border-radius: 6px;
  opacity: 0.3;
}

.hero-pillar--hakim .hero-pillar__letter,
.pillar-full--hakim .pillar-full__letter {
  color: #50c878;
  border-color: rgba(80, 200, 120, 0.3);
  text-shadow: 0 0 15px rgba(80, 200, 120, 0.3);
  box-shadow:
    inset 0 0 20px rgba(80, 200, 120, 0.05),
    0 0 15px rgba(80, 200, 120, 0.15);
  background: linear-gradient(135deg, rgba(80, 200, 120, 0.08), transparent);
}

/* ── Candle Flicker Effect ── */
@keyframes candleFlicker {
  0%, 100% { opacity: 1; }
  10% { opacity: 0.985; }
  20% { opacity: 1; }
  30% { opacity: 0.99; }
  40% { opacity: 1; }
  50% { opacity: 0.975; }
  60% { opacity: 1; }
  70% { opacity: 0.995; }
  80% { opacity: 1; }
  90% { opacity: 0.985; }
}

.intro-agent__logo-wrap,
.hero-court__logo-wrap {
  animation: candleFlicker 4s ease-in-out infinite;
}

/* ── Parchment Texture Overlay on Cards ── */
.constellation-card::before,
.arsenal-card::before,
.pillar-full::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════════════════════════════════════
   ACHIEVEMENT SYSTEM — TOASTS & BADGES
   ═══════════════════════════════════════════════════════════ */

.achievement-toast-container {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
}

.achievement-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(20, 20, 20, 0.97);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 20px var(--gold-dim);
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
  pointer-events: auto;
  max-width: 340px;
}

.achievement-toast.visible {
  transform: translateX(0);
  opacity: 1;
}

.achievement-toast__icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.15), transparent);
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  text-shadow: 0 0 10px var(--gold);
}

.achievement-toast__body {
  flex: 1;
  min-width: 0;
}

.achievement-toast__label {
  font-family: var(--font-accent);
  font-size: 0.55rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.7;
  margin-bottom: 2px;
}

.achievement-toast__name {
  font-family: var(--font-title);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 1px;
}

.achievement-toast__desc {
  font-size: 0.7rem;
  color: var(--silver-dim);
  line-height: 1.3;
}

/* Achievement Panel (used in stats/achievements pages) */
.achievement-panel {
  max-width: 800px;
  margin: 0 auto;
}

.achievement-panel__header {
  text-align: center;
  margin-bottom: 2rem;
}

.achievement-panel__title {
  font-family: var(--font-title);
  font-size: 1.4rem;
  color: var(--gold);
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
}

.achievement-panel__count {
  font-family: var(--font-accent);
  font-size: 0.7rem;
  color: var(--neon);
  letter-spacing: 2px;
  margin-bottom: 0.8rem;
}

.achievement-panel__bar {
  width: 100%;
  max-width: 400px;
  height: 4px;
  background: var(--smoke-light);
  border-radius: var(--radius-full);
  margin: 0 auto;
  overflow: hidden;
}

.achievement-panel__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--neon), var(--gold));
  border-radius: var(--radius-full);
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.achievement-panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.achievement-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--smoke);
  border: 1px solid var(--silver-faint);
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.achievement-badge:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.achievement-badge--unlocked {
  border-color: var(--gold-dim);
  background: rgba(255, 215, 0, 0.03);
}

.achievement-badge--unlocked:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}

.achievement-badge__icon {
  font-size: 1.4rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--smoke-light);
  opacity: 0.3;
}

.achievement-badge--unlocked .achievement-badge__icon {
  opacity: 1;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.1), transparent);
  color: var(--gold);
  text-shadow: 0 0 8px var(--gold-dim);
}

.achievement-badge__name {
  font-family: var(--font-title);
  font-size: 0.85rem;
  color: var(--silver-dim);
  letter-spacing: 0.5px;
}

.achievement-badge--unlocked .achievement-badge__name {
  color: var(--white);
}

.achievement-badge__desc {
  font-size: 0.7rem;
  color: var(--silver-faint);
  line-height: 1.3;
  margin-top: 2px;
}

.achievement-badge__hint {
  color: var(--accent-gold);
  opacity: 0.6;
  font-style: italic;
}

.achievement-badge--unlocked .achievement-badge__desc {
  color: var(--silver-dim);
}

@media (max-width: 600px) {
  .achievement-toast {
    max-width: 280px;
    padding: 10px 12px;
  }
  .achievement-panel__grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════
   POLISH: SHELF (BOOKSHELF)
   ═══════════════════════════════════════════════════════════ */
.book {
  box-shadow: 2px 2px 8px rgba(0,0,0,0.3), inset -2px 0 4px rgba(0,0,0,0.15);
}
.book::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 8px;
  background: linear-gradient(to left, rgba(0,0,0,0.15), transparent);
  border-radius: 0 6px 6px 0;
  pointer-events: none;
}
.book:hover {
  transform: translateY(-20px) rotate(-3deg) scale(1.05);
  box-shadow: 0 12px 35px rgba(0,0,0,0.5), 0 0 15px rgba(255,215,0,0.1);
}
.bookshelf-tooltip {
  background: rgba(28,28,28,0.97);
  border: 1px solid var(--gold-dim);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.bookshelf-shelf {
  position: relative;
}
.bookshelf-shelf::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 5%;
  right: 5%;
  height: 6px;
  background: linear-gradient(to bottom, rgba(74,55,40,0), rgba(74,55,40,0.6));
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   POLISH: GALLERY
   ═══════════════════════════════════════════════════════════ */
.gallery-grid {
  gap: 1.5rem;
}
.gallery-card {
  box-shadow: 0 4px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
}
.gallery-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(57,255,20,0.03), transparent 30%);
  animation: gallery-shimmer 8s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes gallery-shimmer {
  to { transform: rotate(360deg); }
}
.gallery-card__img--svg {
  position: relative;
  overflow: hidden;
  background-size: cover;
}
.gallery-card__img--svg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.gallery-card__img--svg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, var(--obsidian), transparent);
  pointer-events: none;
  z-index: 1;
}
.gallery-card__img--svg svg {
  position: relative;
  z-index: 0;
  filter: drop-shadow(0 0 6px currentColor);
  transition: filter 0.4s ease;
}
.gallery-card:hover .gallery-card__img--svg svg {
  filter: drop-shadow(0 0 12px currentColor) drop-shadow(0 0 3px currentColor);
}
.gallery-card__body {
  border-top: 1px solid rgba(255,255,255,0.06);
  position: relative;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(11,11,11,0.5), var(--obsidian));
}
.gallery-card__title {
  letter-spacing: 0.04em;
  text-shadow: 0 0 20px rgba(57,255,20,0.1);
}
.gallery-card__desc {
  line-height: 1.6;
}
.gallery-card__tag {
  border: 1px solid rgba(57,255,20,0.2);
  background: rgba(57,255,20,0.08);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.65rem;
  padding: 0.2em 0.7em;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.gallery-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 20px 60px rgba(57,255,20,0.15), 0 0 0 1px rgba(57,255,20,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
  border-color: rgba(57,255,20,0.15);
}
.gallery-card:hover .gallery-card__tag {
  background: var(--neon);
  color: var(--obsidian);
  border-color: var(--neon);
  box-shadow: 0 0 10px rgba(57,255,20,0.3);
}
.gallery-card__img:not(.gallery-card__img--svg) {
  position: relative;
}
.gallery-card__img:not(.gallery-card__img--svg)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(11,11,11,0.8));
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   POLISH: DASHBOARD CARDS
   ═══════════════════════════════════════════════════════════ */
.dash-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.dash-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--neon), var(--emerald));
  opacity: 0;
  transition: opacity 0.3s;
}
.dash-card:hover::before {
  opacity: 1;
}
.dash-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(57,255,20,0.08);
  border-color: var(--neon-dim);
}
.dash-card__value {
  text-shadow: 0 0 20px var(--neon-glow);
  letter-spacing: 0.02em;
}
.dash-card__icon {
  filter: drop-shadow(0 0 4px rgba(57,255,20,0.2));
}
.dash-card__bar {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: rgba(11,11,11,0.6);
}
.dash-card__bar-fill {
  position: relative;
  border-radius: 4px;
  box-shadow: 0 0 8px var(--neon-glow);
}
.dash-card__bar-fill::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 20px;
  background: linear-gradient(to left, rgba(255,255,255,0.2), transparent);
  border-radius: 0 4px 4px 0;
}
.dash-card__detail {
  padding-top: 0.25rem;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.dash-cpu-chart__bar {
  box-shadow: 0 0 4px rgba(57,255,20,0.15);
}

/* ═══════════════════════════════════════════════════════════
   POLISH: SKILLS GRAPH
   ═══════════════════════════════════════════════════════════ */
.skills-graph {
  border: 1px solid rgba(57,255,20,0.1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3), inset 0 0 60px rgba(57,255,20,0.02);
}
.skills-graph::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(57,255,20,0.03), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255,215,0,0.02), transparent 40%);
  pointer-events: none;
  z-index: 1;
}
.skills-graph canvas {
  position: relative;
  z-index: 2;
}
.skills-graph__legend {
  background: rgba(11,11,11,0.9);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  z-index: 3;
}
.skills-graph__legend-dot {
  box-shadow: 0 0 6px currentColor;
}
.skills-graph__info {
  background: rgba(28,28,28,0.96);
  border: 1px solid rgba(255,215,0,0.15);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  z-index: 3;
}

/* ═══════════════════════════════════════════════════════════
   POLISH: CHRONICLE — TIMELINE + ROADMAP + CHANGELOG
   ═══════════════════════════════════════════════════════════ */
.timeline-item__content {
  background: rgba(28,28,28,0.4);
  border: 1px solid rgba(57,255,20,0.06);
  border-radius: 10px;
  padding: 1.2rem 1.4rem;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.timeline-item__content:hover {
  border-color: var(--neon-dim);
  box-shadow: 0 4px 20px rgba(57,255,20,0.06);
}
.timeline-item:nth-child(odd) .timeline-item__content:hover {
  transform: translateX(4px);
}
.timeline-item:nth-child(even) .timeline-item__content:hover {
  transform: translateX(-4px);
}
.timeline-item__dot {
  box-shadow: 0 0 12px var(--neon-glow), 0 0 4px var(--neon);
  transition: transform 0.3s;
}
.timeline-item:hover .timeline-item__dot {
  transform: translateX(-50%) scale(1.3);
}
.timeline-item__dot--gold {
  box-shadow: 0 0 12px var(--gold-dim), 0 0 4px var(--gold);
}
.changelog__body {
  background: rgba(28,28,28,0.72);
}
.changelog__body:hover {
  border-color: var(--neon-dim);
  transform: translateX(6px);
  box-shadow: 0 4px 20px rgba(57,255,20,0.06);
}
.changelog__entry::before {
  box-shadow: 0 0 6px var(--neon-glow);
  transition: transform 0.3s, box-shadow 0.3s;
}
.changelog__entry:hover::before {
  transform: scale(1.3);
  box-shadow: 0 0 10px var(--neon-glow);
}
.changelog__files {
  padding: 0.3rem 0.6rem;
  background: rgba(57,255,20,0.04);
  border-radius: 4px;
  border: 1px solid rgba(57,255,20,0.08);
  display: inline-block;
}
.chapter-marker {
  text-align: center;
  margin-bottom: 2rem;
  padding: 1.5rem 0;
}
.chapter-marker__num {
  font-family: var(--font-accent);
  font-size: 0.7rem;
  letter-spacing: 4px;
  color: var(--neon);
  text-transform: uppercase;
}
.chapter-marker__line {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 0.75rem auto;
}
.chapter-marker__title {
  font-family: var(--font-title);
  font-size: 1.8rem;
  color: var(--gold);
  letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME: POLISH ADDITIONS
   ═══════════════════════════════════════════════════════════ */
body.theme-light .timeline-item__content {
  background: rgba(255,255,255,0.6);
  border-color: rgba(0,0,0,0.06);
}
body.theme-light .timeline-item__content:hover {
  border-color: var(--emerald);
}
body.theme-light .changelog__body {
  background: rgba(255,255,255,0.6);
}
body.theme-light .dash-card::before {
  background: linear-gradient(90deg, var(--emerald), var(--gold));
}
body.theme-light .bookshelf-shelf {
  background: linear-gradient(to bottom, #c4a882, #a88b6a);
}
body.theme-light .book {
  box-shadow: 2px 2px 8px rgba(0,0,0,0.1), inset -2px 0 4px rgba(0,0,0,0.05);
}
body.theme-light .gallery-card {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
body.theme-light .skills-graph {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* ═══════════════════════════════════════════════════════════
   POLISH: CONSTELLATION CARDS (40+ instances)
   ═══════════════════════════════════════════════════════════ */
.constellation-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.05);
  transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
}
.constellation-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}
.constellation-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 48px rgba(57,255,20,0.12), 0 0 0 1px rgba(57,255,20,0.15);
  border-color: rgba(57,255,20,0.15);
}
.constellation-card:hover::before {
  opacity: 1;
}
.constellation-card:hover .constellation-card__icon {
  text-shadow: 0 0 25px currentColor;
  transform: scale(1.2);
}
.constellation-card--phantom {
  border: 1px solid rgba(255,215,0,0.08);
}
.constellation-card--phantom::before {
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.constellation-card--phantom:hover {
  box-shadow: 0 16px 48px rgba(255,215,0,0.1), 0 0 0 1px rgba(255,215,0,0.15);
  border-color: rgba(255,215,0,0.15);
}

/* ═══════════════════════════════════════════════════════════
   POLISH: SUMMON CARDS (30+ instances)
   ═══════════════════════════════════════════════════════════ */
.summon-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.04);
  transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
}
.summon-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--neon), var(--emerald), var(--gold));
  opacity: 0;
  transition: opacity 0.4s;
}
.summon-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(57,255,20,0.08), 0 0 0 1px rgba(57,255,20,0.1);
  border-color: rgba(57,255,20,0.1);
}
.summon-card:hover::after {
  opacity: 1;
}
.summon-card__mode {
  letter-spacing: 0.06em;
  text-shadow: 0 0 15px rgba(57,255,20,0.15);
}

/* ═══════════════════════════════════════════════════════════
   POLISH: ARSENAL CARDS (42 instances)
   ═══════════════════════════════════════════════════════════ */
.arsenal-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 18px rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.04);
  transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
}
.arsenal-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, var(--neon), var(--emerald));
  opacity: 0;
  transition: opacity 0.4s;
}
.arsenal-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 40px rgba(57,255,20,0.1), 0 0 0 1px rgba(57,255,20,0.12);
  border-color: rgba(57,255,20,0.1);
}
.arsenal-card:hover::before {
  opacity: 1;
}
.arsenal-card__icon {
  filter: drop-shadow(0 0 4px currentColor);
  transition: filter 0.3s, transform 0.3s;
}
.arsenal-card:hover .arsenal-card__icon {
  filter: drop-shadow(0 0 10px currentColor);
  transform: scale(1.15);
}
.arsenal-card--hakim::before {
  background: linear-gradient(to bottom, var(--gold), #c9a227);
}
.arsenal-card--hakim:hover {
  box-shadow: 0 14px 40px rgba(255,215,0,0.08), 0 0 0 1px rgba(255,215,0,0.12);
  border-color: rgba(255,215,0,0.1);
}
.arsenal-card__features li {
  position: relative;
  padding-left: 1rem;
}
.arsenal-card__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--neon-dim);
}
.arsenal-card--hakim .arsenal-card__features li::before {
  background: var(--gold-dim);
}

/* ═══════════════════════════════════════════════════════════
   POLISH: TRAIT + VALUE CARDS (32 instances)
   ═══════════════════════════════════════════════════════════ */
.trait {
  position: relative;
  padding-left: 1rem;
  border-left: 2px solid rgba(57,255,20,0.15);
  transition: all 0.3s ease;
}
.trait:hover {
  border-left-color: var(--neon);
  background: rgba(57,255,20,0.03);
  transform: translateX(4px);
}
.trait__label {
  letter-spacing: 0.04em;
}
.value-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}
.value-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--neon), var(--gold));
  opacity: 0;
  transition: opacity 0.3s;
}
.value-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2), 0 0 0 1px rgba(57,255,20,0.08);
  border-color: rgba(57,255,20,0.08);
}
.value-card:hover::after {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   POLISH: EVO FILE CARDS (12 instances)
   ═══════════════════════════════════════════════════════════ */
.evo-file {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 2px 14px rgba(0,0,0,0.15);
  transition: all 0.35s ease;
}
.evo-file::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--neon);
  opacity: 0.3;
  transition: opacity 0.3s;
}
.evo-file:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(57,255,20,0.08), 0 0 0 1px rgba(57,255,20,0.1);
  border-color: rgba(57,255,20,0.1);
}
.evo-file:hover::before {
  opacity: 1;
}
.evo-file:nth-child(n+7)::before {
  background: var(--gold);
}

/* ═══════════════════════════════════════════════════════════
   POLISH: DUALITY COMPARISON (3 pages)
   ═══════════════════════════════════════════════════════════ */
.duality__card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
  transition: all 0.4s ease;
}
.duality__card--wazir {
  border-left: 3px solid rgba(57,255,20,0.2);
}
.duality__card--hakim {
  border-left: 3px solid rgba(255,215,0,0.2);
}
.duality__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.duality__card--wazir:hover {
  border-left-color: var(--neon);
  box-shadow: 0 10px 30px rgba(57,255,20,0.08);
}
.duality__card--hakim:hover {
  border-left-color: var(--gold);
  box-shadow: 0 10px 30px rgba(255,215,0,0.08);
}
.duality__vs {
  position: relative;
}
.duality__vs::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,0.08), transparent 70%);
  animation: duality-pulse 3s ease-in-out infinite;
}
@keyframes duality-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   POLISH: QUOTE BLOCKS (12+ pages)
   ═══════════════════════════════════════════════════════════ */
.quote-block {
  position: relative;
  padding: 1.5rem 0 1.5rem 1.5rem;
  border-left: 2px solid rgba(255,215,0,0.2);
}
.quote-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: -1px;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  opacity: 0.3;
}
.quote-block blockquote {
  font-style: italic;
  position: relative;
  transition: all 0.3s ease;
}
.quote-block blockquote::before {
  content: '\201C';
  position: absolute;
  top: -0.5em;
  left: -0.3em;
  font-size: 2em;
  color: var(--gold-dim);
  opacity: 0.3;
  font-style: normal;
}
.quote-block:hover blockquote {
  text-shadow: 0 0 25px rgba(255,215,0,0.1);
}

/* ═══════════════════════════════════════════════════════════
   POLISH: PILLAR CARDS (pillars page)
   ═══════════════════════════════════════════════════════════ */
.pillar-full {
  position: relative;
  transition: all 0.35s ease;
}
.pillar-full:hover {
  transform: translateX(4px);
}
.pillar-full__letter {
  text-shadow: 0 0 30px rgba(57,255,20,0.3);
  transition: text-shadow 0.4s;
}
.pillar-full:hover .pillar-full__letter {
  text-shadow: 0 0 50px rgba(57,255,20,0.5), 0 0 15px rgba(57,255,20,0.3);
}
.pillar-full__maxim {
  position: relative;
  padding-left: 1rem;
  border-left: 2px solid rgba(255,215,0,0.2);
  font-style: italic;
}
.hakim-pillar {
  position: relative;
  transition: all 0.35s ease;
}
.hakim-pillar:hover {
  transform: translateX(4px);
}
.hakim-pillar .pillar-full__letter,
.hakim-pillar__letter {
  text-shadow: 0 0 30px rgba(255,215,0,0.3);
  transition: text-shadow 0.4s;
}
.hakim-pillar:hover .pillar-full__letter,
.hakim-pillar:hover .hakim-pillar__letter {
  text-shadow: 0 0 50px rgba(255,215,0,0.5), 0 0 15px rgba(255,215,0,0.3);
}

/* ═══════════════════════════════════════════════════════════
   POLISH: SECTION BANNERS (global)
   ═══════════════════════════════════════════════════════════ */
.section-banner {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  transition: all 0.35s ease;
}
.section-banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon), transparent);
  opacity: 0.3;
}
.section-banner:hover {
  box-shadow: 0 8px 30px rgba(57,255,20,0.06);
  border-color: rgba(57,255,20,0.08);
}

/* ═══════════════════════════════════════════════════════════
   POLISH: ROADMAP PHASES (chronicle page)
   ═══════════════════════════════════════════════════════════ */
.roadmap-phase {
  position: relative;
  transition: all 0.35s ease;
}
.roadmap-phase:hover {
  transform: translateX(4px);
}
.roadmap-phase--active {
  border-color: rgba(57,255,20,0.15);
  box-shadow: 0 0 20px rgba(57,255,20,0.05);
}
.roadmap-phase--active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  box-shadow: 0 0 15px rgba(57,255,20,0.1);
  animation: roadmap-pulse 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes roadmap-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}
.roadmap-phase--future {
  border-style: dashed;
  opacity: 0.6;
}
.roadmap-phase--future:hover {
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════
   POLISH: STATS STRIP (stats page)
   ═══════════════════════════════════════════════════════════ */
.stats-strip__item {
  position: relative;
  transition: all 0.35s ease;
}
.stats-strip__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(57,255,20,0.08);
}
.stats-strip__value {
  text-shadow: 0 0 20px rgba(57,255,20,0.2);
}

/* ═══════════════════════════════════════════════════════════
   POLISH: MONARCH PAGE CARDS
   ═══════════════════════════════════════════════════════════ */
.form-card {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
  border: 1px solid rgba(255,255,255,0.04);
}
.form-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}
.form-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(255,215,0,0.08);
  border-color: rgba(255,215,0,0.1);
}
.form-card:hover::after {
  opacity: 1;
}
.companion-card {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
  border: 1px solid rgba(255,255,255,0.04);
}
.companion-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 36px rgba(0,0,0,0.2);
}
.saber-mode {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
  transition: all 0.35s ease;
}
.saber-mode::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,255,136,0.04), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}
.saber-mode:hover::before {
  left: 100%;
}
.saber-mode:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,255,136,0.06);
  border-color: rgba(0,255,136,0.1);
}
.motto-card {
  position: relative;
  padding-left: 1.2rem;
  border-left: 2px solid rgba(255,215,0,0.15);
  transition: all 0.3s ease;
}
.motto-card:hover {
  border-left-color: var(--gold);
  background: rgba(255,215,0,0.03);
  transform: translateX(4px);
}
.monarch-arsenal__card {
  position: relative;
  overflow: hidden;
  transition: all 0.35s ease;
  border: 1px solid rgba(255,255,255,0.04);
}
.monarch-arsenal__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(57,255,20,0.06);
  border-color: rgba(57,255,20,0.1);
}

/* ═══════════════════════════════════════════════════════════
   POLISH: EVO SYSTEM CARDS
   ═══════════════════════════════════════════════════════════ */
.evo-metric {
  border: 1px solid rgba(255,255,255,0.04);
  transition: all 0.3s ease;
}
.evo-metric:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.evo-anti {
  border: 1px solid rgba(255,50,50,0.08);
  transition: all 0.3s ease;
}
.evo-anti:hover {
  border-color: rgba(255,50,50,0.2);
  background: rgba(255,50,50,0.03);
  transform: translateY(-2px);
}
.evo-infra__card {
  border: 1px solid rgba(255,255,255,0.04);
  transition: all 0.3s ease;
}
.evo-infra__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(57,255,20,0.06);
  border-color: rgba(57,255,20,0.08);
}

/* ═══════════════════════════════════════════════════════════
   POLISH: OATH PAGE
   ═══════════════════════════════════════════════════════════ */
.manifesto {
  position: relative;
  padding-left: 1.5rem;
  border-left: 2px solid rgba(255,215,0,0.2);
}
.manifesto::before {
  content: '';
  position: absolute;
  top: 0;
  left: -1px;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  opacity: 0.3;
}
.oath-quote {
  position: relative;
  padding-left: 1rem;
  border-left: 2px solid rgba(255,255,255,0.06);
  transition: all 0.3s ease;
}
.oath-quote:hover {
  border-left-color: var(--gold-dim);
  background: rgba(255,215,0,0.02);
}
.oath-voice {
  position: relative;
}
.oath-voice img,
.oath-voice .oath-voice__avatar {
  box-shadow: 0 0 20px rgba(57,255,20,0.15);
  transition: box-shadow 0.3s;
}
.oath-voice:hover img,
.oath-voice:hover .oath-voice__avatar {
  box-shadow: 0 0 30px rgba(57,255,20,0.25);
}

/* ═══════════════════════════════════════════════════════════
   POLISH: CREST PAGE
   ═══════════════════════════════════════════════════════════ */
.palette-card {
  transition: all 0.35s ease;
  border: 1px solid rgba(255,255,255,0.04);
}
.palette-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.palette-card__swatch {
  box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
  transition: box-shadow 0.3s;
}
.palette-card:hover .palette-card__swatch {
  box-shadow: inset 0 0 10px rgba(0,0,0,0.3), 0 0 15px rgba(255,255,255,0.05);
}
.emblem-element {
  transition: all 0.3s ease;
}
.emblem-element:hover {
  transform: translateX(4px);
  background: rgba(255,255,255,0.02);
}

/* ═══════════════════════════════════════════════════════════
   POLISH: BLOODLINE PAGE — ELEMENT COLORS
   ═══════════════════════════════════════════════════════════ */
.constellation-card[data-element="fire"] {
  border-color: rgba(255,107,53,0.1);
}
.constellation-card[data-element="fire"]:hover {
  box-shadow: 0 16px 48px rgba(255,107,53,0.1);
  border-color: rgba(255,107,53,0.2);
}
.constellation-card[data-element="water"] {
  border-color: rgba(0,188,212,0.1);
}
.constellation-card[data-element="water"]:hover {
  box-shadow: 0 16px 48px rgba(0,188,212,0.1);
  border-color: rgba(0,188,212,0.2);
}
.constellation-card[data-element="air"] {
  border-color: rgba(192,192,192,0.1);
}
.constellation-card[data-element="air"]:hover {
  box-shadow: 0 16px 48px rgba(192,192,192,0.1);
  border-color: rgba(192,192,192,0.2);
}

/* ═══════════════════════════════════════════════════════════
   POLISH: NAV HOVER + ACTIVE STATE
   ═══════════════════════════════════════════════════════════ */
.nav__links a[data-route] {
  position: relative;
}
.nav__links a[data-route]::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--neon);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
.nav__links a[data-route]:hover::after,
.nav__links a[data-route][aria-current="page"]::after {
  width: 80%;
}
.nav__links a[data-route][aria-current="page"]::after {
  background: linear-gradient(90deg, var(--neon), var(--gold));
  box-shadow: 0 0 8px rgba(57,255,20,0.3);
}

/* ═══════════════════════════════════════════════════════════
   POLISH: DISCORD WIDGET (home page)
   ═══════════════════════════════════════════════════════════ */
.discord-widget {
  background: rgba(22, 22, 22, 0.92);
  border: 1px solid rgba(88,101,242,0.15);
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

/* ═══════════════════════════════════════════════════════════
   POLISH: ARCH DIAGRAM (home page)
   ═══════════════════════════════════════════════════════════ */
.arch-node {
  transition: all 0.3s ease;
}
.arch-node:hover {
  box-shadow: 0 0 20px rgba(57,255,20,0.15);
  transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════════
   POLISH: FOOTER VITALS ANIMATION
   ═══════════════════════════════════════════════════════════ */
.footer__vitals-line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: vitals-draw 3s ease forwards;
}
@keyframes vitals-draw {
  to { stroke-dashoffset: 0; }
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME: POLISH ADDITIONS
   ═══════════════════════════════════════════════════════════ */
body.theme-light .constellation-card {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
body.theme-light .constellation-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
body.theme-light .summon-card:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
body.theme-light .arsenal-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
body.theme-light .trait:hover {
  background: rgba(0,100,0,0.04);
}
body.theme-light .quote-block {
  border-left-color: rgba(180,140,20,0.2);
}
body.theme-light .roadmap-phase--future {
  opacity: 0.75;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE: POLISH ADDITIONS
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .timeline-item__content { padding: 0.9rem 1rem; }
  .chapter-marker__title { font-size: 1.4rem; }
  .duality__card { padding: 1rem; }
}
@media (max-width: 600px) {
  .chapter-marker__title { font-size: 1.2rem; }
  .chapter-marker__line { width: 40px; }
  .constellation-card:hover { transform: translateY(-3px) scale(1.01); }
  .arsenal-card:hover { transform: translateY(-3px); }
}

/* ═══════════════════════════════════════════════
   THE SOVEREIGN COUNCIL — council page + hero forging row
   Additive block (appended 2026-06-04). Per-element accent set
   inline as --accent / --accent-soft / --accent-glow (8-digit hex,
   matching the :root --neon-dim convention).
   ═══════════════════════════════════════════════ */

/* ── Overview: Court vs Council ── */
.council-overview { max-width: 760px; margin: 0 auto; text-align: center; }
.council-overview p { color: var(--text-primary); line-height: 1.7; margin-bottom: 1rem; }
.council-overview__lead { font-size: 1.15rem; }
.council-overview strong { color: var(--gold); font-weight: 600; }

.council-modes {
  display: flex; align-items: stretch; justify-content: center;
  gap: 1rem; margin-top: 2rem; flex-wrap: wrap;
}
.council-mode {
  flex: 1 1 280px; max-width: 360px;
  background: rgba(28,28,28,0.4);
  border: 1px solid var(--neon-dim);
  border-radius: var(--radius-md); padding: 1.5rem; text-align: center;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.council-mode:hover { border-color: var(--neon); box-shadow: 0 0 24px rgba(57,255,20,0.08); }
.council-mode__title {
  font-family: var(--font-accent); font-size: 0.85rem; letter-spacing: 3px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem;
}
.council-mode__desc { color: var(--text-primary); font-size: 0.95rem; line-height: 1.6; margin: 0; }
.council-mode__amp {
  display: flex; align-items: center; font-family: var(--font-title);
  font-size: 2rem; color: var(--gold); opacity: 0.6;
}
.council-overview .council-modes__oath {
  text-align: center; margin: 1.75rem auto 0;
  font-family: var(--font-title);
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold);
}
.council-modes__amp2 { color: var(--neon); opacity: 0.7; margin: 0 0.28em; font-weight: 400; }
.council-overview .council-modes__oath-gloss {
  text-align: center; margin: 0.5rem auto 0; max-width: 520px;
  font-size: 0.9rem; font-style: italic; color: var(--text-secondary);
}

/* ── The five council cards ── */
.council-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem; margin-top: 2rem;
}
.council-card {
  position: relative; overflow: hidden;
  background: rgba(28,28,28,0.45);
  border: 1px solid var(--accent-soft);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 1.8rem 1.5rem 1.5rem; text-align: center;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.council-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 0 34px var(--accent-glow);
}
.council-card__status {
  position: absolute; top: 0.8rem; right: 0.8rem;
  font-family: var(--font-accent); font-size: 0.6rem; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent-glow); border-radius: var(--radius-full);
  padding: 0.2rem 0.6rem;
}
.council-card--live .council-card__status { animation: council-live-pulse 2.4s ease-in-out infinite; }
@keyframes council-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.council-card__emblem {
  width: 92px; height: 92px; margin: 0.4rem auto 1rem;
  border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--accent-glow);
  box-shadow: 0 0 22px var(--accent-glow);
  background: radial-gradient(circle, var(--accent-soft), transparent 70%);
}
.council-card__img { width: 100%; height: 100%; object-fit: cover; }
.council-card__glyph {
  font-size: 2.4rem; line-height: 1;
  filter: drop-shadow(0 0 8px var(--accent-glow));
}
.council-card__house {
  font-family: var(--font-accent); font-size: 0.62rem; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.3rem;
}
.council-card__name {
  font-family: var(--font-title); font-size: 1.7rem; font-weight: 700;
  letter-spacing: 4px; color: var(--accent); margin: 0 0 0.2rem;
}
.council-card__ar { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.8rem; }
.council-card__axis {
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 600;
  color: var(--white); margin-bottom: 0.6rem;
}
.council-card__axis-glyph { margin-right: 0.3rem; }
.council-card__creed {
  font-family: var(--font-accent); font-size: 0.62rem; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent); line-height: 1.7;
  padding: 0.6rem 0; margin-bottom: 0.8rem;
  border-top: 1px solid var(--accent-soft);
  border-bottom: 1px solid var(--accent-soft);
}
.council-card__desc { color: var(--text-primary); font-size: 0.9rem; line-height: 1.6; margin: 0; }
.council-card__desc em { color: var(--accent); font-style: italic; }
.council-card__desc strong { color: var(--white); }
.council-card__meta {
  display: block; margin-top: 0.7rem;
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-secondary);
}
.council-card__link {
  display: inline-block; margin-top: 1rem;
  font-family: var(--font-accent); font-size: 0.7rem; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--accent); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color 0.25s;
}
.council-card__link:hover { border-bottom-color: var(--accent); }

/* ── Hero forging row (home hero) ── */
.hero-forging { margin: 2rem auto 0; max-width: 640px; text-align: center; }
.hero-forging__label {
  font-family: var(--font-accent); font-size: 0.62rem; letter-spacing: 3px;
  text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.9rem;
}
.hero-forging__row { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.hero-forging__agent { flex: 0 1 150px; }
.hero-forging__link { text-decoration: none; display: block; transition: transform 0.3s; }
.hero-forging__link:hover { transform: translateY(-3px); }
.hero-forging__medallion {
  width: 56px; height: 56px; margin: 0 auto 0.5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent-glow);
  background: radial-gradient(circle, var(--accent-soft), transparent 70%);
  box-shadow: 0 0 16px var(--accent-glow);
}
.hero-forging__glyph { font-size: 1.5rem; line-height: 1; filter: drop-shadow(0 0 6px var(--accent-glow)); }
.hero-forging__name {
  font-family: var(--font-title); font-size: 1rem; font-weight: 700;
  letter-spacing: 2px; color: var(--accent);
}
.hero-forging__role { font-size: 0.72rem; color: var(--text-secondary); margin-top: 0.15rem; }
.hero-forging__status {
  display: inline-block; margin-top: 0.4rem;
  font-family: var(--font-accent); font-size: 0.55rem; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent-glow); border-radius: var(--radius-full);
  padding: 0.12rem 0.5rem; opacity: 0.85;
}
@media (max-width: 520px) {
  .hero-forging__row { gap: 1rem; }
  .hero-forging__agent { flex: 0 1 100px; }
  .council-modes { gap: 0.75rem; }
  .council-mode__amp { display: none; }
}

/* ═══════════════════════════════════════════════
   FULL COURT RELEASE (2026-07-03)
   Court Orbit · Council Strip · Round Table ·
   Council Dossiers · Sealed Records · Footer Council
   ═══════════════════════════════════════════════ */

/* ── Court Orbit — eight seats around the throne ── */
.court-orbit {
  --orbit-r: 172px;
  position: absolute;
  top: calc(50% - 18px);
  left: 50%;
  width: 0;
  height: 0;
  z-index: 3;
  pointer-events: none;
  animation: courtOrbitSpin 150s linear infinite;
}

.court-orbit__seat {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 0;
  height: 0;
  text-decoration: none;
  pointer-events: auto;
  transform: rotate(var(--a)) translateY(calc(var(--orbit-r) * -1)) rotate(calc(var(--a) * -1));
}

.court-orbit__keel {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transform: translate(-50%, -50%);
  animation: courtKeelSpin 150s linear infinite;
}

.court-orbit:hover,
.court-orbit:focus-within { animation-play-state: paused; }
.court-orbit:hover .court-orbit__keel,
.court-orbit:focus-within .court-orbit__keel { animation-play-state: paused; }

@keyframes courtOrbitSpin { to { transform: rotate(360deg); } }
@keyframes courtKeelSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

.court-orbit__medallion {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(28, 28, 28, 0.95), rgba(11, 11, 11, 0.92));
  border: 1px solid var(--accent-soft);
  box-shadow: 0 0 14px var(--accent-soft), inset 0 0 8px rgba(0, 0, 0, 0.6);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.court-orbit__seat:hover .court-orbit__medallion,
.court-orbit__seat:focus-visible .court-orbit__medallion {
  transform: scale(1.14);
  border-color: var(--accent);
  box-shadow: 0 0 24px var(--accent-glow), inset 0 0 8px rgba(0, 0, 0, 0.5);
}

.court-orbit__seat:focus-visible { outline: none; }

.court-orbit__glyph { font-size: 1.35rem; line-height: 1; }

.court-orbit__img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

.court-orbit__name {
  font-family: var(--font-accent);
  font-size: 0.48rem;
  letter-spacing: 2px;
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-soft);
  white-space: nowrap;
}

.court-orbit__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.court-orbit__dot--live {
  background: var(--neon);
  box-shadow: 0 0 6px var(--neon);
  animation: courtSeatPulse 2.4s ease-in-out infinite;
}

.court-orbit__dot--forging {
  background: #ffa500;
  opacity: 0.55;
  animation: courtSeatEmber 5.5s ease-in-out infinite;
}

@keyframes courtSeatPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@keyframes courtSeatEmber {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.8; }
}

/* ── Council Strip — live entries & image medallions ── */
.hero-forging__img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.hero-forging__agent--live .hero-forging__medallion {
  border-color: var(--accent);
  box-shadow: 0 0 18px var(--accent-soft);
}

.hero-forging__status--live {
  opacity: 1;
  background: var(--accent-soft);
}

/* ── The Round Table — consultation & isolation map ── */
.round-table {
  max-width: 780px;
  margin: 1.75rem auto 0;
}

.round-table__svg {
  display: block;
  width: 100%;
  height: auto;
}

.rt-ring {
  fill: none;
  stroke: rgba(192, 192, 192, 0.12);
  stroke-width: 1;
  stroke-dasharray: 4 10;
}

.rt-edge {
  stroke-linecap: round;
  transition: opacity var(--transition-base), stroke-width var(--transition-base);
}

.rt-edge--full   { stroke: rgba(192, 192, 192, 0.42); stroke-width: 1.6; }
.rt-edge--scoped { stroke: rgba(192, 192, 192, 0.26); stroke-width: 1; stroke-dasharray: 5 6; }
.rt-edge--creds  { stroke: rgba(192, 192, 192, 0.2);  stroke-width: 0.8; stroke-dasharray: 1.5 5; }
.rt-edge--isolated { stroke: #ff4d6d; stroke-width: 2; opacity: 0.85; }

.rt-cut {
  fill: #ff4d6d;
  font-size: 15px;
  text-anchor: middle;
  font-family: var(--font-body);
  transition: opacity var(--transition-base);
}

.rt-throne__disc {
  fill: #0b0b0b;
  stroke: var(--gold-dim);
  stroke-width: 1.2;
}

.rt-throne__crown {
  fill: var(--gold);
  font-size: 32px;
  text-anchor: middle;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.35));
}

.rt-throne__label {
  fill: var(--silver-dim);
  font-family: var(--font-accent);
  font-size: 8px;
  letter-spacing: 3px;
  text-anchor: middle;
}

.rt-seat { cursor: pointer; }
.rt-seat:focus { outline: none; }

.rt-seat__disc {
  fill: #0b0b0b;
  stroke: var(--accent);
  stroke-width: 1.4;
  transition: stroke-width var(--transition-base), filter var(--transition-base);
}

.rt-seat--live .rt-seat__disc {
  filter: drop-shadow(0 0 9px var(--accent));
}

.rt-seat__glyph {
  font-size: 24px;
  text-anchor: middle;
}

.rt-seat__name {
  fill: var(--accent);
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 2px;
  text-anchor: middle;
}

.rt-seat:hover .rt-seat__disc,
.rt-seat:focus-visible .rt-seat__disc {
  stroke-width: 2.6;
  filter: drop-shadow(0 0 14px var(--accent));
}

.rt-seat,
.rt-cut { transition: opacity var(--transition-base); }

.round-table__svg.rt-focused .rt-edge { opacity: 0.06; }
.round-table__svg.rt-focused .rt-edge.rt-hot { opacity: 1; stroke-width: 2.1; }
.round-table__svg.rt-focused .rt-edge--isolated.rt-hot { stroke-width: 2.8; }
.round-table__svg.rt-focused .rt-cut { opacity: 0.15; }
.round-table__svg.rt-focused .rt-cut.rt-hot { opacity: 1; }
.round-table__svg.rt-focused .rt-seat { opacity: 0.3; }
.round-table__svg.rt-focused .rt-seat.rt-hot { opacity: 1; }

.round-table__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.4rem;
  margin-top: 1rem;
}

.rt-key {
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  color: var(--silver-dim);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.rt-key::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 0;
  border-top: 2px solid rgba(192, 192, 192, 0.45);
}

.rt-key--scoped::before { border-top-style: dashed; border-top-width: 1.5px; }
.rt-key--creds::before  { border-top-style: dotted; border-top-width: 2px; opacity: 0.7; }
.rt-key--isolated { color: #ff4d6d; }
.rt-key--isolated::before { border-top: 2px solid #ff4d6d; }

.round-table__law {
  max-width: 640px;
  margin: 1.25rem auto 0;
  padding: 0.9rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--silver);
  background: rgba(255, 77, 109, 0.06);
  border: 1px solid rgba(255, 77, 109, 0.25);
  border-left: 3px solid #ff4d6d;
  border-radius: var(--radius-md);
}

.round-table__law strong { color: #ff4d6d; letter-spacing: 0.5px; }

/* ── Council Dossiers ── */
.dossier__title {
  color: var(--accent);
  text-shadow: 0 0 30px var(--accent-glow);
}

.dossier__head {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.dossier__crest {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(28, 28, 28, 0.95), rgba(11, 11, 11, 0.9));
  border: 1px solid var(--accent-soft);
  box-shadow: 0 0 30px var(--accent-soft), inset 0 0 16px rgba(0, 0, 0, 0.55);
}

.dossier__glyph {
  font-size: 3rem;
  line-height: 1;
  filter: drop-shadow(0 0 12px var(--accent-glow));
}

.dossier__facts {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 1.5rem;
}

.dossier-fact {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.8rem;
  background: rgba(28, 28, 28, 0.45);
  border: 1px solid rgba(192, 192, 192, 0.1);
  border-radius: var(--radius-md);
}

.dossier-fact__k {
  font-family: var(--font-accent);
  font-size: 0.58rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--silver-dim);
}

.dossier-fact__v {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--white);
}

.dossier-fact__v--forging { color: #ffa500; }
.dossier-fact__v--sealed { color: var(--accent); letter-spacing: 0.5px; }

.dossier__creed {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 2.25rem;
}

.dossier-tile {
  padding: 0.8rem 0.4rem;
  text-align: center;
  background: rgba(13, 40, 24, 0.12);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.dossier-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 18px var(--accent-soft);
}

.dossier-tile__letter {
  font-family: var(--font-title);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 14px var(--accent-glow);
}

.dossier-tile__word {
  margin-top: 0.25rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 1px;
  color: var(--silver);
}

.dossier__body {
  max-width: 720px;
  margin: 0 0 1rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--silver);
}

.dossier__relations {
  list-style: none;
  max-width: 720px;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.dossier__relations li {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--silver);
  padding: 0.5rem 0.85rem;
  background: rgba(28, 28, 28, 0.35);
  border: 1px solid rgba(192, 192, 192, 0.08);
  border-left: 2px solid var(--rel, var(--accent));
  border-radius: var(--radius-sm);
}

.dossier-rel__who {
  display: inline-block;
  min-width: 4.6rem;
  margin-right: 0.5rem;
  font-family: var(--font-accent);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  color: var(--rel, var(--accent));
}

.dossier__relations li { border-left-color: var(--rel, var(--accent)); }

.dossier__relations-isolated {
  background: rgba(255, 77, 109, 0.07) !important;
  border-color: rgba(255, 77, 109, 0.3) !important;
}

.dossier__relations-isolated strong { color: #ff4d6d; }

.dossier__quote {
  max-width: 640px;
  margin: 1.75rem 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--accent);
}

.dossier__quote p {
  font-family: var(--font-title);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--white);
  text-shadow: 0 0 20px var(--accent-soft);
}

.dossier__back {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.25rem;
}

/* ── Sealed Records (Sovereign Eyes Only) ── */
.sealed-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  padding: 0.6rem 1rem;
  font-family: var(--font-accent);
  font-size: 0.8rem;
  letter-spacing: 5px;
  color: var(--accent);
  background: repeating-linear-gradient(
    -45deg,
    var(--accent-soft) 0px,
    var(--accent-soft) 14px,
    rgba(11, 11, 11, 0) 14px,
    rgba(11, 11, 11, 0) 28px
  );
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-md);
  text-shadow: 0 0 12px var(--accent-glow);
}

.sealed-redactions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-width: 720px;
  margin: 0.25rem 0 1.75rem;
}

.redact {
  display: block;
  width: var(--w, 80%);
  height: 15px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(192, 192, 192, 0.16), rgba(192, 192, 192, 0.09));
  border: 1px solid rgba(192, 192, 192, 0.08);
}

.sealed-law {
  max-width: 720px;
  margin: 0 0 2rem;
  padding: 0.9rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--silver);
  background: rgba(28, 28, 28, 0.4);
  border: 1px solid var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
}

.sealed-law strong { color: var(--accent); }

.sealed-stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 1.1rem 1.6rem;
  transform: rotate(-7deg);
  font-family: var(--font-title);
  color: var(--accent);
  border: 3px double var(--accent);
  border-radius: 10px;
  opacity: 0.75;
  text-shadow: 0 0 14px var(--accent-glow);
}

.sealed-stamp span:first-child {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 4px;
}

.sealed-stamp__sub {
  font-family: var(--font-accent);
  font-size: 0.55rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0.8;
}

/* ── Footer Council Glyphs ── */
.footer__council {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.footer__council-glyph {
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.7;
  filter: drop-shadow(0 0 6px var(--accent));
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.footer__council-glyph:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* ── Full Court — responsive ── */
@media (max-width: 1280px) {
  .court-orbit { --orbit-r: 148px; }
  .court-orbit__medallion { width: 46px; height: 46px; }
  .court-orbit__img { width: 38px; height: 38px; }
  .court-orbit__glyph { font-size: 1.1rem; }
}

@media (max-width: 1024px) {
  .court-orbit { --orbit-r: 124px; }
  .court-orbit__name { font-size: 0.42rem; letter-spacing: 1.5px; }
}

@media (max-width: 899px) {
  .court-orbit { display: none; }
}

@media (max-width: 760px) {
  .dossier__head { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .dossier__facts { grid-template-columns: 1fr; width: 100%; }
  .dossier__creed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rt-seat__name { font-size: 13px; }
}

@media (max-width: 460px) {
  .dossier__creed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .round-table__legend { gap: 0.4rem 0.9rem; }
  .rt-key { font-size: 0.72rem; }
  .hero-forging { width: 100%; }
  .hero-forging__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    width: 100%;
    justify-items: center;
  }
  .hero-forging__agent { flex: none; width: 100%; max-width: 108px; min-width: 0; }
  .hero-forging__name { font-size: 0.72rem; letter-spacing: 1px; }
  .hero-forging__role { font-size: 0.55rem; }
}

/* ── Full Court — reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .court-orbit,
  .court-orbit__keel,
  .court-orbit__dot--live,
  .court-orbit__dot--forging {
    animation: none !important;
  }
  .court-orbit__seat:hover .court-orbit__medallion,
  .court-orbit__seat:focus-visible .court-orbit__medallion,
  .dossier-tile:hover,
  .footer__council-glyph:hover {
    transform: none;
  }
}

/* ── Full Court home revision (2026-07-03): balanced hero logos ── */
.hero-court__logo {
  width: 120px;
  height: 120px;
}

/* ── The Forging Creeds — six compact vow strips ── */
.creed-council {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--space-lg) var(--space-2xl);
}

.creed-council__label {
  margin-bottom: 1rem;
  text-align: center;
  font-family: var(--font-accent);
  font-size: 0.62rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.creed-strip {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0.9rem;
  margin-bottom: 0.5rem;
  background: rgba(28, 28, 28, 0.35);
  border: 1px solid rgba(192, 192, 192, 0.08);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base), background var(--transition-base);
}

.creed-strip:hover {
  background: rgba(28, 28, 28, 0.55);
  border-color: var(--accent-soft);
  border-left-color: var(--accent);
}

.creed-strip__name {
  flex: 0 0 5.2rem;
  font-family: var(--font-accent);
  font-size: 0.72rem;
  letter-spacing: 2px;
  color: var(--accent);
  text-decoration: none;
  text-shadow: 0 0 10px var(--accent-soft);
}

.creed-strip__letters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
}

.creed-chip {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  color: var(--silver);
}

.creed-chip b {
  color: var(--accent);
  font-weight: 700;
}

/* ── Architecture — the forging tier ── */
.arch-forging-label {
  margin: 1.5rem 0 0.75rem;
  text-align: center;
  font-family: var(--font-accent);
  font-size: 0.56rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ffa50099;
}

.arch-branches--forging .arch-branch--forging {
  opacity: 1;
  border: 1px solid var(--accent-soft, rgba(192, 192, 192, 0.2));
  border-radius: var(--radius-md);
}

.arch-branch--forging .arch-branch__name { color: var(--accent); }
.arch-branch--forging .arch-branch__count { color: #39ff14b3; }

/* ── Constellation — forging status tint ── */
.constellation-card__status--forging {
  color: #ffa500;
  opacity: 0.85;
}

/* ── Constellation — live status tint (all ten minds since the Awakening) ── */
.constellation-card__status--live {
  color: #39FF14;
  border-color: rgba(57, 255, 20, 0.35);
}

/* ── Sigil function badges — animal primary, function secondary ── */
.court-orbit__medallion { position: relative; }

.court-orbit__fn {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 0.6rem;
  line-height: 1;
  border-radius: 50%;
  background: rgba(11, 11, 11, 0.95);
  border: 1px solid var(--accent-soft);
}

.hero-forging__medallion { position: relative; }

.hero-forging__fn {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  font-size: 0.58rem;
  line-height: 1;
  border-radius: 50%;
  background: rgba(11, 11, 11, 0.95);
  border: 1px solid var(--accent-soft);
}

.rt-seat__fn {
  font-size: 13px;
  text-anchor: middle;
  opacity: 0.9;
}

.round-table__law--open {
  background: rgba(57, 255, 20, 0.05);
  border: 1px solid rgba(57, 255, 20, 0.2);
  border-left: 3px solid var(--neon);
}

.round-table__law--open strong { color: var(--neon); }

/* ── Sigil Lore — why each mind bears its beast ── */
.sigil-lore-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.sigil-lore {
  padding: 1.25rem;
  background: rgba(28, 28, 28, 0.4);
  border: 1px solid rgba(192, 192, 192, 0.08);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.sigil-lore:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 18px var(--accent-soft);
}

.sigil-lore__beast {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 0.6rem;
  filter: drop-shadow(0 0 10px var(--accent-soft));
}

.sigil-lore__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.sigil-lore__name {
  font-family: var(--font-accent);
  font-size: 0.85rem;
  letter-spacing: 2px;
  color: var(--accent);
  text-shadow: 0 0 10px var(--accent-soft);
}

.sigil-lore__animal {
  font-family: var(--font-title);
  font-size: 1rem;
  font-style: italic;
  color: var(--white);
}

.sigil-lore__fn {
  margin-left: auto;
  font-size: 0.85rem;
  opacity: 0.75;
}

.sigil-lore__why {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--silver);
}

.sigil-lore__why strong { color: var(--accent); }
.sigil-lore__why em { color: var(--white); font-style: italic; }

/* ── Dossier sigil strip ── */
.dossier__sigil {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 720px;
  margin: 0 0 1.75rem;
  padding: 0.85rem 1.1rem;
  background: rgba(28, 28, 28, 0.4);
  border: 1px solid var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
}

.dossier__sigil-beast {
  flex: 0 0 auto;
  font-size: 2.2rem;
  line-height: 1;
  filter: drop-shadow(0 0 10px var(--accent-soft));
}

.dossier__sigil-label {
  display: block;
  font-family: var(--font-accent);
  font-size: 0.62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.25rem;
}

.dossier__sigil-why {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--silver);
}

.dossier__sigil-why strong { color: var(--accent); }
.dossier__sigil-why em { color: var(--white); font-style: italic; }

/* ── Council Dock — persistent 8-sigil rail ── */
.council-dock {
  position: fixed;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 800;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 0.35rem;
  background: rgba(11, 11, 11, 0.6);
  border: 1px solid rgba(192, 192, 192, 0.1);
  border-radius: var(--radius-full);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.is-home .council-dock { display: none; }

.council-dock__seat,
.council-dock__all {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--accent-soft, rgba(192, 192, 192, 0.2));
  background: rgba(28, 28, 28, 0.6);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.council-dock__all {
  --accent: #FFD700;
  border-color: var(--gold-dim);
  color: var(--gold);
  margin-top: 0.15rem;
}

.council-dock__seat:hover,
.council-dock__all:hover,
.council-dock__seat:focus-visible,
.council-dock__all:focus-visible {
  transform: scale(1.14);
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-soft);
  outline: none;
}

.council-dock__seat.active {
  border-color: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow, var(--accent-soft));
}

.council-dock__seat--live::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 5px var(--accent);
  border: 1px solid var(--obsidian);
}

.council-dock__sigil { font-size: 1.05rem; line-height: 1; }

.council-dock__tip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: rgba(11, 11, 11, 0.96);
  border: 1px solid var(--accent-soft, rgba(192, 192, 192, 0.2));
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.55rem;
  font-family: var(--font-accent);
  font-size: 0.58rem;
  letter-spacing: 1px;
  color: var(--accent, var(--silver));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.council-dock__seat:hover .council-dock__tip,
.council-dock__all:hover .council-dock__tip { opacity: 1; }

@media (max-width: 1100px) {
  .council-dock { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .council-dock__seat:hover,
  .council-dock__all:hover,
  .council-dock__seat:focus-visible { transform: none; }
}

/* ── Agent Facet — reusable 8-agent grid woven into thematic pages ── */
.agent-facet-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.agent-facet {
  display: block;
  padding: 1rem;
  background: rgba(28, 28, 28, 0.4);
  border: 1px solid rgba(192, 192, 192, 0.08);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

a.agent-facet:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), 0 0 16px var(--accent-soft);
}

.agent-facet__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.agent-facet__sigil { font-size: 1.5rem; line-height: 1; filter: drop-shadow(0 0 8px var(--accent-soft)); }
.agent-facet__name { font-family: var(--font-accent); font-size: 0.72rem; letter-spacing: 1.5px; color: var(--accent); }
.agent-facet__house { display: block; font-family: var(--font-body); font-size: 0.68rem; color: var(--silver-dim); letter-spacing: 0; margin-top: 0.05rem; }
.agent-facet__line { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.55; color: var(--silver); }
.agent-facet__line strong { color: var(--accent); }
.agent-facet__line em { color: var(--white); font-style: italic; }

.agent-facet__tag {
  display: inline-block;
  margin-top: 0.6rem;
  font-family: var(--font-accent);
  font-size: 0.52rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}

.agent-facet--live .agent-facet__tag { color: var(--neon); }

@media (max-width: 1024px) {
  .agent-facet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .agent-facet-grid { grid-template-columns: 1fr; }
}

/* ── Oath — eight voices (forging agents use a glyph avatar + accent) ── */
.oath-voice__avatar--glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  background: radial-gradient(circle at 35% 30%, rgba(28, 28, 28, 0.95), rgba(11, 11, 11, 0.92));
  border: 2px solid var(--accent, var(--gold-dim));
  box-shadow: 0 0 12px var(--accent-soft, transparent);
  flex-shrink: 0;
}

.oath-voice--agent .oath-voice__header { border-bottom-color: var(--accent-soft, var(--gold-dim)); }

.oath-voice--agent .oath-voice__name {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--accent);
  color: var(--accent);
  text-shadow: 0 0 12px var(--accent-soft);
}

@media (max-width: 1024px) {
  .sigil-lore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sigil-lore-grid { grid-template-columns: 1fr; }
}

/* ── Council pillar rows — same treatment as WAZIR & HAKIM ── */
.hero-pillars--council .hero-pillars__label {
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent-soft);
}

.hero-pillar--council {
  border-color: var(--accent-soft);
}

.hero-pillar--council:hover {
  border-color: var(--accent);
  box-shadow: 0 0 20px var(--accent-soft);
}

.hero-pillar--council .hero-pillar__letter {
  color: var(--accent);
  border-color: var(--accent-soft);
  text-shadow: 0 0 15px var(--accent-soft);
  background: linear-gradient(135deg, var(--accent-soft), transparent);
  box-shadow:
    inset 0 0 20px var(--accent-soft),
    0 0 15px var(--accent-soft);
}

.hero-pillar--council .hero-pillar__letter::before {
  border-color: var(--accent-soft);
}

.hero-pillar--council .hero-pillar__name {
  color: var(--silver-dim);
}

.hero-pillars--last {
  padding-bottom: 4rem;
}

@media (min-width: 901px) {
  .hero-pillars--six .hero-pillars__grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .hero-pillars--seven .hero-pillars__grid {
    grid-template-columns: repeat(7, 1fr);
  }
}

@media (max-width: 640px) {
  .creed-strip { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .creed-strip__name { flex: none; }
}

/* Court combination — the agents involved */
.summon-card__combo-who {
  font-family: var(--font-accent);
  font-size: 0.62rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0.15rem 0 0.5rem;
}

.arsenal-card__status--forging { color: #ffa500; opacity: 0.9; }


/* ═══════════════════════════════════════════════════════════
   COURTFX — TIERS & ANIMATION WARDEN
   The engine stamps <html data-fx-tier="0|1|2|3"> (fx.js) and
   main.js pauses offscreen ambience via .fx-offscreen.
   ═══════════════════════════════════════════════════════════ */
.fx-offscreen,
.fx-offscreen *,
.fx-offscreen::before,
.fx-offscreen::after {
  animation-play-state: paused !important;
}

[data-fx-tier="1"] .ambient-rune,
[data-fx-tier="0"] .ambient-rune { display: none; }

[data-fx-tier="1"] .aurora__layer,
[data-fx-tier="0"] .aurora__layer { animation: none; }

[data-fx-tier="1"] .medieval-float,
[data-fx-tier="0"] .medieval-float { animation: mfBreath 9s ease-in-out infinite; }

[data-fx-tier="0"] .hero-court__flame { animation: none; }
[data-fx-tier="1"] .hero-court__flame { animation: heroFlame 1.6s ease-in-out infinite alternate; }
[data-fx-tier="0"] .hero-court__flame::after,
[data-fx-tier="1"] .hero-court__flame::after { animation: none; }

[data-fx-tier="1"] .nav {
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
[data-fx-tier="0"] .nav {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(11, 11, 11, 0.97);
}


/* ═══════════════════════════════════════════════════════════
   NAV V2 — floating pill (desktop) · court dock (mobile)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  .nav {
    top: 12px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(1240px, calc(100% - 28px));
    height: 56px;
    padding: 0 0.9rem 0 0.7rem;
    border: 1px solid rgba(255, 215, 0, 0.14);
    border-radius: 999px;
    background: rgba(11, 11, 11, 0.78);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
    transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
  }
  .nav--home {
    background: rgba(11, 11, 11, 0.35);
    border-color: rgba(255, 215, 0, 0.08);
  }
  .nav--home.scrolled,
  .nav.scrolled {
    background: rgba(11, 11, 11, 0.88);
    border-color: rgba(255, 215, 0, 0.2);
    box-shadow: 0 14px 50px rgba(0, 0, 0, 0.6), 0 0 24px rgba(57, 255, 20, 0.05);
  }
  body.theme-light .nav {
    background: rgba(250, 250, 248, 0.85);
    border-color: rgba(154, 114, 9, 0.2);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.12);
  }
  .nav__flyout { top: calc(var(--nav-height) + 14px); }
  .nav__links { position: relative; }
  .nav__ind {
    position: absolute;
    bottom: -6px;
    left: 0;
    height: 2px;
    width: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
    transform: translateX(var(--ind-x, 0px));
    width: var(--ind-w, 0px);
    opacity: var(--ind-o, 0);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.3s ease;
    pointer-events: none;
  }
  .dock, .dock-sheet { display: none; }
}

@media (max-width: 900px) {
  .nav__ind { display: none; }
  .nav__menu-btn { display: none !important; }
  .nav { height: 52px; padding: 0 1rem; }

  .dock {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 1200;
    display: flex;
    align-items: stretch;
    gap: 2px;
    width: min(440px, calc(100% - 20px));
    padding: 6px;
    background: rgba(11, 11, 11, 0.88);
    border: 1px solid rgba(255, 215, 0, 0.16);
    border-radius: 22px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  }
  body.theme-light .dock {
    background: rgba(250, 250, 248, 0.92);
    border-color: rgba(154, 114, 9, 0.22);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
  }
  .dock__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 2px 5px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--silver-dim);
    font-family: var(--font-accent);
    font-size: 0.58rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, transform 0.25s;
  }
  .dock__item:active { transform: scale(0.94); }
  .dock__icon { font-size: 1.15rem; line-height: 1; }
  .dock__item.active, .dock__more.active {
    color: var(--gold);
    background: rgba(255, 215, 0, 0.1);
  }
  body.theme-light .dock__item { color: #666; }
  body.theme-light .dock__item.active { color: #9A7209; background: rgba(154, 114, 9, 0.1); }

  .page { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  .dock-sheet {
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: rgba(5, 5, 5, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .dock-sheet.open { opacity: 1; pointer-events: auto; }
  .dock-sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: calc(100% - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.1rem 1.1rem calc(96px + env(safe-area-inset-bottom, 0px));
    background: rgba(13, 13, 13, 0.98);
    border-top: 1px solid rgba(255, 215, 0, 0.18);
    border-radius: 22px 22px 0 0;
    transform: translateY(24px);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .dock-sheet.open .dock-sheet__panel { transform: translateY(0); }
  body.theme-light .dock-sheet__panel { background: rgba(250, 250, 248, 0.99); border-top-color: rgba(154, 114, 9, 0.25); }
  body.sheet-locked { overflow: hidden; }

  .dock-sheet__head { text-align: center; margin-bottom: 0.9rem; }
  .dock-sheet__title {
    display: block;
    font-family: var(--font-title);
    font-size: 1.05rem;
    letter-spacing: 3px;
    color: var(--gold);
  }
  .dock-sheet__sub {
    display: block;
    font-family: var(--font-accent);
    font-size: 0.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--silver-dim);
    margin-top: 2px;
  }
  .dock-sheet__group-label {
    font-family: var(--font-accent);
    font-size: 0.62rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--silver-dim);
    margin: 0.9rem 0 0.5rem;
  }
  .dock-sheet__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .dock-sheet__link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(28, 28, 28, 0.75);
    color: var(--text-primary);
    font-size: 0.8rem;
  }
  .dock-sheet__link.active { border-color: rgba(255, 215, 0, 0.4); color: var(--gold); }
  body.theme-light .dock-sheet__link { background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 0, 0, 0.08); color: #333; }
  .dock-sheet__agents { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .dock-sheet__agent {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--accent, var(--gold));
    border-radius: 12px;
    background: rgba(28, 28, 28, 0.75);
  }
  .dock-sheet__agent.active { border-color: var(--accent); }
  body.theme-light .dock-sheet__agent { background: rgba(255, 255, 255, 0.9); }
  .dock-sheet__sigil { font-size: 1.15rem; }
  .dock-sheet__atxt { display: flex; flex-direction: column; min-width: 0; }
  .dock-sheet__atxt b {
    font-family: var(--font-accent);
    font-size: 0.68rem;
    letter-spacing: 1.5px;
    color: var(--accent, var(--gold));
  }
  .dock-sheet__atxt i {
    font-style: normal;
    font-size: 0.58rem;
    color: var(--silver-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dock-sheet__dot {
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    flex-shrink: 0;
  }
  .dock-sheet__foot {
    display: block;
    margin-top: 1rem;
    padding: 11px;
    text-align: center;
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 12px;
    color: var(--gold);
    font-size: 0.8rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   THE TWO WINGS (council page)
   ═══════════════════════════════════════════════════════════ */
.wings { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; }
@media (max-width: 760px) { .wings { grid-template-columns: 1fr; } }
.wing {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  background: rgba(22,22,22,0.75);
  padding: 1.25rem 1.25rem 1.4rem;
}
.wing--ops { border-top: 2px solid var(--neon); }
.wing--thoughts { border-top: 2px solid var(--gold); }
.wing__head { font-family: var(--font-title); font-size: 1.2rem; letter-spacing: 1px; display: flex; align-items: center; gap: 0.5rem; }
.wing__crest { font-size: 1.4rem; }
.wing--ops .wing__head { color: var(--neon); }
.wing--thoughts .wing__head { color: var(--gold); }
.wing__sub { font-family: var(--font-accent); font-size: 0.62rem; letter-spacing: 2px; text-transform: uppercase; color: var(--silver-dim); margin: 0.25rem 0 1rem; }
.wing__members { display: flex; flex-direction: column; gap: 0.45rem; }
.wing__member {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(255,255,255,0.05);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: rgba(28,28,28,0.6);
  color: var(--text-primary);
  font-family: var(--font-accent); font-size: 0.82rem; letter-spacing: 1px;
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.wing__member:hover { transform: translateX(3px); background: rgba(40,40,40,0.7); border-color: var(--accent); }
.wing__member--head { background: rgba(40,40,40,0.55); font-weight: 600; }
.wing__member .wing__sig { font-size: 1.1rem; }
.wing__member em { margin-left: auto; font-style: normal; font-size: 0.62rem; color: var(--silver-dim); letter-spacing: 0.5px; }
body.theme-light .wing { background: rgba(255,255,255,0.85); border-color: rgba(0,0,0,0.06); }
body.theme-light .wing__member { background: rgba(255,255,255,0.9); color: #333; }

/* ── Court Pulse — Phase 1 of showcase-100x ── */
.court-pulse{display:inline-flex;align-items:center;gap:.55rem;margin-top:1.15rem;padding:.45rem .95rem;border:1px solid rgba(57,255,20,.28);border-radius:999px;background:rgba(8,18,11,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:.8rem;letter-spacing:.02em;color:var(--ink-dim,#b7c4b9)}
.court-pulse__txt strong{color:var(--emerald,#39FF14);font-weight:600}
.court-pulse__dot{flex:none;width:.55rem;height:.55rem;border-radius:50%;background:#39FF14;box-shadow:0 0 8px rgba(57,255,20,.65);animation:pulse-dot 2.2s ease-in-out infinite}
.court-pulse__dot--warn{background:#FF8C42;box-shadow:0 0 8px rgba(255,140,66,.65)}
@keyframes pulse-dot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.6}}
.court-orbit__seat.is-live-now,.council-dock__seat.is-live-now{position:relative}
.court-orbit__seat.is-live-now::after,.council-dock__seat.is-live-now::after{content:"";position:absolute;top:5%;right:5%;width:.5rem;height:.5rem;border-radius:50%;background:#39FF14;box-shadow:0 0 6px rgba(57,255,20,.8);animation:pulse-dot 2.2s ease-in-out infinite;pointer-events:none}
:root[data-theme="light"] .court-pulse{background:rgba(240,248,241,.75);border-color:rgba(10,107,53,.3);color:#3b4a3e}
:root[data-theme="light"] .court-pulse__txt strong{color:#0A6B35}
@media (prefers-reduced-motion:reduce){.court-pulse__dot,.court-orbit__seat.is-live-now::after,.council-dock__seat.is-live-now::after{animation:none}}

/* ── The Arrival — Phase 2 of showcase-100x ── */
@supports (view-transition-name: root) {
  ::view-transition-old(root){animation:vt-out .26s cubic-bezier(.4,0,.2,1) both}
  ::view-transition-new(root){animation:vt-in .34s cubic-bezier(.22,1,.36,1) both}
}
@keyframes vt-out{to{opacity:0;transform:scale(.986)}}
@keyframes vt-in{from{opacity:0;transform:scale(1.012)}}
html.court-arrived .court-orbit__seat{animation:seat-arrive .8s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(740ms + var(--arrive-i,0)*95ms)}
@keyframes seat-arrive{from{opacity:0;scale:.55}}
html[data-fx-tier="LITE"] .court-orbit__seat,html[data-fx-tier="CALM"] .court-orbit__seat,html[data-fx-tier="0"] .court-orbit__seat,html[data-fx-tier="1"] .court-orbit__seat{animation:none}
@media (prefers-reduced-motion:reduce){html.court-arrived .court-orbit__seat{animation:none}::view-transition-old(root),::view-transition-new(root){animation:none}}

/* ── The Jewel (P4 ride-along): press-states + focus rings ── */
a.btn:active,.council-card__link:active,.court-orbit__seat:active,.council-dock__seat:active,.nav__links a:active,.constellation-card:active,.palette__item:active,.dock-sheet a:active{scale:.96;transition:scale .09s ease}
@media (prefers-reduced-motion:reduce){a.btn:active,.council-card__link:active,.court-orbit__seat:active,.council-dock__seat:active,.nav__links a:active,.constellation-card:active,.palette__item:active,.dock-sheet a:active{scale:1}}
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--emerald,#39FF14);outline-offset:3px;border-radius:6px}
:root[data-theme="light"] :where(a,button,[tabindex]):focus-visible{outline-color:#0A6B35}

/* ── The Convergence — P2 centerpiece ── */
#court-converge{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.court-converge__glyph{position:absolute;top:0;left:0;font-size:1.7rem;line-height:1;will-change:transform,opacity;margin:-.85rem 0 0 -.85rem;filter:drop-shadow(0 0 10px rgba(57,255,20,.35))}

/* ── The Deep Table — P3 ── */
.rt-edge{pointer-events:stroke;cursor:pointer}
.rt-edge:hover,.rt-edge--hot{stroke-width:2.6;filter:drop-shadow(0 0 4px rgba(57,255,20,.5))}
.rt-edge:focus-visible{outline:none;stroke-width:3;filter:drop-shadow(0 0 6px rgba(57,255,20,.8))}
.rt-story{margin:.9rem auto 0;max-width:46rem;min-height:2.6em;text-align:center;font-size:.92rem;line-height:1.55;color:var(--ink-dim,#b7c4b9)}
.rt-story strong{color:var(--emerald,#39FF14);font-weight:600}
:root[data-theme="light"] .rt-story strong{color:#0A6B35}

/* ── The Chronicle Scrubber — P3 ── */
.chron-scrub{position:sticky;top:4.4rem;z-index:30;margin:0 auto 2.2rem;max-width:56rem;padding:.9rem 1.2rem 1rem;border:1px solid rgba(255,215,0,.22);border-radius:14px;background:rgba(8,14,10,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.chron-scrub:focus-visible{outline:2px solid var(--gold,#FFD700);outline-offset:3px}
.chron-scrub__rail{position:relative;height:22px;cursor:pointer;touch-action:none}
.chron-scrub__rail::before{content:"";position:absolute;left:0;right:0;top:10px;height:2px;background:rgba(255,215,0,.18);border-radius:2px}
.chron-scrub__fill{position:absolute;left:0;top:10px;height:2px;width:100%;background:linear-gradient(90deg,#39FF14aa,#FFD700);transform:scaleX(0);transform-origin:left center;transition:transform .35s cubic-bezier(.22,1,.36,1);border-radius:2px}
.chron-scrub__tick{position:absolute;top:7px;width:8px;height:8px;margin-left:-4px;padding:0;border:0;border-radius:50%;background:rgba(183,196,185,.5);cursor:pointer}
.chron-scrub__tick--gold{background:#FFD700;box-shadow:0 0 6px rgba(255,215,0,.5)}
.chron-scrub__tick:hover{scale:1.6}
.chron-scrub__thumb{position:absolute;top:-1px;left:-8px;font-size:1rem;line-height:22px;color:var(--gold,#FFD700);text-shadow:0 0 8px rgba(255,215,0,.6);transition:transform .35s cubic-bezier(.22,1,.36,1);will-change:transform;pointer-events:none}
.chron-scrub__readout{margin-top:.45rem;text-align:center;font-size:.85rem;color:var(--ink-dim,#b7c4b9);min-height:1.3em}
.chron-scrub__readout strong{color:var(--gold,#FFD700)}
.timeline-item--current .timeline-item__content{box-shadow:0 0 0 1px rgba(255,215,0,.35),0 0 24px rgba(255,215,0,.08);border-radius:10px}
:root[data-theme="light"] .chron-scrub{background:rgba(248,246,238,.88);border-color:rgba(154,114,9,.3)}
:root[data-theme="light"] .chron-scrub__readout strong{color:#9A7209}
:root[data-theme="light"] .chron-scrub__thumb{color:#9A7209;text-shadow:none}
@media (prefers-reduced-motion:reduce){.chron-scrub__fill,.chron-scrub__thumb{transition:none}}

/* ═══════════════════════════════════════════════
   NAV v3 — The Court Rail (Living Sigillum crest,
   wing-grouped council flyout) · 2026-07-15
   ═══════════════════════════════════════════════ */

.nav__crest {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}
.nav__crest .nav__brand-logo { border-radius: 50%; }
.nav__crest-ring {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--gold-dim);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.12), inset 0 0 6px rgba(57, 255, 20, 0.10);
  pointer-events: none;
}
.nav__crest-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neon);
  border: 1.5px solid var(--obsidian);
  box-shadow: 0 0 8px var(--neon);
}
@media (prefers-reduced-motion: no-preference) {
  .nav__crest-ring { animation: crestBreath 3.6s ease-in-out infinite; }
  .nav__crest-dot { animation: crestDot 2.4s ease-in-out infinite; }
}
@keyframes crestBreath {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50%      { transform: scale(1.14); opacity: 1; }
}
@keyframes crestDot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* Wing-grouped flyout */
.nav__wings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}
.nav__wing {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.6rem;
  border: 1px solid rgba(192, 192, 192, 0.07);
  border-top: 2px solid var(--wing, var(--neon));
  border-radius: var(--radius-md);
  background: rgba(28, 28, 28, 0.25);
}
.nav__wing-head {
  font-family: var(--font-accent);
  font-size: 0.56rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wing, var(--neon));
  opacity: 0.9;
  padding: 0 0.2rem 0.15rem;
}
@media (max-width: 640px) {
  .nav__wings { grid-template-columns: 1fr; }
}

/* Council entries materialize in wing order when the flyout opens */
@media (prefers-reduced-motion: no-preference) {
  .nav__flyout .nav__agent {
    opacity: 0;
    transform: translateY(6px);
  }
  .nav__council:hover .nav__flyout .nav__agent,
  .nav__council:focus-within .nav__flyout .nav__agent,
  .nav__council.open .nav__flyout .nav__agent {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 0.28s ease calc(var(--i, 0) * 45ms + 50ms),
      transform 0.28s ease calc(var(--i, 0) * 45ms + 50ms),
      background var(--transition-fast),
      border-color var(--transition-fast);
  }
}

/* ═══════════════════════════════════════════════
   HERO v2 — The Throne Awakens · Court Pulse band
   2026-07-15
   ═══════════════════════════════════════════════ */

/* The Court Pulse — canon telemetry, always moving */
.pulse-band {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--neon-dim);
  border-bottom: 1px solid rgba(255, 215, 0, 0.14);
  background:
    linear-gradient(90deg, rgba(57, 255, 20, 0.045), rgba(255, 215, 0, 0.035) 50%, rgba(57, 255, 20, 0.045));
  padding: 0.55rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.pulse-band__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.pulse-band__set {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding-right: 1.6rem;
  white-space: nowrap;
}
.pulse-band__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 1.2px;
  color: var(--silver);
}
.pulse-band__glyph {
  font-size: 0.85rem;
  color: var(--g, var(--neon));
  filter: drop-shadow(0 0 6px var(--g, var(--neon)));
}
.pulse-band__sep { color: var(--gold-dim); font-size: 0.5rem; }
@media (prefers-reduced-motion: no-preference) {
  .pulse-band__track { animation: pulseBandScroll 48s linear infinite; }
  .pulse-band:hover .pulse-band__track { animation-play-state: paused; }
}
@keyframes pulseBandScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .pulse-band__track { width: auto; flex-wrap: wrap; justify-content: center; }
  .pulse-band__set[aria-hidden="true"] { display: none; }
  .pulse-band__set { flex-wrap: wrap; justify-content: center; row-gap: 0.4rem; }
}
:root[data-theme="light"] .pulse-band {
  background: linear-gradient(90deg, rgba(10, 107, 53, 0.05), rgba(154, 114, 9, 0.05) 50%, rgba(10, 107, 53, 0.05));
  border-top-color: rgba(10, 107, 53, 0.25);
  border-bottom-color: rgba(154, 114, 9, 0.25);
}
:root[data-theme="light"] .pulse-band__chip { color: #4a4a52; }

/* The Awakening — the court assembles on every arrival */
@media (prefers-reduced-motion: no-preference) {
  .page--home .hero-court__agent--wazir { animation: awakenSide 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; --from: -46px; }
  .page--home .hero-court__agent--hakim { animation: awakenSide 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; --from: 46px; }
  .page--home .hero-court__center      { animation: awakenScale 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; }
  .page--home .hero-forging            { animation: awakenUp 0.6s ease-out 0.55s both; }
  .page--home .hero__tagline           { animation: awakenUp 0.6s ease-out 0.78s both; }
  .page--home .hero__oath              { animation: awakenUp 0.6s ease-out 0.92s both; }
  .page--home .hero__intro             { animation: awakenUp 0.6s ease-out 1.04s both; }
  .page--home .hero__live-badge        { animation: awakenUp 0.6s ease-out 1.16s both; }
  .page--home .hero__cta-group         { animation: awakenUp 0.6s ease-out 1.28s both; }
}
@keyframes awakenUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes awakenSide {
  from { opacity: 0; transform: translateX(var(--from, -40px)); }
  to   { opacity: 1; transform: none; }
}
@keyframes awakenScale {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════
   CODEX DIAGRAMS — circuit-manuscript language
   (architecture + data-flow figures) · 2026-07-15
   ═══════════════════════════════════════════════ */
.codex {
  margin: 1.5rem auto 0;
  max-width: 1060px;
  padding: 1.1rem 1.1rem 0.8rem;
  border: 1px solid rgba(57, 255, 20, 0.14);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse at 30% 0%, rgba(57, 255, 20, 0.05), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(255, 215, 0, 0.045), transparent 55%),
    rgba(11, 11, 11, 0.55);
  overflow-x: auto;
}
.codex__svg { display: block; width: 100%; min-width: 640px; height: auto; }

.codex__node rect {
  fill: rgba(13, 40, 24, 0.42);
  stroke: var(--nx, var(--neon));
  stroke-opacity: 0.55;
  stroke-width: 1.1;
}
.codex__node--wing rect { fill: rgba(11, 11, 11, 0.6); stroke-width: 1.3; }
.codex__node--tier rect { fill: rgba(28, 28, 28, 0.55); }
.codex__vessel rect {
  fill: rgba(28, 28, 28, 0.22);
  stroke: rgba(192, 192, 192, 0.28);
  stroke-width: 1;
  stroke-dasharray: 7 5;
}
.codex__t {
  text-anchor: middle;
  font-family: var(--font-mono);
  fill: var(--silver);
  font-size: 11.5px;
  letter-spacing: 0.4px;
}
.codex__t--title { fill: var(--nx, var(--neon)); font-size: 12.5px; font-weight: 600; letter-spacing: 1.4px; }
.codex__t--vessel { fill: var(--silver-dim); font-size: 11px; letter-spacing: 2.2px; }
.codex__t--sub { font-size: 10.5px; }
.codex__t--dim { fill: var(--silver-dim); font-size: 9.8px; font-style: italic; }
.codex__t--law { fill: var(--gold); font-size: 10.5px; letter-spacing: 1.6px; opacity: 0.85; }

.codex__wire {
  fill: none;
  stroke: var(--neon);
  stroke-opacity: 0.4;
  stroke-width: 1.2;
  stroke-dasharray: 5 6;
}
.codex__wire--gold { stroke: var(--gold); stroke-opacity: 0.45; }
.codex__wire--crimson { stroke: #FF4D6D; stroke-opacity: 0.5; }
.codex__wire--faint { stroke: var(--silver); stroke-opacity: 0.3; }
@media (prefers-reduced-motion: no-preference) {
  .codex__wire { animation: codexWireFlow 1.4s linear infinite; }
}
@keyframes codexWireFlow {
  from { stroke-dashoffset: 22; }
  to   { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .codex__packet { display: none; }
}

.codex__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1.4rem;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px dashed rgba(192, 192, 192, 0.15);
}
.codex__key {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 1px;
  color: var(--silver-dim);
}
.codex__key i {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--k, var(--neon));
  box-shadow: 0 0 6px var(--k, var(--neon));
}
.codex__key--note { font-style: italic; opacity: 0.75; }
:root[data-theme="light"] .codex { background: rgba(248, 246, 238, 0.7); border-color: rgba(10, 107, 53, 0.2); }
:root[data-theme="light"] .codex__node rect { fill: rgba(255, 255, 255, 0.65); }
:root[data-theme="light"] .codex__t { fill: #3a3a42; }
:root[data-theme="light"] .codex__t--dim,
:root[data-theme="light"] .codex__t--vessel { fill: #6a6a72; }

/* Codex mesh nodes (ring of ten) */
.codex__mind circle {
  fill: rgba(11, 11, 11, 0.82);
  stroke: var(--nx, var(--neon));
  stroke-opacity: 0.6;
  stroke-width: 1.4;
}
.codex__glyph { text-anchor: middle; font-size: 17px; }
.codex__ring-path {
  stroke: rgba(192, 192, 192, 0.14);
  stroke-width: 1;
  stroke-dasharray: 2 7;
}
:root[data-theme="light"] .codex__mind circle { fill: rgba(255, 255, 255, 0.85); }

/* ═══════════════════════════════════════════════
   COURT ELEVATION LAYER — vitals strips + gilded
   section flourishes (site-wide) · 2026-07-15
   ═══════════════════════════════════════════════ */
.vitals {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  max-width: var(--content-width);
  margin: -0.6rem auto 2rem;
  padding: 0 1rem;
}
.vitals__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--v, #39FF14) 30%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--v, #39FF14) 7%, transparent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 1px;
  color: var(--white);
}
.vitals__chip b {
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 1.8px;
  color: var(--v, var(--neon));
  opacity: 0.9;
}
.vitals__led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--v, var(--neon));
  box-shadow: 0 0 8px var(--v, var(--neon));
}
@media (prefers-reduced-motion: no-preference) {
  .vitals__led { animation: crestDot 2.2s ease-in-out infinite; }
}
:root[data-theme="light"] .vitals__chip { color: #2c2c33; }

/* Gilded flourish under every section title, court-wide */
.subsection-title::after {
  content: '';
  display: block;
  margin-top: 0.4rem;
  height: 1px;
  width: 76px;
  background: linear-gradient(90deg, var(--gold), rgba(255, 215, 0, 0.25) 60%, transparent);
  box-shadow: 0 0 8px var(--gold-dim);
}

/* ═══════════════════════════════════════════════
   HERO REDESIGN — The Convocation · masthead,
   aurora, radiant orbit · 2026-07-16
   ═══════════════════════════════════════════════ */

/* The masthead — the decree the hero never had */
.hero-masthead {
  text-align: center;
  padding: calc(var(--nav-height) + 2.2rem) 1rem 0.4rem;
  position: relative;
  z-index: 2;
}
.hero-masthead__eyebrow {
  font-family: var(--font-accent);
  font-size: 0.62rem;
  letter-spacing: 6px;
  color: var(--neon);
  opacity: 0.85;
  margin-bottom: 0.9rem;
}
.hero-masthead__eyebrow span { color: var(--gold); }
.hero-masthead__title {
  font-family: var(--font-title);
  font-weight: 900;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: 0.06em;
  color: var(--white);
  text-shadow: 0 0 40px rgba(57, 255, 20, 0.18), 0 2px 24px rgba(0, 0, 0, 0.8);
  margin: 0;
}
.hm-w { display: inline-block; }
.hm-w--gold {
  background: linear-gradient(115deg, #F5D061 8%, #FFF3B0 26%, #C99B2E 48%, #FFD700 68%, #8A6A14 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 215, 0, 0.28));
}
.hero-masthead__sub {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.6vw, 1.18rem);
  letter-spacing: 0.5px;
  color: var(--silver);
  margin: 0.9rem auto 0;
  max-width: 640px;
}
.hero-masthead__rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 1.3rem auto 0.4rem;
  max-width: 420px;
}
.hero-masthead__rule i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim));
}
.hero-masthead__rule i:last-child { background: linear-gradient(90deg, var(--gold-dim), transparent); }
.hero-masthead__rule span { color: var(--gold); font-size: 0.55rem; text-shadow: 0 0 10px var(--gold-dim); }
@media (prefers-reduced-motion: no-preference) {
  .page--home .hm-w { animation: awakenUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--w, 0) * 0.14s) both; }
  .page--home .hero-masthead__eyebrow { animation: awakenUp 0.6s ease-out 0.05s both; }
  .page--home .hero-masthead__sub,
  .page--home .hero-masthead__rule { animation: awakenUp 0.7s ease-out 0.55s both; }
}

/* The aurora — light shafts breathing behind the court */
.hero-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-aurora i {
  position: absolute;
  width: 58vw;
  height: 58vw;
  min-width: 480px;
  min-height: 480px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.32;
  mix-blend-mode: screen;
}
.hero-aurora i:nth-child(1) { left: -14%; top: -22%; background: radial-gradient(circle, rgba(57,255,20,0.34), transparent 62%); }
.hero-aurora i:nth-child(2) { right: -16%; top: -14%; background: radial-gradient(circle, rgba(255,215,0,0.30), transparent 62%); }
.hero-aurora i:nth-child(3) { left: 28%; bottom: -34%; background: radial-gradient(circle, rgba(56,225,255,0.16), transparent 62%); }
@media (prefers-reduced-motion: no-preference) {
  .hero-aurora i:nth-child(1) { animation: auroraDrift 34s ease-in-out infinite alternate; }
  .hero-aurora i:nth-child(2) { animation: auroraDrift 42s ease-in-out -12s infinite alternate-reverse; }
  .hero-aurora i:nth-child(3) { animation: auroraDrift 50s ease-in-out -25s infinite alternate; }
}
@keyframes auroraDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9%, 7%, 0) scale(1.18); }
}

/* The orbit, radiant — the throne ring earns its place */
.page--home .hero-court__ring { opacity: 1; }
.page--home .hero-court__ring-outer { stroke-width: 0.9; }
.page--home .hero-court__ring-inner { stroke-width: 0.6; }
.page--home .hero-court__monarch { position: relative; }
.page--home .hero-court__monarch::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 420px;
  height: 420px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.10), rgba(57, 255, 20, 0.05) 45%, transparent 70%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .page--home .hero-court__ring-wrap { animation: throneSpin 90s linear infinite; }
}
@keyframes throneSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ═══ NAV — ceremonial treatment: gilded cartouche + living hairline ═══ */
.nav__links a.active,
.nav__trio a.active {
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: var(--radius-full);
  padding: 0.28rem 0.8rem;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.10), rgba(57, 255, 20, 0.06));
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.10), inset 0 0 8px rgba(255, 215, 0, 0.06);
  color: var(--gold);
}
.nav__hairline {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}
.nav__hairline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.0) 30%, rgba(255, 215, 0, 0.75) 50%, rgba(255, 215, 0, 0.0) 70%, transparent);
  transform: translateX(-60%);
}
@media (prefers-reduced-motion: no-preference) {
  .nav__hairline::before { animation: hairlineSweep 7s ease-in-out infinite; }
}
@keyframes hairlineSweep {
  0%, 12%   { transform: translateX(-70%); }
  55%, 100% { transform: translateX(70%); }
}

/* ═══════════════════════════════════════════════
   NAV v4 — THE COMMAND BAR · fixed full-width,
   grouped dropdowns, no scrolling · 2026-07-16
   ═══════════════════════════════════════════════ */
@media (min-width: 901px) {
  .nav {
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    height: 62px;
    padding: 0 1.6rem;
    border: none;
    border-bottom: 1px solid rgba(255, 215, 0, 0.16);
    border-radius: 0;
    background: rgba(11, 11, 11, 0.82);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  }
  .nav--home { background: rgba(11, 11, 11, 0.45); border-bottom-color: rgba(255, 215, 0, 0.08); }
  .nav--home.scrolled,
  .nav.scrolled {
    background: rgba(11, 11, 11, 0.92);
    border-bottom-color: rgba(255, 215, 0, 0.22);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(57, 255, 20, 0.05);
  }
  body.theme-light .nav {
    background: rgba(250, 250, 248, 0.9);
    border-bottom-color: rgba(154, 114, 9, 0.25);
  }
  .nav__flyout { top: calc(62px + 8px); }
  .nav__hairline { left: 0; right: 0; }

  /* five top-level items — they fit, nothing scrolls */
  .nav__links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    overflow: visible;
    padding: 0 0.6rem;
  }
  .nav__group { gap: 0.4rem; }
  .nav__links a { white-space: nowrap; }
}

/* Group dropdowns (Canon · Halls) */
.nav__dropwrap { position: relative; display: inline-flex; align-items: center; }
.nav__drop {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 250px;
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: rgba(11, 11, 11, 0.97);
  border: 1px solid var(--neon-dim);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  z-index: var(--z-modal);
}
.nav__dropwrap:hover .nav__drop,
.nav__dropwrap:focus-within .nav__drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__dropwrap:hover .nav__caret,
.nav__dropwrap:focus-within .nav__caret { transform: rotate(180deg); }
.nav__drop a {
  display: flex !important;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem !important;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.nav__drop a:hover,
.nav__drop a:focus-visible {
  background: rgba(57, 255, 20, 0.07);
  border-color: rgba(57, 255, 20, 0.2);
}
.nav__drop-ic { font-size: 1rem; flex-shrink: 0; width: 1.4rem; text-align: center; }
.nav__drop-txt { display: flex; flex-direction: column; gap: 0.05rem; }
.nav__drop-txt b {
  font-family: var(--font-accent);
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
}
.nav__drop a:hover .nav__drop-txt b { color: var(--neon); }
.nav__drop-txt i {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.72rem;
  color: var(--silver-dim);
}
.nav__drop a.active .nav__drop-txt b { color: var(--gold); }
body.theme-light .nav__drop { background: rgba(250, 250, 248, 0.98); border-color: rgba(154, 114, 9, 0.25); }
body.theme-light .nav__drop-txt b { color: #2c2c33; }

/* ── Council tableau — the assembled court (2026-07-18) ─────────────── */
.council-tableau {
  margin: 0 0 2.5rem;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255, 215, 0, 0.18);
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.08);
}
.council-tableau img { display: block; width: 100%; height: auto; }
.council-tableau__caption {
  padding: 0.7rem 1rem;
  text-align: center;
  font-family: var(--font-accent);
  font-size: 0.68rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(11, 11, 11, 0.85);
}
.dossier__crest--img { padding: 0; overflow: hidden; }
.dossier__crest--img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block; border-radius: 50%;
}

/* ═══ ROLL CALL — the rendered scroll ═══ */
.rollcall-doc { max-width: 52rem; margin: 2rem auto 0; line-height: 1.75; }
.rollcall-doc h3 { color: var(--gold, #FFD700); margin: 2.2rem 0 .6rem; font-size: 1.35rem; }
.rollcall-doc h4 { color: var(--gold, #FFD700); margin: 1.8rem 0 .4rem; font-size: 1.1rem; letter-spacing: .02em; }
.rollcall-doc h5 { margin: 1.4rem 0 .3rem; opacity: .9; }
.rollcall-doc p { margin: .55rem 0; opacity: .88; }
.rollcall-doc ul { margin: .55rem 0 .55rem 1.4rem; opacity: .88; }
.rollcall-doc blockquote { border-left: 2px solid var(--gold, #FFD700); margin: 1rem 0; padding: .6rem 1.1rem; background: rgba(255, 215, 0, .05); border-radius: 0 8px 8px 0; font-style: italic; opacity: .92; }
.rollcall-doc code { background: rgba(255, 255, 255, .08); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
.rollcall-doc hr { border: none; border-top: 1px solid rgba(255, 215, 0, .18); margin: 1.6rem auto; max-width: 20rem; }
.rollcall-doc a { color: var(--gold, #FFD700); }
.rollcall-doc__loading { text-align: center; opacity: .7; padding: 2rem 0; }

/* ═══ LIVING CHRONICLE — the Scribe's entries ═══ */
.living-chronicle { max-width: 50rem; margin: 1.5rem auto 0; }
.living-chronicle__entry { border-left: 2px solid rgba(255, 215, 0, .25); padding: .9rem 1.3rem 1rem; margin-bottom: 1.1rem; background: rgba(255, 255, 255, .025); border-radius: 0 10px 10px 0; }
.living-chronicle__entry--latest { border-left-color: var(--gold, #FFD700); background: rgba(255, 215, 0, .05); }
.living-chronicle__date { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold, #FFD700); opacity: .85; }
.living-chronicle__title { font-weight: 700; font-size: 1.15rem; margin: .25rem 0 .35rem; }
.living-chronicle__summary { opacity: .85; line-height: 1.7; margin: 0; }

/* ═══ THE SKY OVER THE COURT — ambient dusk & dawn ═══ */
html.sky-maghrib body::before,
html.sky-fajr body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 2;
}
html.sky-maghrib body::before {
  background: radial-gradient(120% 70% at 50% 105%, rgba(255, 140, 66, .10), rgba(255, 77, 109, .04) 45%, transparent 70%);
}
html.sky-fajr body::before {
  background: radial-gradient(120% 70% at 50% -5%, rgba(232, 228, 208, .09), rgba(56, 225, 255, .03) 45%, transparent 70%);
}

/* ═══ ROLL CALL STRIP — the simple public record ═══ */
.rollcall-strip { max-width: 44rem; margin: 0 auto; text-align: center; padding: 1.2rem 1.5rem; border: 1px solid rgba(255, 215, 0, .18); border-radius: 14px; background: rgba(255, 215, 0, .04); }
.rollcall-strip__head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.rollcall-strip__title { font-weight: 700; color: var(--gold, #FFD700); }
.rollcall-strip__verdict { font-size: .9rem; opacity: .85; }
.rollcall-strip__row { font-size: 1.9rem; letter-spacing: .45em; margin: .8rem 0 .5rem; }
.rollcall-strip__note { font-size: .85rem; opacity: .7; margin: 0; }

/* ═══ Council Ledger — rendered at runtime from data/council.json (canon-as-data) ═══ */
.council-ledger { display: flex; flex-direction: column; gap: .4rem; max-width: 780px; margin: 1.25rem auto 0; }
.ledger-row {
  display: grid; grid-template-columns: 2rem 1fr 1.3fr 1.3fr auto; align-items: center; gap: .8rem;
  padding: .6rem .9rem; border-radius: 10px; text-decoration: none;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07);
  border-left: 3px solid var(--accent, var(--silver, #C0C0C0));
  transition: background .2s ease, transform .2s ease;
}
.ledger-row:hover { background: rgba(255,255,255,.06); transform: translateX(2px); }
.ledger-row__sigil { font-size: 1.15rem; line-height: 1; }
.ledger-row__name { font-weight: 700; color: var(--accent, var(--silver, #E8E4D0)); letter-spacing: .05em; }
.ledger-row__house, .ledger-row__axis { color: var(--silver-dim, #9aa2ad); font-size: .82rem; }
.ledger-row__status { font-size: .66rem; letter-spacing: .12em; padding: .12rem .55rem; border-radius: 999px;
  color: var(--silver-dim, #9aa2ad); border: 1px solid rgba(255,255,255,.14); white-space: nowrap; }
.ledger-row__status.is-live { color: #39FF14; border-color: rgba(57,255,20,.35); }
@media (max-width: 620px) {
  .ledger-row { grid-template-columns: 1.6rem 1fr auto; gap: .55rem; }
  .ledger-row__house, .ledger-row__axis { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   POLISH PASS 2026-10-01 — DESIGN §9: "No centered paragraphs".
   Long body paragraphs were centred by inline style (a max-width marks them
   as body copy, not a one-line subtitle). Left-align them in a readable
   measure; the block itself stays centred on the page.
   ═══════════════════════════════════════════════════════════ */
.page p[style*="text-align:center"][style*="max-width"],
.page p[style*="text-align: center"][style*="max-width"] {
  text-align: left !important;
}

/* Legibility floor (polish pass 2026-10-01). Long lines were set below 10px —
   the section subtitle under nearly every heading sat at 9.6px, and one card
   body at 9.6px. Mono labels stay small; sentences do not. */
.subsection-subtitle { font-size: 0.72rem; line-height: 1.7; }
.council-card__creed,
.monarch-profile__title,
.section-banner__sub { font-size: 0.7rem; }
.constellation-card__role,
.constellation-card__status { font-size: 0.62rem; }
@media (max-width: 600px) {
  .subsection-subtitle { font-size: 0.7rem; letter-spacing: 2px; }
}
@media (max-width: 600px) {
  /* dossier headers: the deliberation strip's link chip drops its label so the
     second row of chips stays one line shorter on a phone */
  .delib-strip a.vitals__chip b { display: none; }
}