/* === MOODS === */

/* Refined — default (already in styles.css) */

/* Editorial — warm cream, serif-forward, magazine grade */
html.mood-editorial body {
  background: #FAF6EE;
  color: #2A2620;
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-feature-settings: "ss01";
}
html.mood-editorial {
  --bg: #FAF6EE;
  --bg-soft: #F2EBDB;
  --bg-cool: #EFE7D0;
  --line: #E5DCC4;
  --line-soft: #EFE6CE;
  --ink-900: #2A2620;
  --ink-700: #4D4538;
  --ink-500: #786C57;
  --ink-400: #A9967A;
  --ink-300: #C7B79A;
  --navy-900: #2A2620;
  --navy-800: #2E2920;
  --navy-700: #3F3729;
  --navy-600: #5C4F38;
}
html.mood-editorial h1, html.mood-editorial h2, html.mood-editorial h3, html.mood-editorial h4 {
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  letter-spacing: -.018em;
  color: var(--navy-800);
}
html.mood-editorial h1 { letter-spacing: -.025em; font-weight: 400; }
html.mood-editorial .serif-italic { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400; }
html.mood-editorial .nav.scrolled { background: rgba(250,246,238,.78); border-bottom-color: rgba(42,38,32,.08); }
html.mood-editorial .hero-bg {
  background:
    radial-gradient(circle at 80% 20%, rgba(200,164,81,.18) 0%, transparent 45%),
    radial-gradient(circle at 10% 80%, rgba(42,38,32,.04) 0%, transparent 50%),
    linear-gradient(180deg, #FAF6EE 0%, #F4EBD9 100%);
}
html.mood-editorial .hero-bg-grid { opacity: .35; }
html.mood-editorial .btn-primary { background: linear-gradient(180deg, var(--navy-800), #1C1A14); color: #FAF6EE; box-shadow: 0 8px 24px -8px rgba(42,38,32,.35); }
html.mood-editorial .btn-ghost { background: rgba(42,38,32,.04); border-color: rgba(42,38,32,.08); color: var(--navy-800); }
html.mood-editorial .hero-card, html.mood-editorial .blocker, html.mood-editorial .strategy-card,
html.mood-editorial .stat-card, html.mood-editorial .t-card, html.mood-editorial .value-card,
html.mood-editorial .hiw-stage, html.mood-editorial .p-card, html.mood-editorial .vli {
  background: #FFFCF4;
  border-color: var(--line-soft);
  box-shadow: 0 1px 2px rgba(42,38,32,.05), 0 12px 32px -10px rgba(42,38,32,.08);
}
html.mood-editorial .hiw {
  background: linear-gradient(180deg, #F4EBD9 0%, #EFE6CE 100%);
}
html.mood-editorial .value-sec {
  background: linear-gradient(180deg, #F4EBD9 0%, #EFE6CE 100%);
}
html.mood-editorial .trust-bar { background: linear-gradient(180deg, #FAF6EE 0%, #F4EBD9 100%); }
html.mood-editorial .portal-side { background: #F4EBD9; }
html.mood-editorial .portal-frame, html.mood-editorial .portal-wrap { background: #FFFCF4; }
html.mood-editorial .cta-block {
  background:
    radial-gradient(circle at 80% 0%, rgba(200,164,81,.4) 0%, transparent 50%),
    linear-gradient(160deg, #2E2920 0%, #1C1A14 100%);
}
html.mood-editorial footer { background: #1C1A14; }

/* Midnight — dark mode with luminous accents */
html.mood-midnight body {
  background: #06080F;
  color: #E2E8F4;
}
html.mood-midnight {
  --bg: #06080F;
  --bg-soft: #0D1220;
  --bg-cool: #111829;
  --line: #1B2438;
  --line-soft: #131A2A;
  --ink-900: #E2E8F4;
  --ink-700: #B6BFD2;
  --ink-500: #8995AD;
  --ink-400: #6A748B;
  --ink-300: #4D5670;
  --navy-900: #E2E8F4;
  --navy-800: #F2F5FB;
  --navy-700: #B6BFD2;
  --navy-600: #8995AD;
}
html.mood-midnight h1, html.mood-midnight h2, html.mood-midnight h3, html.mood-midnight h4 { color: #F2F5FB; }
html.mood-midnight p, html.mood-midnight .lbl, html.mood-midnight .sub, html.mood-midnight .desc { color: #8995AD; }
html.mood-midnight .nav.scrolled {
  background: rgba(6,8,15,.7);
  border-bottom-color: rgba(255,255,255,.06);
}
html.mood-midnight .nav-links { color: #B6BFD2; }
html.mood-midnight .nav-logo img { filter: brightness(0) invert(1); }
html.mood-midnight .hero-bg {
  background:
    radial-gradient(circle at 80% 20%, rgba(31,182,176,.25) 0%, transparent 45%),
    radial-gradient(circle at 10% 80%, rgba(15,42,92,.45) 0%, transparent 50%),
    linear-gradient(180deg, #06080F 0%, #0A1024 100%);
}
html.mood-midnight .hero-bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
}
html.mood-midnight .hero-card, html.mood-midnight .blocker, html.mood-midnight .strategy-card,
html.mood-midnight .stat-card, html.mood-midnight .t-card, html.mood-midnight .value-card,
html.mood-midnight .hiw-stage, html.mood-midnight .p-card, html.mood-midnight .vli, html.mood-midnight .faq-item {
  background: #0E1424;
  border-color: rgba(255,255,255,.07);
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -16px rgba(31,182,176,.15);
  color: #E2E8F4;
}
html.mood-midnight .hiw, html.mood-midnight .value-sec {
  background: linear-gradient(180deg, #06080F 0%, #0B1124 100%);
}
html.mood-midnight .pane-r { background: #060A18; border-color: rgba(255,255,255,.05); }
html.mood-midnight .viz-fade > div { background: #0E1424 !important; border-color: rgba(255,255,255,.07) !important; box-shadow: 0 1px 2px rgba(0,0,0,.3) !important; }
html.mood-midnight .trust-bar { background: linear-gradient(180deg, #06080F 0%, #0B1124 100%); border-color: rgba(255,255,255,.06); }
html.mood-midnight .trust-item { color: #B6BFD2; }
html.mood-midnight .trust-item .ic { background: #0E1424; border-color: rgba(255,255,255,.08); color: var(--teal-400); }
html.mood-midnight .portal-frame, html.mood-midnight .portal-wrap { background: #0B1124; border-color: rgba(255,255,255,.07); }
html.mood-midnight .portal-side { background: #060A18; border-color: rgba(255,255,255,.06); }
html.mood-midnight .portal-side .nav-item.active { background: #0E1424; color: #F2F5FB; }
html.mood-midnight .portal-side .nav-item:hover { background: rgba(255,255,255,.04); }
html.mood-midnight .portal-topbar { border-color: rgba(255,255,255,.06); }
html.mood-midnight .portal-topbar .url { background: #0E1424; border-color: rgba(255,255,255,.07); color: #8995AD; }
html.mood-midnight .eyebrow { background: rgba(31,182,176,.12); border-color: rgba(31,182,176,.25); color: var(--teal-200); }
html.mood-midnight .btn-ghost { background: rgba(255,255,255,.06); color: #E2E8F4; border-color: rgba(255,255,255,.08); }
html.mood-midnight .hero-meta, html.mood-midnight .hero-meta .item { color: #8995AD; }
html.mood-midnight .hero-meta .check { background: rgba(31,182,176,.15); }
html.mood-midnight .hero-meta .divider { background: rgba(255,255,255,.1); }
html.mood-midnight .logo-strip { border-color: rgba(255,255,255,.06); }
html.mood-midnight .logo-strip .l { color: #6A748B; }
html.mood-midnight .hiw-rail::before { opacity: .3; }
html.mood-midnight .hiw-step-head .num { background: #0E1424; border-color: rgba(255,255,255,.1); color: #B6BFD2; }
html.mood-midnight .hiw-step-head .lbl { color: #8995AD; }
html.mood-midnight .hiw-step-head.active .lbl { color: #F2F5FB; }
html.mood-midnight .blocker .icn { background: linear-gradient(160deg, rgba(31,182,176,.15), transparent 100%); border-color: rgba(31,182,176,.2); color: var(--teal-400); }
html.mood-midnight .strategy-card .ic-lg { background: linear-gradient(160deg, rgba(31,182,176,.15), transparent 100%); border-color: rgba(31,182,176,.2); color: var(--teal-400); }
html.mood-midnight .blocker .impact-bar, html.mood-midnight .stat-card .mini-bar { background: rgba(255,255,255,.07); }
html.mood-midnight .stat-card { background: linear-gradient(180deg, #0E1424 0%, #0B1124 100%); }
html.mood-midnight .faq-item { background: transparent; border-bottom-color: rgba(255,255,255,.07); }
html.mood-midnight .faq-q .plus { background: rgba(255,255,255,.06); color: #B6BFD2; }
html.mood-midnight footer { background: #04060C; }

/* === DENSITY === */
html.density-spacious .section { padding: 160px 0; }
html.density-spacious .section-tight { padding: 120px 0; }
html.density-spacious .hero { padding: 200px 0 120px; }
html.density-spacious .hero-card { padding: 26px; }
html.density-spacious .blocker, html.density-spacious .strategy-card { padding: 32px; }
html.density-spacious .hero h1 { font-size: clamp(44px, 7.2vw, 96px); }
html.density-spacious h2 { font-size: clamp(36px, 4.8vw, 64px); }
html.density-spacious .hero p.lead { font-size: 21px; }

html.density-balanced .section { padding: 120px 0; }
html.density-balanced .section-tight { padding: 88px 0; }

html.density-compact .section { padding: 80px 0; }
html.density-compact .section-tight { padding: 60px 0; }
html.density-compact .hero { padding: 130px 0 56px; }
html.density-compact .hero-card { padding: 18px; }
html.density-compact .blocker, html.density-compact .strategy-card { padding: 20px; }
html.density-compact .hero h1 { font-size: clamp(36px, 5.4vw, 68px); }
html.density-compact h2 { font-size: clamp(28px, 3.6vw, 46px); }
html.density-compact .hero p.lead { font-size: 17px; margin-top: 20px; }
html.density-compact .hero-ctas { margin-top: 28px; }
html.density-compact .hero-meta { margin-top: 28px; }
html.density-compact .section-title { margin-bottom: 0; }
html.density-compact .problem-grid { margin-top: 40px; gap: 12px; }
html.density-compact .strategy-grid { margin-top: 40px; gap: 12px; }
html.density-compact .results-grid { margin-top: 32px; gap: 12px; }
html.density-compact .testimonial { margin-top: 36px; gap: 12px; }
html.density-compact .hiw-track { margin-top: 40px; }
html.density-compact .hiw-stage { padding: 24px; min-height: 360px; gap: 24px; }
html.density-compact .portal-wrap { margin-top: 36px; }
html.density-compact .cta-block { padding: 56px 36px; }