/* ─── Tweaks: brand wordmark style lives in kb.css (used by every page) ──── */

/* ─── Tweak 1: Mood / palette story ──────────────────────────────────────── */
/* Each mood rewrites the brand's color tokens — the entire page re-skins.   */

/* Mood: Deltek (default) — production navy + blue. No overrides needed.    */

/* Mood: Aurora — deep indigo paper, vibrant cyan/violet accents.           */
body.mood-aurora {
  --navy-900: #0a0a30;
  --navy-800: #11124a;
  --navy-700: #1c1d6b;
  --navy-600: #2c2f8e;
  --blue-700: #4c2fd9;
  --blue-600: #6447ff;
  --blue-500: #8b6dff;
  --blue-100: #ece6ff;
  --blue-50:  #f6f3ff;
  --accent:   #5ef0ff;
  --ink-900: #0e0b2e;
  --ink-800: #1a1740;
}
body.mood-aurora .kb-brand__logo {
  background: linear-gradient(135deg, #8b6dff, #5ef0ff);
}
body.mood-aurora .kb-hero__chip { backdrop-filter: blur(6px); }

/* Mood: Editorial — cream paper, warm ink, deep teal accent. Like print.   */
body.mood-editorial {
  --navy-900: #1f1a12;
  --navy-800: #2b2418;
  --navy-700: #3a3122;
  --navy-600: #51442f;
  --blue-700: #0c5e57;
  --blue-600: #0e7268;
  --blue-500: #149584;
  --blue-100: #def0ec;
  --blue-50:  #f1faf7;
  --accent:   #d39c3d;
  --ink-900: #1f1a12;
  --ink-800: #2c2519;
  --ink-700: #3d3322;
  --ink-600: #5a4d36;
  --ink-500: #7b6c52;
  --ink-400: #a39676;
  --ink-300: #c8bd9d;
  --ink-200: #e3dac0;
  --ink-150: #ece4ce;
  --ink-100: #f0e8d2;
  --ink-50:  #f7f1de;
  --bg:      #faf4e1;
  --panel:   #f3ecd4;
  --panel-2: #ebe3c5;
  --border:  #e0d6b4;
  --border-strong: #ccc095;
  --font-display: "Fraunces", "Manrope", ui-serif, Georgia, serif;
  --font-body: "Source Serif 4", "Source Sans 3", ui-serif, Georgia, serif;
}
body.mood-editorial .kb-brand__logo {
  background: linear-gradient(135deg, #d39c3d, #b66c1f);
  border-radius: 50%;
}
body.mood-editorial .kb-brand__wordmark { font-style: italic; letter-spacing: -0.01em; }
body.mood-editorial .kb-hero h1 { font-weight: 600; letter-spacing: -0.03em; }
body.mood-editorial .kb-cat,
body.mood-editorial .kb-popular__card,
body.mood-editorial .kb-stat,
body.mood-editorial .kb-related__card { background: #fdf8e8; }
body.mood-editorial .kb-popular__num {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border-strong);
}

/* Mood: Graphite — pure technical greyscale, monochrome accents.          */
body.mood-graphite {
  --navy-900: #0a0a0c;
  --navy-800: #15151a;
  --navy-700: #1f2027;
  --navy-600: #2e2f38;
  --blue-700: #3b3f4a;
  --blue-600: #4e535f;
  --blue-500: #6b7280;
  --blue-100: #e6e7ea;
  --blue-50:  #f3f4f6;
  --accent:   #a3a8b2;
  --ink-900: #0c0c0e;
  --ink-800: #18181c;
  --ink-700: #2a2a30;
  --ink-600: #4a4a52;
  --ink-500: #71717a;
}
body.mood-graphite .kb-brand__logo {
  background: #fff;
  color: #0a0a0c;
}
body.mood-graphite .kb-nav-link--cta {
  background: #fff;
  color: #0a0a0c;
}
body.mood-graphite .kb-nav-link--cta:hover {
  background: #e6e7ea;
  color: #0a0a0c;
}
body.mood-graphite .kb-cat__icon {
  filter: saturate(0) brightness(.95) contrast(1.05);
}
body.mood-graphite .kb-hero h1 {
  background: linear-gradient(180deg, #fff 35%, #a3a8b2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ─── Tweak 2: Density / rhythm ──────────────────────────────────────────── */
/* Rewrites scale tokens — hero pads, type, content width, gutters.         */

body.density-cozy {
  --header-h: 54px;
  --content-max: 1200px;
  --hero-pad-y: 40px;
  --hero-h1: 36px;
  --hero-sub: 16px;
  --home-pad-y: 32px;
  --card-pad: 16px;
  --grid-gap: 14px;
  --section-gap: 28px;
}
body.density-standard {
  --hero-pad-y: 60px;
  --hero-h1: 44px;
  --hero-sub: 18px;
  --home-pad-y: 48px;
  --card-pad: 22px;
  --grid-gap: 18px;
  --section-gap: 36px;
}
body.density-editorial {
  --header-h: 72px;
  --content-max: 1440px;
  --hero-pad-y: 110px;
  --hero-h1: 64px;
  --hero-sub: 22px;
  --home-pad-y: 80px;
  --card-pad: 30px;
  --grid-gap: 28px;
  --section-gap: 64px;
}
body[class*="density-"] .kb-hero { padding: var(--hero-pad-y) 0; }
body[class*="density-"] .kb-hero h1 {
  font-size: var(--hero-h1);
  line-height: 1.05;
}
body[class*="density-"] .kb-hero__sub { font-size: var(--hero-sub); }
body[class*="density-"] .kb-home { padding-top: var(--home-pad-y); padding-bottom: calc(var(--home-pad-y) / 2); }
body[class*="density-"] .kb-cat { padding: var(--card-pad); }
body[class*="density-"] .kb-home__grid { gap: var(--grid-gap); }
body[class*="density-"] .kb-section__head { margin-top: var(--section-gap); }

body.density-editorial .kb-hero h1 { letter-spacing: -0.035em; text-wrap: balance; max-width: 920px; }
body.density-editorial .kb-hero__sub { max-width: 720px; line-height: 1.45; }
body.density-editorial .kb-home__title { font-size: 28px; }
body.density-editorial .kb-cat__title { font-size: 20px; }
body.density-editorial .kb-cat__icon {
  width: 56px !important; height: 56px !important; font-size: 17px !important;
  border-radius: 12px !important;
}
body.density-editorial .kb-stat__num { font-size: 40px; }
body.density-editorial .kb-stat { padding: 28px 24px; }
body.density-editorial .kb-cat__topics { font-size: 14.5px; gap: 6px; }
body.density-editorial .kb-cat__desc { font-size: 15.5px; line-height: 1.55; }

body.density-cozy .kb-cat__topics { display: none; }
body.density-cozy .kb-cat__icon {
  width: 32px !important; height: 32px !important; font-size: 12px !important;
  margin-bottom: 10px;
}
body.density-cozy .kb-cat__title { font-size: 15.5px; }
body.density-cozy .kb-cat__desc { font-size: 13.5px; line-height: 1.45; }
body.density-cozy .kb-hero { padding-top: var(--hero-pad-y); padding-bottom: calc(var(--hero-pad-y) - 8px); }

/* ─── Tweak 3: Hero treatment ────────────────────────────────────────────── */
/* Replaces the hero background with three distinct atmospheres.            */

/* Hero: glow (default) — keep as-is. */

/* Hero: grid — blueprint mesh, drafting paper. */
body.hero-grid .kb-hero {
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/44px 44px,
    radial-gradient(900px 380px at 30% 40%, rgba(25,128,230,.22), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--navy-800));
}
body.hero-grid .kb-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 50%, transparent 30%, var(--navy-900) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Hero: beam — diagonal light beam slicing across. */
body.hero-beam .kb-hero {
  background:
    linear-gradient(112deg,
      transparent 0%,
      transparent 38%,
      rgba(0,163,224,.28) 48%,
      rgba(25,128,230,.34) 56%,
      transparent 70%,
      transparent 100%),
    radial-gradient(700px 240px at 90% 100%, rgba(0,163,224,.18), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--navy-800));
}
body.hero-beam .kb-hero::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  background:
    repeating-linear-gradient(112deg,
      transparent 0 80px,
      rgba(255,255,255,.025) 80px 81px);
  pointer-events: none;
  z-index: 0;
}

/* Hero: aperture — concentric rings emanating from a focal point. */
body.hero-aperture .kb-hero {
  background:
    radial-gradient(circle at 80% 30%,
      rgba(0,163,224,.45) 0%,
      rgba(0,163,224,.0) 5%,
      rgba(0,163,224,.18) 5.5%,
      rgba(0,163,224,.0) 11%,
      rgba(25,128,230,.18) 11.5%,
      rgba(25,128,230,.0) 22%,
      rgba(25,128,230,.12) 22.5%,
      rgba(25,128,230,.0) 38%),
    linear-gradient(180deg, var(--navy-900), var(--navy-800));
}

/* Editorial mood + grid hero looks bad — soften with paper tone */
body.mood-editorial .kb-hero {
  background:
    radial-gradient(800px 280px at 20% 0%, rgba(211,156,61,.22), transparent 60%),
    radial-gradient(700px 240px at 90% 100%, rgba(20,149,132,.20), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--navy-800));
}
body.mood-editorial.hero-grid .kb-hero {
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0/44px 44px,
    radial-gradient(800px 320px at 30% 40%, rgba(211,156,61,.24), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--navy-800));
}
body.mood-editorial.hero-beam .kb-hero {
  background:
    linear-gradient(112deg,
      transparent 38%,
      rgba(211,156,61,.32) 48%,
      rgba(20,149,132,.34) 56%,
      transparent 70%),
    linear-gradient(180deg, var(--navy-900), var(--navy-800));
}

/* Graphite + glow → desaturate the glow */
body.mood-graphite .kb-hero {
  background:
    radial-gradient(800px 280px at 20% 0%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(700px 240px at 90% 100%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--navy-800));
}
body.mood-graphite.hero-grid .kb-hero {
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(180deg, var(--navy-900), var(--navy-800));
}
body.mood-graphite.hero-beam .kb-hero {
  background:
    linear-gradient(112deg, transparent 38%, rgba(255,255,255,.18) 48%, rgba(255,255,255,.22) 56%, transparent 70%),
    linear-gradient(180deg, var(--navy-900), var(--navy-800));
}