/* =========================================
   GET UNSTUCK — DESIGN SYSTEM v1
   ELEVATE architecture · dojo aesthetic
   =========================================
   Token map (edit here, everything follows):
   1. BASE VARIABLES
   2. THEMES
   3. TYPOGRAPHY SCALES
   4. RESET & BASE
   5. LAYOUT
   6. HEADER & NAV
   7. HERO
   8. COMPONENTS (cards, buttons, badges, progress)
   9. DRILL LAYOUT
   10. POST / ARTICLE LAYOUT
   11. SITEMAP PAGE
   12. FOOTER
   13. UTILITIES & ANIMATIONS
   ========================================= */


/* =========================================
   1. BASE VARIABLES (dojo default)
   ========================================= */

:root {
  /* surfaces */
  --bg:           #F3EDE2;
  --bg-deep:      #EAE2D2;
  --surface:      #F8F4EC;
  --surface-soft: #FDFAF5;

  /* type */
  --text:         #211C16;
  --muted:        #5C5347;
  --faint:        #8A8073;

  /* accent */
  --primary:      #9E5A34;
  --primary-soft: #F2E6DA;
  --primary-strong: #7A4022;

  /* borders & shadow */
  --border:       rgba(33, 28, 22, 0.14);
  --border-soft:  rgba(33, 28, 22, 0.07);
  --shadow-sm:    0 2px 6px rgba(33, 28, 22, 0.06);
  --shadow-md:    0 10px 30px rgba(33, 28, 22, 0.10);
  --shadow-lg:    0 20px 60px rgba(33, 28, 22, 0.14);

  /* radii */
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    16px;

  /* type scale */
  --fs-base:      17px;
  --fs-xl:        28px;
  --fs-3xl:       56px;

  /* spacing */
  --measure:      680px;
  --spacing-section: 80px;
}


/* =========================================
   2. THEMES
   Each theme sets:
   - Surface tokens  (bg, surface, text, muted, faint)
   - Accent tokens   (primary, primary-soft, primary-strong)
   - Border/shadow   tokens
   - Gradient tokens (hero, ink section, accent section, button, card hover)
   Switch theme: set unstuck_theme: <name> in _config.yml
   ========================================= */

/* ── Gradient tokens for dojo (root default) ── */
:root {
  --hero-gradient:        linear-gradient(135deg, #F3EDE2 0%, #ECE3D0 45%, #F5EFE4 100%);
  --ink-gradient:         linear-gradient(135deg, #100C08 0%, #0A0806 50%, #0E0A06 100%);
  --accent-gradient:      linear-gradient(135deg, #EAE2D2 0%, #E2D8C4 100%);
  --btn-gradient:         linear-gradient(135deg, #B4642A 0%, #9E5A34 50%, #7A4022 100%);
  --btn-gradient-hover:   linear-gradient(135deg, #9E5A34 0%, #7A4022 100%);
  --card-hover-gradient:  linear-gradient(135deg, #F8F4EC 0%, #F2E8D8 100%);
  --surface-gradient:     linear-gradient(160deg, #F8F4EC 0%, #F5F1E8 100%);

  /* ── Header tokens (light-theme defaults; dark themes override below) ── */
  --header-bg:            color-mix(in srgb, var(--bg) 84%, transparent);
  --header-backdrop:      blur(20px) saturate(180%);
  --header-shadow:        0 1px 18px rgba(0,0,0,0.09), 0 0 0 1px var(--border);
  --header-border:        var(--border);
  --header-logo-gradient: linear-gradient(135deg, var(--primary-strong) 0%, var(--primary) 55%, var(--primary-strong) 100%);
  --header-tagline:       var(--muted);
  --header-nav:           var(--muted);
  --header-nav-active:    var(--primary);
  --header-nav-hover-bg:  var(--primary-soft);
  --header-dropdown-bg:   var(--surface);
  --header-dropdown-link: var(--text);
  --header-hamburger:     var(--text);
}

/* ── MIDNIGHT — deep ink, electric indigo ── */
[data-theme="midnight"] {
  --bg:             #0C0C18;
  --bg-deep:        #06060E;
  --surface:        #13131F;
  --surface-soft:   #1A1A2A;
  --text:           #E8ECFF;
  --muted:          #8890B8;
  --faint:          #404870;
  --primary:        #818CF8;
  --primary-soft:   rgba(129,140,248,0.14);
  --primary-strong: #6366F1;
  --border:         rgba(255,255,255,0.08);
  --border-soft:    rgba(255,255,255,0.04);
  --shadow-sm:      0 2px 10px rgba(0,0,0,0.4);
  --shadow-md:      0 10px 30px rgba(0,0,0,0.55);
  --shadow-lg:      0 20px 60px rgba(0,0,0,0.7);

  --hero-gradient:        linear-gradient(135deg, #0C0C18 0%, #0E0E24 50%, #0A0A1E 100%);
  --ink-gradient:         linear-gradient(135deg, #06060E 0%, #0C0C1E 60%, #08081A 100%);
  --accent-gradient:      linear-gradient(135deg, #13131F 0%, #1A1A30 100%);
  --btn-gradient:         linear-gradient(135deg, #A5B4FC 0%, #818CF8 50%, #6366F1 100%);
  --btn-gradient-hover:   linear-gradient(135deg, #818CF8 0%, #6366F1 100%);
  --card-hover-gradient:  linear-gradient(135deg, #13131F 0%, #1A1A30 100%);
  --surface-gradient:     linear-gradient(160deg, #13131F 0%, #16162A 100%);
}

/* ── FOREST — deep woodland, vivid emerald ── */
[data-theme="forest"] {
  --bg:             #0E1A10;
  --bg-deep:        #080F09;
  --surface:        #162018;
  --surface-soft:   #1E2A20;
  --text:           #E2EDE4;
  --muted:          #80AA88;
  --faint:          #3E6045;
  --primary:        #4ADE80;
  --primary-soft:   rgba(74,222,128,0.14);
  --primary-strong: #22C55E;
  --border:         rgba(74,222,128,0.13);
  --border-soft:    rgba(74,222,128,0.06);
  --shadow-sm:      0 2px 10px rgba(0,0,0,0.35);
  --shadow-md:      0 10px 30px rgba(0,0,0,0.45);
  --shadow-lg:      0 20px 60px rgba(0,0,0,0.55);

  --hero-gradient:        linear-gradient(135deg, #0E1A10 0%, #0A1410 45%, #101E12 100%);
  --ink-gradient:         linear-gradient(135deg, #080F09 0%, #0E1A10 55%, #070D08 100%);
  --accent-gradient:      linear-gradient(135deg, #162018 0%, #1E2A20 100%);
  --btn-gradient:         linear-gradient(135deg, #86EFAC 0%, #4ADE80 50%, #22C55E 100%);
  --btn-gradient-hover:   linear-gradient(135deg, #4ADE80 0%, #22C55E 100%);
  --card-hover-gradient:  linear-gradient(135deg, #162018 0%, #1E2A20 100%);
  --surface-gradient:     linear-gradient(160deg, #162018 0%, #192218 100%);
}

/* ── SUNSET — golden hour editorial, warm terracotta ── */
[data-theme="sunset"] {
  --bg:             #FFF7F0;
  --bg-deep:        #FFE6CC;
  --surface:        #FFFAF5;
  --surface-soft:   #FFFFFF;
  --text:           #1E0C04;
  --muted:          #7A3C1A;
  --faint:          #C07848;
  --primary:        #C94B1E;
  --primary-soft:   #FAEADE;
  --primary-strong: #A33B15;
  --border:         rgba(30,12,4,0.13);
  --border-soft:    rgba(30,12,4,0.06);
  --shadow-sm:      0 2px 6px rgba(30,12,4,0.06);
  --shadow-md:      0 10px 30px rgba(30,12,4,0.10);
  --shadow-lg:      0 20px 60px rgba(30,12,4,0.14);

  --hero-gradient:        linear-gradient(135deg, #FFF7F0 0%, #FFE8D4 45%, #FFD8B0 100%);
  --ink-gradient:         linear-gradient(135deg, #1E0C04 0%, #380E08 45%, #2A0606 100%);
  --accent-gradient:      linear-gradient(135deg, #FFE6CC 0%, #FFD8B8 100%);
  --btn-gradient:         linear-gradient(135deg, #E8622A 0%, #C94B1E 50%, #A33B15 100%);
  --btn-gradient-hover:   linear-gradient(135deg, #C94B1E 0%, #A33B15 100%);
  --card-hover-gradient:  linear-gradient(135deg, #FFFAF5 0%, #FFF0E0 100%);
  --surface-gradient:     linear-gradient(160deg, #FFFAF5 0%, #FFF6EE 100%);
}

/* ── SLATE — executive light, distinguished navy-blue ── */
[data-theme="slate"] {
  --bg:             #F7F9FC;
  --bg-deep:        #EDF1F7;
  --surface:        #FFFFFF;
  --surface-soft:   #F7F9FC;
  --text:           #0F172A;
  --muted:          #475569;
  --faint:          #94A3B8;
  --primary:        #1D4ED8;
  --primary-soft:   #EFF6FF;
  --primary-strong: #1E40AF;
  --border:         rgba(15,23,42,0.11);
  --border-soft:    rgba(15,23,42,0.055);
  --shadow-sm:      0 2px 6px rgba(15,23,42,0.055);
  --shadow-md:      0 10px 30px rgba(15,23,42,0.085);
  --shadow-lg:      0 20px 60px rgba(15,23,42,0.11);

  --hero-gradient:        linear-gradient(135deg, #F7F9FC 0%, #EDF1F7 45%, #E0EAFB 100%);
  --ink-gradient:         linear-gradient(135deg, #0F172A 0%, #1E293B 55%, #162044 100%);
  --accent-gradient:      linear-gradient(135deg, #EDF1F7 0%, #DDEAFF 100%);
  --btn-gradient:         linear-gradient(135deg, #3B82F6 0%, #1D4ED8 50%, #1E40AF 100%);
  --btn-gradient-hover:   linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%);
  --card-hover-gradient:  linear-gradient(135deg, #FFFFFF 0%, #EFF6FF 100%);
  --surface-gradient:     linear-gradient(160deg, #FFFFFF 0%, #F7F9FC 100%);
}

/* ── MONO — pure editorial, zero colour ── */
[data-theme="mono"] {
  --bg: #ffffff; --bg-deep: #f2f2f2;
  --surface: #ffffff; --surface-soft: #fafafa;
  --text: #0a0a0a; --muted: #404040; --faint: #6b6b6b;
  --primary: #0a0a0a; --primary-soft: #ebebeb; --primary-strong: #000000;
  --border: rgba(0,0,0,0.15); --border-soft: rgba(0,0,0,0.07);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.07); --shadow-md: 0 10px 30px rgba(0,0,0,0.1); --shadow-lg: 0 20px 60px rgba(0,0,0,0.14);
  --hero-gradient:       linear-gradient(135deg, #ffffff 0%, #f7f7f7 100%);
  --ink-gradient:        linear-gradient(135deg, #0a0a0a 0%, #141414 100%);
  --accent-gradient:     linear-gradient(135deg, #f2f2f2 0%, #e8e8e8 100%);
  --btn-gradient:        linear-gradient(135deg, #2a2a2a 0%, #0a0a0a 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #111111 0%, #000000 100%);
  --card-hover-gradient: linear-gradient(135deg, #fafafa 0%, #ebebeb 100%);
  --surface-gradient:    linear-gradient(160deg, #ffffff 0%, #f7f7f7 100%);
}

/* ── Light accent themes — each with its own tinted canvas + deep accent header ── */

/* indigo — lavender canvas, electric indigo */
[data-theme="indigo"] {
  --bg: #F0ECFF; --bg-deep: #E4DCFF;
  --surface: #FAFAFF; --surface-soft: #F0ECFF;
  --text: #1A1828; --muted: #504878; --faint: #A8A0C8;
  --primary: #4F46E5; --primary-soft: #EEF2FF; --primary-strong: #4338CA;
  --border: rgba(79,70,229,0.14); --border-soft: rgba(79,70,229,0.07);
  --shadow-sm: 0 2px 6px rgba(79,70,229,0.09); --shadow-md: 0 10px 30px rgba(79,70,229,0.13); --shadow-lg: 0 20px 60px rgba(79,70,229,0.18);
  --hero-gradient:       linear-gradient(135deg, #F0ECFF 0%, #E4DCFF 45%, #D8CCFF 100%);
  --ink-gradient:        linear-gradient(135deg, #0A081A 0%, #100E28 50%, #0A0818 100%);
  --accent-gradient:     linear-gradient(135deg, #E4DCFF 0%, #D8CCFF 100%);
  --btn-gradient:        linear-gradient(135deg, #818CF8 0%, #4F46E5 50%, #4338CA 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #4F46E5 0%, #4338CA 100%);
  --card-hover-gradient: linear-gradient(135deg, #FAFAFF 0%, #EEF2FF 100%);
  --surface-gradient:    linear-gradient(160deg, #FAFAFF 0%, #F0ECFF 100%);
}

/* emerald — mint canvas, vivid emerald */
[data-theme="emerald"] {
  --bg: #EAFAF3; --bg-deep: #D4F5E8;
  --surface: #F6FFFE; --surface-soft: #EAFAF3;
  --text: #142018; --muted: #386850; --faint: #90C0A8;
  --primary: #059669; --primary-soft: #ECFDF5; --primary-strong: #047857;
  --border: rgba(5,150,105,0.14); --border-soft: rgba(5,150,105,0.07);
  --shadow-sm: 0 2px 6px rgba(5,150,105,0.09); --shadow-md: 0 10px 30px rgba(5,150,105,0.13); --shadow-lg: 0 20px 60px rgba(5,150,105,0.18);
  --hero-gradient:       linear-gradient(135deg, #EAFAF3 0%, #D4F5E8 45%, #BCEEDD 100%);
  --ink-gradient:        linear-gradient(135deg, #041A12 0%, #082018 50%, #041A10 100%);
  --accent-gradient:     linear-gradient(135deg, #D4F5E8 0%, #BCEEDD 100%);
  --btn-gradient:        linear-gradient(135deg, #34D399 0%, #059669 50%, #047857 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #059669 0%, #047857 100%);
  --card-hover-gradient: linear-gradient(135deg, #F6FFFE 0%, #ECFDF5 100%);
  --surface-gradient:    linear-gradient(160deg, #F6FFFE 0%, #EAFAF3 100%);
}

/* amber — warm honey canvas, rich amber */
[data-theme="amber"] {
  --bg: #FFF6E0; --bg-deep: #FFEEC0;
  --surface: #FFFCF4; --surface-soft: #FFF6E0;
  --text: #1A1200; --muted: #6B4E00; --faint: #C09840;
  --primary: #D97706; --primary-soft: #FFFBEB; --primary-strong: #B45309;
  --border: rgba(217,119,6,0.14); --border-soft: rgba(217,119,6,0.07);
  --shadow-sm: 0 2px 6px rgba(217,119,6,0.09); --shadow-md: 0 10px 30px rgba(217,119,6,0.13); --shadow-lg: 0 20px 60px rgba(217,119,6,0.18);
  --hero-gradient:       linear-gradient(135deg, #FFF6E0 0%, #FFEEC0 45%, #FFE4A0 100%);
  --ink-gradient:        linear-gradient(135deg, #160E00 0%, #1E1400 50%, #160A00 100%);
  --accent-gradient:     linear-gradient(135deg, #FFEEC0 0%, #FFE4A0 100%);
  --btn-gradient:        linear-gradient(135deg, #FBBF24 0%, #D97706 50%, #B45309 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #D97706 0%, #B45309 100%);
  --card-hover-gradient: linear-gradient(135deg, #FFFCF4 0%, #FFFBEB 100%);
  --surface-gradient:    linear-gradient(160deg, #FFFCF4 0%, #FFF6E0 100%);
}

/* rose — blush canvas, vivid rose */
[data-theme="rose"] {
  --bg: #FFE8F0; --bg-deep: #FFD4E4;
  --surface: #FFF5FA; --surface-soft: #FFE8F0;
  --text: #1A0810; --muted: #6B2840; --faint: #C890A8;
  --primary: #E11D48; --primary-soft: #FFF1F2; --primary-strong: #BE123C;
  --border: rgba(225,29,72,0.14); --border-soft: rgba(225,29,72,0.07);
  --shadow-sm: 0 2px 6px rgba(225,29,72,0.09); --shadow-md: 0 10px 30px rgba(225,29,72,0.13); --shadow-lg: 0 20px 60px rgba(225,29,72,0.18);
  --hero-gradient:       linear-gradient(135deg, #FFE8F0 0%, #FFD4E4 45%, #FFC0D8 100%);
  --ink-gradient:        linear-gradient(135deg, #160610 0%, #1E0816 50%, #160410 100%);
  --accent-gradient:     linear-gradient(135deg, #FFD4E4 0%, #FFC0D8 100%);
  --btn-gradient:        linear-gradient(135deg, #FB7185 0%, #E11D48 50%, #BE123C 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #E11D48 0%, #BE123C 100%);
  --card-hover-gradient: linear-gradient(135deg, #FFF5FA 0%, #FFF1F2 100%);
  --surface-gradient:    linear-gradient(160deg, #FFF5FA 0%, #FFE8F0 100%);
}

/* cyan — ice blue canvas, bright cyan */
[data-theme="cyan"] {
  --bg: #E4F8FF; --bg-deep: #CCF2FF;
  --surface: #F2FCFF; --surface-soft: #E4F8FF;
  --text: #041820; --muted: #206880; --faint: #80C8D8;
  --primary: #0891B2; --primary-soft: #ECFEFF; --primary-strong: #0E7490;
  --border: rgba(8,145,178,0.14); --border-soft: rgba(8,145,178,0.07);
  --shadow-sm: 0 2px 6px rgba(8,145,178,0.09); --shadow-md: 0 10px 30px rgba(8,145,178,0.13); --shadow-lg: 0 20px 60px rgba(8,145,178,0.18);
  --hero-gradient:       linear-gradient(135deg, #E4F8FF 0%, #CCF2FF 45%, #B4ECFF 100%);
  --ink-gradient:        linear-gradient(135deg, #041820 0%, #081E28 50%, #041420 100%);
  --accent-gradient:     linear-gradient(135deg, #CCF2FF 0%, #B4ECFF 100%);
  --btn-gradient:        linear-gradient(135deg, #22D3EE 0%, #0891B2 50%, #0E7490 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #0891B2 0%, #0E7490 100%);
  --card-hover-gradient: linear-gradient(135deg, #F2FCFF 0%, #ECFEFF 100%);
  --surface-gradient:    linear-gradient(160deg, #F2FCFF 0%, #E4F8FF 100%);
}

/* violet — deep lavender canvas, vivid violet */
[data-theme="violet"] {
  --bg: #EDE6FF; --bg-deep: #E0D4FF;
  --surface: #F5F0FF; --surface-soft: #EDE6FF;
  --text: #120A1E; --muted: #4A2880; --faint: #A888D8;
  --primary: #7C3AED; --primary-soft: #F5F3FF; --primary-strong: #6D28D9;
  --border: rgba(124,58,237,0.14); --border-soft: rgba(124,58,237,0.07);
  --shadow-sm: 0 2px 6px rgba(124,58,237,0.09); --shadow-md: 0 10px 30px rgba(124,58,237,0.13); --shadow-lg: 0 20px 60px rgba(124,58,237,0.18);
  --hero-gradient:       linear-gradient(135deg, #EDE6FF 0%, #E0D4FF 45%, #D0C0FF 100%);
  --ink-gradient:        linear-gradient(135deg, #0E081C 0%, #160C28 50%, #0E0818 100%);
  --accent-gradient:     linear-gradient(135deg, #E0D4FF 0%, #D0C0FF 100%);
  --btn-gradient:        linear-gradient(135deg, #A78BFA 0%, #7C3AED 50%, #6D28D9 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
  --card-hover-gradient: linear-gradient(135deg, #F5F0FF 0%, #F5F3FF 100%);
  --surface-gradient:    linear-gradient(160deg, #F5F0FF 0%, #EDE6FF 100%);
}

/* oasis — plum canvas, deep purple */
[data-theme="oasis"] {
  --bg: #F5DCFF; --bg-deep: #ECC8FF;
  --surface: #FBF0FF; --surface-soft: #F5DCFF;
  --text: #130818; --muted: #502060; --faint: #B080C8;
  --primary: #7C2D8C; --primary-soft: #FDF4FF; --primary-strong: #6B21A8;
  --border: rgba(124,45,140,0.14); --border-soft: rgba(124,45,140,0.07);
  --shadow-sm: 0 2px 6px rgba(124,45,140,0.09); --shadow-md: 0 10px 30px rgba(124,45,140,0.13); --shadow-lg: 0 20px 60px rgba(124,45,140,0.18);
  --hero-gradient:       linear-gradient(135deg, #F5DCFF 0%, #ECC8FF 45%, #E0B4FF 100%);
  --ink-gradient:        linear-gradient(135deg, #110818 0%, #180C22 50%, #110818 100%);
  --accent-gradient:     linear-gradient(135deg, #ECC8FF 0%, #E0B4FF 100%);
  --btn-gradient:        linear-gradient(135deg, #C084FC 0%, #7C2D8C 50%, #6B21A8 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #7C2D8C 0%, #6B21A8 100%);
  --card-hover-gradient: linear-gradient(135deg, #FBF0FF 0%, #FDF4FF 100%);
  --surface-gradient:    linear-gradient(160deg, #FBF0FF 0%, #F5DCFF 100%);
}

/* berry — deep pink canvas, deep berry */
[data-theme="berry"] {
  --bg: #FFE0F0; --bg-deep: #FFD0E8;
  --surface: #FFF4FB; --surface-soft: #FFE0F0;
  --text: #14060E; --muted: #60203A; --faint: #C080A0;
  --primary: #9D174D; --primary-soft: #FDF2F8; --primary-strong: #831843;
  --border: rgba(157,23,77,0.14); --border-soft: rgba(157,23,77,0.07);
  --shadow-sm: 0 2px 6px rgba(157,23,77,0.09); --shadow-md: 0 10px 30px rgba(157,23,77,0.13); --shadow-lg: 0 20px 60px rgba(157,23,77,0.18);
  --hero-gradient:       linear-gradient(135deg, #FFE0F0 0%, #FFD0E8 45%, #FFC0DC 100%);
  --ink-gradient:        linear-gradient(135deg, #14060E 0%, #1C0A16 50%, #14060E 100%);
  --accent-gradient:     linear-gradient(135deg, #FFD0E8 0%, #FFC0DC 100%);
  --btn-gradient:        linear-gradient(135deg, #F472B6 0%, #9D174D 50%, #831843 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #9D174D 0%, #831843 100%);
  --card-hover-gradient: linear-gradient(135deg, #FFF4FB 0%, #FDF2F8 100%);
  --surface-gradient:    linear-gradient(160deg, #FFF4FB 0%, #FFE0F0 100%);
}

/* delight — bright red canvas, vivid red */
[data-theme="delight"] {
  --bg: #FFE4E4; --bg-deep: #FFD4D4;
  --surface: #FFF5F5; --surface-soft: #FFE4E4;
  --text: #160404; --muted: #600E0E; --faint: #C07878;
  --primary: #DC2626; --primary-soft: #FEF2F2; --primary-strong: #B91C1C;
  --border: rgba(220,38,38,0.14); --border-soft: rgba(220,38,38,0.07);
  --shadow-sm: 0 2px 6px rgba(220,38,38,0.09); --shadow-md: 0 10px 30px rgba(220,38,38,0.13); --shadow-lg: 0 20px 60px rgba(220,38,38,0.18);
  --hero-gradient:       linear-gradient(135deg, #FFE4E4 0%, #FFD4D4 45%, #FFC4C4 100%);
  --ink-gradient:        linear-gradient(135deg, #160404 0%, #1E0606 50%, #160404 100%);
  --accent-gradient:     linear-gradient(135deg, #FFD4D4 0%, #FFC4C4 100%);
  --btn-gradient:        linear-gradient(135deg, #F87171 0%, #DC2626 50%, #B91C1C 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
  --card-hover-gradient: linear-gradient(135deg, #FFF5F5 0%, #FEF2F2 100%);
  --surface-gradient:    linear-gradient(160deg, #FFF5F5 0%, #FFE4E4 100%);
}

/* summer_sunset — warm pink canvas, deep rose */
[data-theme="summer_sunset"] {
  --bg: #FFE4EE; --bg-deep: #FFD4E4;
  --surface: #FFF5F8; --surface-soft: #FFE4EE;
  --text: #14060C; --muted: #5A1838; --faint: #C07890;
  --primary: #BE185D; --primary-soft: #FDF2F8; --primary-strong: #9D174D;
  --border: rgba(190,24,93,0.14); --border-soft: rgba(190,24,93,0.07);
  --shadow-sm: 0 2px 6px rgba(190,24,93,0.09); --shadow-md: 0 10px 30px rgba(190,24,93,0.13); --shadow-lg: 0 20px 60px rgba(190,24,93,0.18);
  --hero-gradient:       linear-gradient(135deg, #FFE4EE 0%, #FFD4E4 45%, #FFC4D8 100%);
  --ink-gradient:        linear-gradient(135deg, #14060C 0%, #1C0A14 50%, #14060C 100%);
  --accent-gradient:     linear-gradient(135deg, #FFD4E4 0%, #FFC4D8 100%);
  --btn-gradient:        linear-gradient(135deg, #F472B6 0%, #BE185D 50%, #9D174D 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #BE185D 0%, #9D174D 100%);
  --card-hover-gradient: linear-gradient(135deg, #FFF5F8 0%, #FDF2F8 100%);
  --surface-gradient:    linear-gradient(160deg, #FFF5F8 0%, #FFE4EE 100%);
}

/* adventure — sky blue canvas, sky blue */
[data-theme="adventure"] {
  --bg: #DFF0FF; --bg-deep: #CCE8FF;
  --surface: #EEF7FF; --surface-soft: #DFF0FF;
  --text: #041628; --muted: #1A5880; --faint: #80B8D8;
  --primary: #0284C7; --primary-soft: #F0F9FF; --primary-strong: #0369A1;
  --border: rgba(2,132,199,0.14); --border-soft: rgba(2,132,199,0.07);
  --shadow-sm: 0 2px 6px rgba(2,132,199,0.09); --shadow-md: 0 10px 30px rgba(2,132,199,0.13); --shadow-lg: 0 20px 60px rgba(2,132,199,0.18);
  --hero-gradient:       linear-gradient(135deg, #DFF0FF 0%, #CCE8FF 45%, #B8DEFF 100%);
  --ink-gradient:        linear-gradient(135deg, #041628 0%, #081E34 50%, #041628 100%);
  --accent-gradient:     linear-gradient(135deg, #CCE8FF 0%, #B8DEFF 100%);
  --btn-gradient:        linear-gradient(135deg, #38BDF8 0%, #0284C7 50%, #0369A1 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
  --card-hover-gradient: linear-gradient(135deg, #EEF7FF 0%, #F0F9FF 100%);
  --surface-gradient:    linear-gradient(160deg, #EEF7FF 0%, #DFF0FF 100%);
}

/* feast — fresh green canvas, forest green */
[data-theme="feast"] {
  --bg: #DAFBEA; --bg-deep: #C4F5D8;
  --surface: #EDFFF5; --surface-soft: #DAFBEA;
  --text: #051A0C; --muted: #1C5830; --faint: #78C890;
  --primary: #16A34A; --primary-soft: #F0FDF4; --primary-strong: #15803D;
  --border: rgba(22,163,74,0.14); --border-soft: rgba(22,163,74,0.07);
  --shadow-sm: 0 2px 6px rgba(22,163,74,0.09); --shadow-md: 0 10px 30px rgba(22,163,74,0.13); --shadow-lg: 0 20px 60px rgba(22,163,74,0.18);
  --hero-gradient:       linear-gradient(135deg, #DAFBEA 0%, #C4F5D8 45%, #AEEEC4 100%);
  --ink-gradient:        linear-gradient(135deg, #051A0C 0%, #082010 50%, #051A0C 100%);
  --accent-gradient:     linear-gradient(135deg, #C4F5D8 0%, #AEEEC4 100%);
  --btn-gradient:        linear-gradient(135deg, #4ADE80 0%, #16A34A 50%, #15803D 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #16A34A 0%, #15803D 100%);
  --card-hover-gradient: linear-gradient(135deg, #EDFFF5 0%, #F0FDF4 100%);
  --surface-gradient:    linear-gradient(160deg, #EDFFF5 0%, #DAFBEA 100%);
}

/* ocean_breeze — coral canvas, bold crimson */
[data-theme="ocean_breeze"] {
  --bg: #FFE4E8; --bg-deep: #FFD4DC;
  --surface: #FFF5F7; --surface-soft: #FFE4E8;
  --text: #160408; --muted: #600E18; --faint: #C07080;
  --primary: #E11D48; --primary-soft: #FFF1F2; --primary-strong: #BE123C;
  --border: rgba(225,29,72,0.14); --border-soft: rgba(225,29,72,0.07);
  --shadow-sm: 0 2px 6px rgba(225,29,72,0.09); --shadow-md: 0 10px 30px rgba(225,29,72,0.13); --shadow-lg: 0 20px 60px rgba(225,29,72,0.18);
  --hero-gradient:       linear-gradient(135deg, #FFE4E8 0%, #FFD4DC 45%, #FFC4CC 100%);
  --ink-gradient:        linear-gradient(135deg, #160408 0%, #1E060E 50%, #160408 100%);
  --accent-gradient:     linear-gradient(135deg, #FFD4DC 0%, #FFC4CC 100%);
  --btn-gradient:        linear-gradient(135deg, #FB7185 0%, #E11D48 50%, #BE123C 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #E11D48 0%, #BE123C 100%);
  --card-hover-gradient: linear-gradient(135deg, #FFF5F7 0%, #FFF1F2 100%);
  --surface-gradient:    linear-gradient(160deg, #FFF5F7 0%, #FFE4E8 100%);
}

/* pumpkin_spice — warm orange canvas, pumpkin */
[data-theme="pumpkin_spice"] {
  --bg: #FFF0D8; --bg-deep: #FFE4C0;
  --surface: #FFF8EE; --surface-soft: #FFF0D8;
  --text: #180C02; --muted: #6B3800; --faint: #C08840;
  --primary: #EA7316; --primary-soft: #FFF7ED; --primary-strong: #C2610C;
  --border: rgba(234,115,22,0.14); --border-soft: rgba(234,115,22,0.07);
  --shadow-sm: 0 2px 6px rgba(234,115,22,0.09); --shadow-md: 0 10px 30px rgba(234,115,22,0.13); --shadow-lg: 0 20px 60px rgba(234,115,22,0.18);
  --hero-gradient:       linear-gradient(135deg, #FFF0D8 0%, #FFE4C0 45%, #FFD8A8 100%);
  --ink-gradient:        linear-gradient(135deg, #180C02 0%, #201202 50%, #180C02 100%);
  --accent-gradient:     linear-gradient(135deg, #FFE4C0 0%, #FFD8A8 100%);
  --btn-gradient:        linear-gradient(135deg, #FB923C 0%, #EA7316 50%, #C2610C 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #EA7316 0%, #C2610C 100%);
  --card-hover-gradient: linear-gradient(135deg, #FFF8EE 0%, #FFF7ED 100%);
  --surface-gradient:    linear-gradient(160deg, #FFF8EE 0%, #FFF0D8 100%);
}

/* evergreen — deep forest canvas, deep green */
[data-theme="evergreen"] {
  --bg: #DAFAEC; --bg-deep: #C4F5DC;
  --surface: #EDFFF5; --surface-soft: #DAFAEC;
  --text: #041808; --muted: #185028; --faint: #70B888;
  --primary: #15803D; --primary-soft: #F0FDF4; --primary-strong: #166534;
  --border: rgba(21,128,61,0.14); --border-soft: rgba(21,128,61,0.07);
  --shadow-sm: 0 2px 6px rgba(21,128,61,0.09); --shadow-md: 0 10px 30px rgba(21,128,61,0.13); --shadow-lg: 0 20px 60px rgba(21,128,61,0.18);
  --hero-gradient:       linear-gradient(135deg, #DAFAEC 0%, #C4F5DC 45%, #AEEECB 100%);
  --ink-gradient:        linear-gradient(135deg, #04180A 0%, #082010 50%, #04180A 100%);
  --accent-gradient:     linear-gradient(135deg, #C4F5DC 0%, #AEEECB 100%);
  --btn-gradient:        linear-gradient(135deg, #34D399 0%, #15803D 50%, #166534 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #15803D 0%, #166534 100%);
  --card-hover-gradient: linear-gradient(135deg, #EDFFF5 0%, #F0FDF4 100%);
  --surface-gradient:    linear-gradient(160deg, #EDFFF5 0%, #DAFAEC 100%);
}


/* =========================================================
   FULL SURFACE THEMES — 20 themes with complete token sets
   ========================================================= */

/* ── DARK THEMES ── */

/* obsidian — gunmetal black, warm amber */
[data-theme="obsidian"] {
  --bg: #0A0908; --bg-deep: #050504;
  --surface: #141210; --surface-soft: #1C1A18;
  --text: #F5F0E8; --muted: #A09878; --faint: #585450;
  --primary: #F59E0B; --primary-soft: rgba(245,158,11,0.14); --primary-strong: #D97706;
  --border: rgba(245,158,11,0.12); --border-soft: rgba(245,158,11,0.06);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.55); --shadow-md: 0 10px 30px rgba(0,0,0,0.65); --shadow-lg: 0 20px 60px rgba(0,0,0,0.75);
  --hero-gradient:       linear-gradient(135deg, #0A0908 0%, #0E0C0A 50%, #0A0806 100%);
  --ink-gradient:        linear-gradient(135deg, #050504 0%, #0A0908 100%);
  --accent-gradient:     linear-gradient(135deg, #141210 0%, #1E1A12 100%);
  --btn-gradient:        linear-gradient(135deg, #FBBF24 0%, #F59E0B 50%, #D97706 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  --card-hover-gradient: linear-gradient(135deg, #141210 0%, #1E1C14 100%);
  --surface-gradient:    linear-gradient(160deg, #141210 0%, #161412 100%);
}

/* navy — deep admiralty, antique gold */
[data-theme="navy"] {
  --bg: #08111E; --bg-deep: #040B14;
  --surface: #0E1D30; --surface-soft: #162438;
  --text: #E8EDF6; --muted: #7A9CC0; --faint: #3C5878;
  --primary: #EAB308; --primary-soft: rgba(234,179,8,0.14); --primary-strong: #CA8A04;
  --border: rgba(234,179,8,0.12); --border-soft: rgba(234,179,8,0.06);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.5); --shadow-md: 0 10px 30px rgba(0,0,0,0.65); --shadow-lg: 0 20px 60px rgba(0,0,0,0.75);
  --hero-gradient:       linear-gradient(135deg, #08111E 0%, #060E1A 45%, #0A1428 100%);
  --ink-gradient:        linear-gradient(135deg, #040B14 0%, #08111E 60%, #060C1A 100%);
  --accent-gradient:     linear-gradient(135deg, #0E1D30 0%, #102038 100%);
  --btn-gradient:        linear-gradient(135deg, #FDE047 0%, #EAB308 50%, #CA8A04 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #EAB308 0%, #CA8A04 100%);
  --card-hover-gradient: linear-gradient(135deg, #0E1D30 0%, #102038 100%);
  --surface-gradient:    linear-gradient(160deg, #0E1D30 0%, #102232 100%);
}

/* plum — aubergine dark, electric fuchsia */
[data-theme="plum"] {
  --bg: #0E0812; --bg-deep: #07040B;
  --surface: #180E22; --surface-soft: #221630;
  --text: #F2E8FF; --muted: #B088CC; --faint: #604878;
  --primary: #E879F9; --primary-soft: rgba(232,121,249,0.14); --primary-strong: #D946EF;
  --border: rgba(232,121,249,0.12); --border-soft: rgba(232,121,249,0.06);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.5); --shadow-md: 0 10px 30px rgba(0,0,0,0.65); --shadow-lg: 0 20px 60px rgba(0,0,0,0.75);
  --hero-gradient:       linear-gradient(135deg, #0E0812 0%, #160A20 45%, #0E0818 100%);
  --ink-gradient:        linear-gradient(135deg, #07040B 0%, #100820 55%, #0E0812 100%);
  --accent-gradient:     linear-gradient(135deg, #180E22 0%, #22102E 100%);
  --btn-gradient:        linear-gradient(135deg, #F0ABFC 0%, #E879F9 50%, #D946EF 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #E879F9 0%, #D946EF 100%);
  --card-hover-gradient: linear-gradient(135deg, #180E22 0%, #22102E 100%);
  --surface-gradient:    linear-gradient(160deg, #180E22 0%, #1C1228 100%);
}

/* charcoal — warm graphite, emerald accent */
[data-theme="charcoal"] {
  --bg: #171614; --bg-deep: #0E0D0C;
  --surface: #201F1D; --surface-soft: #2A2927;
  --text: #F0ECE8; --muted: #A89E98; --faint: #5A5450;
  --primary: #10B981; --primary-soft: rgba(16,185,129,0.13); --primary-strong: #059669;
  --border: rgba(255,255,255,0.09); --border-soft: rgba(255,255,255,0.045);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.4); --shadow-md: 0 10px 30px rgba(0,0,0,0.5); --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);
  --hero-gradient:       linear-gradient(135deg, #171614 0%, #1A1816 45%, #171614 100%);
  --ink-gradient:        linear-gradient(135deg, #0E0D0C 0%, #131210 100%);
  --accent-gradient:     linear-gradient(135deg, #201F1D 0%, #1C2218 100%);
  --btn-gradient:        linear-gradient(135deg, #34D399 0%, #10B981 50%, #059669 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #10B981 0%, #059669 100%);
  --card-hover-gradient: linear-gradient(135deg, #201F1D 0%, #1E2420 100%);
  --surface-gradient:    linear-gradient(160deg, #201F1D 0%, #222120 100%);
}

/* ── LIGHT THEMES ── */

/* ivory — warm editorial white, ink black */
[data-theme="ivory"] {
  --bg: #F9F6F1; --bg-deep: #F1EDE5;
  --surface: #FFFFFF; --surface-soft: #F9F6F1;
  --text: #1A1612; --muted: #504840; --faint: #A09888;
  --primary: #2C2420; --primary-soft: #EDE8E2; --primary-strong: #181410;
  --border: rgba(26,22,18,0.1); --border-soft: rgba(26,22,18,0.05);
  --shadow-sm: 0 2px 6px rgba(26,22,18,0.045); --shadow-md: 0 10px 30px rgba(26,22,18,0.075); --shadow-lg: 0 20px 60px rgba(26,22,18,0.1);
  --hero-gradient:       linear-gradient(135deg, #F9F6F1 0%, #F4F0E8 50%, #F9F6F1 100%);
  --ink-gradient:        linear-gradient(135deg, #1A1612 0%, #2C2420 55%, #1A1410 100%);
  --accent-gradient:     linear-gradient(135deg, #F1EDE5 0%, #EBE5DA 100%);
  --btn-gradient:        linear-gradient(135deg, #3C3028 0%, #2C2420 50%, #1A1410 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #2C2420 0%, #1A1410 100%);
  --card-hover-gradient: linear-gradient(135deg, #FFFFFF 0%, #F5F0E8 100%);
  --surface-gradient:    linear-gradient(160deg, #FFFFFF 0%, #F9F6F1 100%);
}

/* linen — Kinfolk cream, terracotta sienna */
[data-theme="linen"] {
  --bg: #F6EFE5; --bg-deep: #EDE4D2;
  --surface: #FCF8F2; --surface-soft: #FEFCF8;
  --text: #281C10; --muted: #6B5040; --faint: #B09880;
  --primary: #B8481E; --primary-soft: #F8E8DC; --primary-strong: #963A14;
  --border: rgba(40,28,16,0.12); --border-soft: rgba(40,28,16,0.06);
  --shadow-sm: 0 2px 6px rgba(40,28,16,0.06); --shadow-md: 0 10px 30px rgba(40,28,16,0.09); --shadow-lg: 0 20px 60px rgba(40,28,16,0.12);
  --hero-gradient:       linear-gradient(135deg, #F6EFE5 0%, #EEE0CC 45%, #F6EBD8 100%);
  --ink-gradient:        linear-gradient(135deg, #281C10 0%, #3C2814 50%, #281408 100%);
  --accent-gradient:     linear-gradient(135deg, #EDE4D2 0%, #E4D5BC 100%);
  --btn-gradient:        linear-gradient(135deg, #D05A2C 0%, #B8481E 50%, #963A14 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #B8481E 0%, #963A14 100%);
  --card-hover-gradient: linear-gradient(135deg, #FCF8F2 0%, #F5EDE0 100%);
  --surface-gradient:    linear-gradient(160deg, #FCF8F2 0%, #F9F4EA 100%);
}

/* chalk — crisp editorial, slate-grey accent */
[data-theme="chalk"] {
  --bg: #FAFAFA; --bg-deep: #F2F2F2;
  --surface: #FFFFFF; --surface-soft: #FAFAFA;
  --text: #1A1A1A; --muted: #545454; --faint: #A8A8A8;
  --primary: #374151; --primary-soft: #F3F4F6; --primary-strong: #1F2937;
  --border: rgba(0,0,0,0.095); --border-soft: rgba(0,0,0,0.048);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.048); --shadow-md: 0 10px 30px rgba(0,0,0,0.075); --shadow-lg: 0 20px 60px rgba(0,0,0,0.095);
  --hero-gradient:       linear-gradient(135deg, #FFFFFF 0%, #F7F7F7 50%, #FFFFFF 100%);
  --ink-gradient:        linear-gradient(135deg, #1A1A1A 0%, #282828 100%);
  --accent-gradient:     linear-gradient(135deg, #F2F2F2 0%, #EBEBEB 100%);
  --btn-gradient:        linear-gradient(135deg, #4B5563 0%, #374151 50%, #1F2937 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #374151 0%, #1F2937 100%);
  --card-hover-gradient: linear-gradient(135deg, #FFFFFF 0%, #F3F4F6 100%);
  --surface-gradient:    linear-gradient(160deg, #FFFFFF 0%, #FAFAFA 100%);
}

/* cloud — cool white, crisp indigo */
[data-theme="cloud"] {
  --bg: #F3F6FC; --bg-deep: #E6EEFF;
  --surface: #FFFFFF; --surface-soft: #F8FAFF;
  --text: #191E2E; --muted: #485070; --faint: #9098B8;
  --primary: #4F46E5; --primary-soft: #EEF2FF; --primary-strong: #4338CA;
  --border: rgba(25,30,46,0.1); --border-soft: rgba(25,30,46,0.05);
  --shadow-sm: 0 2px 6px rgba(25,30,46,0.055); --shadow-md: 0 10px 30px rgba(25,30,46,0.085); --shadow-lg: 0 20px 60px rgba(25,30,46,0.11);
  --hero-gradient:       linear-gradient(135deg, #F3F6FC 0%, #E6EEFF 45%, #EBE8FF 100%);
  --ink-gradient:        linear-gradient(135deg, #191E2E 0%, #232840 50%, #191E38 100%);
  --accent-gradient:     linear-gradient(135deg, #E6EEFF 0%, #DDE4FF 100%);
  --btn-gradient:        linear-gradient(135deg, #818CF8 0%, #4F46E5 50%, #4338CA 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #4F46E5 0%, #4338CA 100%);
  --card-hover-gradient: linear-gradient(135deg, #FFFFFF 0%, #EEF2FF 100%);
  --surface-gradient:    linear-gradient(160deg, #FFFFFF 0%, #F8FAFF 100%);
}

/* ── BOLD / VIVID THEMES ── */

/* saffron — obsidian dark, burnished gold */
[data-theme="saffron"] {
  --bg: #180C00; --bg-deep: #0E0800;
  --surface: #221200; --surface-soft: #2C1800;
  --text: #FFF0C8; --muted: #CC9850; --faint: #785830;
  --primary: #FBBF24; --primary-soft: rgba(251,191,36,0.14); --primary-strong: #F59E0B;
  --border: rgba(251,191,36,0.14); --border-soft: rgba(251,191,36,0.07);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.5); --shadow-md: 0 10px 30px rgba(0,0,0,0.6); --shadow-lg: 0 20px 60px rgba(0,0,0,0.7);
  --hero-gradient:       linear-gradient(135deg, #180C00 0%, #281400 45%, #180A00 100%);
  --ink-gradient:        linear-gradient(135deg, #0E0800 0%, #180C00 55%, #0C0600 100%);
  --accent-gradient:     linear-gradient(135deg, #221200 0%, #2E1800 100%);
  --btn-gradient:        linear-gradient(135deg, #FDE68A 0%, #FBBF24 50%, #F59E0B 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  --card-hover-gradient: linear-gradient(135deg, #221200 0%, #2E1800 100%);
  --surface-gradient:    linear-gradient(160deg, #221200 0%, #261400 100%);
}

/* cobalt — deep sapphire, antique gold */
[data-theme="cobalt"] {
  --bg: #0B1E70; --bg-deep: #061248;
  --surface: #112490; --surface-soft: #1A30A8;
  --text: #EEF4FF; --muted: #94B8E0; --faint: #4870B8;
  --primary: #FCD34D; --primary-soft: rgba(252,211,77,0.16); --primary-strong: #FBBF24;
  --border: rgba(255,255,255,0.12); --border-soft: rgba(255,255,255,0.06);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.3); --shadow-md: 0 10px 30px rgba(0,0,0,0.4); --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
  --hero-gradient:       linear-gradient(135deg, #0B1E70 0%, #0E24A0 45%, #0A1A6A 100%);
  --ink-gradient:        linear-gradient(135deg, #040C40 0%, #0B1E70 55%, #060F48 100%);
  --accent-gradient:     linear-gradient(135deg, #112490 0%, #1A30B0 100%);
  --btn-gradient:        linear-gradient(135deg, #FEF08A 0%, #FCD34D 50%, #FBBF24 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #FCD34D 0%, #FBBF24 100%);
  --card-hover-gradient: linear-gradient(135deg, #112490 0%, #1A30B0 100%);
  --surface-gradient:    linear-gradient(160deg, #112490 0%, #132898 100%);
}

/* jade — deep malachite, classic gold */
[data-theme="jade"] {
  --bg: #041814; --bg-deep: #020E0A;
  --surface: #072220; --surface-soft: #0C2C28;
  --text: #D8F2EA; --muted: #68B098; --faint: #346858;
  --primary: #D4AF37; --primary-soft: rgba(212,175,55,0.14); --primary-strong: #B8940C;
  --border: rgba(212,175,55,0.14); --border-soft: rgba(212,175,55,0.07);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.5); --shadow-md: 0 10px 30px rgba(0,0,0,0.6); --shadow-lg: 0 20px 60px rgba(0,0,0,0.7);
  --hero-gradient:       linear-gradient(135deg, #041814 0%, #061C18 45%, #041410 100%);
  --ink-gradient:        linear-gradient(135deg, #020E0A 0%, #041814 55%, #020C08 100%);
  --accent-gradient:     linear-gradient(135deg, #072220 0%, #0C2C28 100%);
  --btn-gradient:        linear-gradient(135deg, #F0CC50 0%, #D4AF37 50%, #B8940C 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #D4AF37 0%, #B8940C 100%);
  --card-hover-gradient: linear-gradient(135deg, #072220 0%, #0C3028 100%);
  --surface-gradient:    linear-gradient(160deg, #072220 0%, #092622 100%);
}

/* crimson — deep burgundy, antique gold */
[data-theme="crimson"] {
  --bg: #180308; --bg-deep: #0E0204;
  --surface: #220610; --surface-soft: #2C0A18;
  --text: #FFF0EC; --muted: #D08880; --faint: #804050;
  --primary: #F5A623; --primary-soft: rgba(245,166,35,0.14); --primary-strong: #D97706;
  --border: rgba(245,166,35,0.13); --border-soft: rgba(245,166,35,0.065);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.5); --shadow-md: 0 10px 30px rgba(0,0,0,0.6); --shadow-lg: 0 20px 60px rgba(0,0,0,0.7);
  --hero-gradient:       linear-gradient(135deg, #180308 0%, #200410 45%, #160208 100%);
  --ink-gradient:        linear-gradient(135deg, #0E0204 0%, #180308 55%, #0C0202 100%);
  --accent-gradient:     linear-gradient(135deg, #220610 0%, #2C0C18 100%);
  --btn-gradient:        linear-gradient(135deg, #FDB942 0%, #F5A623 50%, #D97706 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #F5A623 0%, #D97706 100%);
  --card-hover-gradient: linear-gradient(135deg, #220610 0%, #2C0C18 100%);
  --surface-gradient:    linear-gradient(160deg, #220610 0%, #240810 100%);
}

/* ── EDITORIAL / PRINT THEMES ── */

/* broadsheet — classic newspaper, refined grey */
[data-theme="broadsheet"] {
  --bg: #F4F3EF; --bg-deep: #E9E8E2;
  --surface: #FAFAF8; --surface-soft: #FFFFFF;
  --text: #121110; --muted: #484640; --faint: #989690;
  --primary: #18140E; --primary-soft: #E6E4DE; --primary-strong: #000000;
  --border: rgba(18,17,16,0.11); --border-soft: rgba(18,17,16,0.055);
  --shadow-sm: 0 2px 6px rgba(18,17,16,0.045); --shadow-md: 0 10px 30px rgba(18,17,16,0.075); --shadow-lg: 0 20px 60px rgba(18,17,16,0.1);
  --hero-gradient:       linear-gradient(135deg, #F4F3EF 0%, #ECEAE4 45%, #F4F3EF 100%);
  --ink-gradient:        linear-gradient(135deg, #121110 0%, #1E1C18 50%, #121110 100%);
  --accent-gradient:     linear-gradient(135deg, #E9E8E2 0%, #E2E0D8 100%);
  --btn-gradient:        linear-gradient(135deg, #363430 0%, #18140E 50%, #080604 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #18140E 0%, #080604 100%);
  --card-hover-gradient: linear-gradient(135deg, #FFFFFF 0%, #EEECEA 100%);
  --surface-gradient:    linear-gradient(160deg, #FAFAF8 0%, #F7F6F2 100%);
}

/* manuscript — aged parchment, saddle brown */
[data-theme="manuscript"] {
  --bg: #F0E8D0; --bg-deep: #E4D8B8;
  --surface: #F8F0D8; --surface-soft: #FDF8EC;
  --text: #2A1E08; --muted: #6A5030; --faint: #B09060;
  --primary: #8B4513; --primary-soft: #F5E8D0; --primary-strong: #6B3510;
  --border: rgba(42,30,8,0.15); --border-soft: rgba(42,30,8,0.07);
  --shadow-sm: 0 2px 6px rgba(42,30,8,0.07); --shadow-md: 0 10px 30px rgba(42,30,8,0.1); --shadow-lg: 0 20px 60px rgba(42,30,8,0.14);
  --hero-gradient:       linear-gradient(135deg, #F0E8D0 0%, #E8DDB8 45%, #F0E8CC 100%);
  --ink-gradient:        linear-gradient(135deg, #2A1E08 0%, #3D2C10 50%, #2A1808 100%);
  --accent-gradient:     linear-gradient(135deg, #E4D8B8 0%, #DDD0A8 100%);
  --btn-gradient:        linear-gradient(135deg, #A85520 0%, #8B4513 50%, #6B3510 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #8B4513 0%, #6B3510 100%);
  --card-hover-gradient: linear-gradient(135deg, #F8F0D8 0%, #F0E8C8 100%);
  --surface-gradient:    linear-gradient(160deg, #F8F0D8 0%, #F5EDD4 100%);
}

/* blueprint — technical navy, precision sky-blue */
[data-theme="blueprint"] {
  --bg: #091526; --bg-deep: #050D1A;
  --surface: #0E1E38; --surface-soft: #142548;
  --text: #E8F4FF; --muted: #7AAAD0; --faint: #3C6080;
  --primary: #38BDF8; --primary-soft: rgba(56,189,248,0.12); --primary-strong: #0EA5E9;
  --border: rgba(56,189,248,0.13); --border-soft: rgba(56,189,248,0.065);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.4); --shadow-md: 0 10px 30px rgba(0,0,0,0.5); --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);
  --hero-gradient:       linear-gradient(135deg, #091526 0%, #0B1A34 45%, #091228 100%);
  --ink-gradient:        linear-gradient(135deg, #050D1A 0%, #091526 55%, #04091A 100%);
  --accent-gradient:     linear-gradient(135deg, #0E1E38 0%, #122548 100%);
  --btn-gradient:        linear-gradient(135deg, #7DD3FC 0%, #38BDF8 50%, #0EA5E9 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%);
  --card-hover-gradient: linear-gradient(135deg, #0E1E38 0%, #142A50 100%);
  --surface-gradient:    linear-gradient(160deg, #0E1E38 0%, #10203C 100%);
}

/* noir — cinematic near-black, warm sepia gold */
[data-theme="noir"] {
  --bg: #0C0C0A; --bg-deep: #080806;
  --surface: #161612; --surface-soft: #201E18;
  --text: #F0EAD8; --muted: #A09070; --faint: #504838;
  --primary: #D4A860; --primary-soft: rgba(212,168,96,0.14); --primary-strong: #B88840;
  --border: rgba(212,168,96,0.12); --border-soft: rgba(212,168,96,0.06);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.5); --shadow-md: 0 10px 30px rgba(0,0,0,0.65); --shadow-lg: 0 20px 60px rgba(0,0,0,0.75);
  --hero-gradient:       linear-gradient(135deg, #0C0C0A 0%, #100E08 50%, #0C0C0A 100%);
  --ink-gradient:        linear-gradient(135deg, #080806 0%, #0C0C0A 100%);
  --accent-gradient:     linear-gradient(135deg, #161612 0%, #1E1C14 100%);
  --btn-gradient:        linear-gradient(135deg, #E8C880 0%, #D4A860 50%, #B88840 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #D4A860 0%, #B88840 100%);
  --card-hover-gradient: linear-gradient(135deg, #161612 0%, #201E16 100%);
  --surface-gradient:    linear-gradient(160deg, #161612 0%, #181614 100%);
}

/* ── NATURE THEMES ── */

/* ocean — deep abyssal, bioluminescent teal */
[data-theme="ocean"] {
  --bg: #031620; --bg-deep: #020E14;
  --surface: #072230; --surface-soft: #0C2C3C;
  --text: #E0F4F8; --muted: #6AB8C8; --faint: #2C7888;
  --primary: #2DD4BF; --primary-soft: rgba(45,212,191,0.14); --primary-strong: #14B8A6;
  --border: rgba(45,212,191,0.14); --border-soft: rgba(45,212,191,0.07);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.4); --shadow-md: 0 10px 30px rgba(0,0,0,0.5); --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);
  --hero-gradient:       linear-gradient(135deg, #031620 0%, #051E28 45%, #031420 100%);
  --ink-gradient:        linear-gradient(135deg, #020E14 0%, #031620 55%, #020C10 100%);
  --accent-gradient:     linear-gradient(135deg, #072230 0%, #0C2C3C 100%);
  --btn-gradient:        linear-gradient(135deg, #5EEAD4 0%, #2DD4BF 50%, #14B8A6 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #2DD4BF 0%, #14B8A6 100%);
  --card-hover-gradient: linear-gradient(135deg, #072230 0%, #0C2E3E 100%);
  --surface-gradient:    linear-gradient(160deg, #072230 0%, #092632 100%);
}

/* sand — warm dunes, sun-bleached terracotta */
[data-theme="sand"] {
  --bg: #F5EAD8; --bg-deep: #ECDFC8;
  --surface: #FAF4E8; --surface-soft: #FDF9F0;
  --text: #2A2010; --muted: #7A6848; --faint: #C0A880;
  --primary: #C0721A; --primary-soft: #FAEEDE; --primary-strong: #A05E0C;
  --border: rgba(42,32,16,0.12); --border-soft: rgba(42,32,16,0.06);
  --shadow-sm: 0 2px 6px rgba(42,32,16,0.06); --shadow-md: 0 10px 30px rgba(42,32,16,0.09); --shadow-lg: 0 20px 60px rgba(42,32,16,0.12);
  --hero-gradient:       linear-gradient(135deg, #F5EAD8 0%, #EDE0C4 45%, #F8EDD8 100%);
  --ink-gradient:        linear-gradient(135deg, #2A2010 0%, #3A2E18 50%, #2A1E0C 100%);
  --accent-gradient:     linear-gradient(135deg, #ECDFC8 0%, #E4D5B8 100%);
  --btn-gradient:        linear-gradient(135deg, #DC8A2C 0%, #C0721A 50%, #A05E0C 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #C0721A 0%, #A05E0C 100%);
  --card-hover-gradient: linear-gradient(135deg, #FAF4E8 0%, #F5EED8 100%);
  --surface-gradient:    linear-gradient(160deg, #FAF4E8 0%, #F8F0E4 100%);
}

/* ember — dark brown, molten orange firelight */
[data-theme="ember"] {
  --bg: #180C04; --bg-deep: #100800;
  --surface: #221408; --surface-soft: #2C1C0C;
  --text: #FFE8C0; --muted: #C09060; --faint: #705030;
  --primary: #FB923C; --primary-soft: rgba(251,146,60,0.14); --primary-strong: #EA7316;
  --border: rgba(251,146,60,0.14); --border-soft: rgba(251,146,60,0.07);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.5); --shadow-md: 0 10px 30px rgba(0,0,0,0.6); --shadow-lg: 0 20px 60px rgba(0,0,0,0.7);
  --hero-gradient:       linear-gradient(135deg, #180C04 0%, #221008 45%, #180A02 100%);
  --ink-gradient:        linear-gradient(135deg, #100800 0%, #180C04 55%, #0E0600 100%);
  --accent-gradient:     linear-gradient(135deg, #221408 0%, #2E1C0C 100%);
  --btn-gradient:        linear-gradient(135deg, #FDBA74 0%, #FB923C 50%, #EA7316 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #FB923C 0%, #EA7316 100%);
  --card-hover-gradient: linear-gradient(135deg, #221408 0%, #301C0C 100%);
  --surface-gradient:    linear-gradient(160deg, #221408 0%, #26160A 100%);
}

/* arctic — clean ice white, glacier blue */
[data-theme="arctic"] {
  --bg: #EFF6FF; --bg-deep: #DBEAFE;
  --surface: #F8FBFF; --surface-soft: #FFFFFF;
  --text: #0A1830; --muted: #3A5878; --faint: #8AAAC8;
  --primary: #0369A1; --primary-soft: #E0F2FE; --primary-strong: #0C4A6E;
  --border: rgba(10,24,48,0.1); --border-soft: rgba(10,24,48,0.05);
  --shadow-sm: 0 2px 6px rgba(10,24,48,0.06); --shadow-md: 0 10px 30px rgba(10,24,48,0.09); --shadow-lg: 0 20px 60px rgba(10,24,48,0.12);
  --hero-gradient:       linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 45%, #D1EBF8 100%);
  --ink-gradient:        linear-gradient(135deg, #0A1830 0%, #0F2248 50%, #0A1838 100%);
  --accent-gradient:     linear-gradient(135deg, #DBEAFE 0%, #CCE4FA 100%);
  --btn-gradient:        linear-gradient(135deg, #38BDF8 0%, #0369A1 50%, #0C4A6E 100%);
  --btn-gradient-hover:  linear-gradient(135deg, #0369A1 0%, #0C4A6E 100%);
  --card-hover-gradient: linear-gradient(135deg, #F8FBFF 0%, #EEF6FF 100%);
  --surface-gradient:    linear-gradient(160deg, #F8FBFF 0%, #F4F9FF 100%);
}


/* =========================================
   2b. DARK HEADER OVERRIDES
   Dark-background themes need white text in the header.
   ========================================= */
[data-theme="midnight"], [data-theme="forest"],
[data-theme="obsidian"], [data-theme="navy"],
[data-theme="plum"], [data-theme="charcoal"],
[data-theme="saffron"], [data-theme="cobalt"],
[data-theme="jade"], [data-theme="crimson"],
[data-theme="blueprint"], [data-theme="noir"],
[data-theme="ocean"], [data-theme="ember"] {
  --header-logo-gradient: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.78) 55%, #fff 100%);
  --header-tagline:       rgba(255,255,255,0.52);
  --header-nav:           rgba(255,255,255,0.72);
  --header-nav-active:    #ffffff;
  --header-nav-hover-bg:  rgba(255,255,255,0.12);
  --header-dropdown-bg:   color-mix(in srgb, var(--bg) 97%, black);
  --header-dropdown-link: rgba(255,255,255,0.72);
  --header-hamburger:     rgba(255,255,255,0.85);
  --header-shadow:        0 2px 28px rgba(0,0,0,0.4);
  --header-border:        rgba(255,255,255,0.08);
}

/* =========================================
   3. TYPOGRAPHY SCALES
   ========================================= */

[data-typography="executive"] {
  --fs-base: 17px;
  --fs-xl: 28px;
  --fs-3xl: 56px;
  --spacing-section: 80px;
}
[data-typography="compact"] {
  --fs-base: 15px;
  --fs-xl: 24px;
  --fs-3xl: 44px;
  --spacing-section: 56px;
}
[data-typography="spacious"] {
  --fs-base: 18px;
  --fs-xl: 32px;
  --fs-3xl: 64px;
  --spacing-section: 96px;
}


/* =========================================
   4. RESET & BASE
   ========================================= */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: var(--fs-base);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.72;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--primary); }
a:hover { color: var(--primary-strong); }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* mono utility */
.mono {
  font-family: 'DM Mono', ui-monospace, monospace;
  letter-spacing: 0.08em;
}


/* =========================================
   5. LAYOUT
   ========================================= */

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3.5rem);
}

/* Full-bleed wrapper — edge to edge background, content still contained */
.bleed {
  width: 100%;
  padding-left: clamp(1.5rem, 4vw, 3.5rem);
  padding-right: clamp(1.5rem, 4vw, 3.5rem);
}
.bleed-inner {
  max-width: 1320px;
  margin: 0 auto;
}

/* Narrow reading column */
.col-prose  { max-width: 680px; }
.col-wide   { max-width: 900px; }

/* Two-column content + aside (e.g. article + related) */
.layout-sidebar {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .layout-sidebar { grid-template-columns: 1fr; } }

/* Three-column even split */
.col-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) { .col-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .col-3 { grid-template-columns: 1fr; } }

.section-wide {
  padding: clamp(2.5rem, 5vw, var(--spacing-section)) clamp(1.5rem, 4vw, 3.5rem);
  margin-left: calc(clamp(1.5rem, 4vw, 3.5rem) * -1);
  margin-right: calc(clamp(1.5rem, 4vw, 3.5rem) * -1);
  border-top: 1px solid var(--border);
  background: var(--bg);
}

/* Full-bleed coloured band */
.section-accent {
  padding: clamp(2.5rem, 5vw, var(--spacing-section)) clamp(1.5rem, 4vw, 3.5rem);
  margin-left: calc(clamp(1.5rem, 4vw, 3.5rem) * -1);
  margin-right: calc(clamp(1.5rem, 4vw, 3.5rem) * -1);
  background: var(--accent-gradient, var(--bg-deep));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.section-ink {
  padding: clamp(2.5rem, 5vw, var(--spacing-section)) clamp(1.5rem, 4vw, 3.5rem);
  margin-left: calc(clamp(1.5rem, 4vw, 3.5rem) * -1);
  margin-right: calc(clamp(1.5rem, 4vw, 3.5rem) * -1);
  background: var(--ink-gradient, var(--text));
  color: rgba(255,255,255,0.92);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.section-ink h2          { color: rgba(255,255,255,0.95); }
.section-ink p           { color: rgba(255,255,255,0.80); }
.section-ink .pull-quote { color: rgba(255,255,255,0.92); }
.section-ink .pull-quote em  { color: #e8c87a; font-style: italic; opacity: 1; }
.section-ink .section-label  { color: #e8c87a; opacity: 0.85; }

.section-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1.2rem;
}


/* =========================================
   6. HEADER & NAV
   ========================================= */

/* ── READING PROGRESS BAR (article pages only) ── */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  z-index: 200;
  pointer-events: none;
}
.reading-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--primary);
  transition: width 0.08s linear;
}
/* suppress the static header accent line on pages that have a progress bar */
body:has(.reading-progress) .header {
  border-top-color: transparent;
}

/* ── HEADER: EDITORIAL — clean surface + accent top line ── */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 var(--border);
  border-bottom: none;
  border-top: 3px solid var(--primary);
}
.header::after { display: none; }

.header-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 88px;
}

/* ── BRAND ── */
.brand {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.brand .logo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  background: var(--header-logo-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand .tagline-small {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--header-tagline);
  line-height: 1;
  white-space: nowrap;
}

/* ── NAV ── */
.header-right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0;
}

.nav a {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--header-nav) !important;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color .18s ease, background .18s ease;
}
.nav a:hover, .nav a[aria-current="page"] {
  color: var(--header-nav-active) !important;
  background: var(--header-nav-hover-bg);
}

/* ── DROPDOWN ── */
.nav-item { position: relative; }
.nav-item .has-dropdown { cursor: pointer; }

.dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--header-dropdown-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--header-border);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
  min-width: 200px;
  padding: 0.4rem 0;
  z-index: 200;
}
.dropdown a {
  display: block;
  padding: 0.55rem 1rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--header-dropdown-link);
  border-radius: 0;
  white-space: nowrap;
}
.dropdown a:hover {
  color: var(--header-nav-active);
  background: var(--header-nav-hover-bg);
}
.nav-item:hover .dropdown { display: block; }

/* ── HAMBURGER ── */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--header-hamburger);
  border-radius: 2px;
  transition: all .25s ease;
}

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 90;
}

/* Mobile nav — trigger at 1080px since we have many items */
@media (max-width: 1080px) {
  .menu-toggle { display: flex; }
  .nav {
    display: none;
    position: fixed;
    top: 88px; right: 0; bottom: 0;
    width: min(300px, 85vw);
    background: var(--header-dropdown-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-left: 1px solid var(--header-border);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 1rem;
    gap: 0.15rem;
    z-index: 100;
    overflow-y: auto;
  }
  .nav.open { display: flex; }
  .nav-overlay.open { display: block; }
  .nav a { font-size: 0.78rem; padding: 0.6rem 0.8rem; width: 100%; }
  .dropdown {
    position: static; border: none; box-shadow: none;
    padding: 0 0 0 1rem; background: transparent;
  }
  .nav-item:hover .dropdown { display: none; }
  .nav-item.open .dropdown { display: block; }
}

/* ── SEARCH TRIGGER ── */
.search-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--header-border, var(--border));
  background: transparent;
  color: var(--header-nav);
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
  flex-shrink: 0;
}
.search-trigger:hover {
  color: var(--header-nav-active);
  background: var(--header-nav-hover-bg);
  border-color: var(--primary);
}

/* ── SEARCH MODAL ── */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(4rem, 12vh, 8rem) 1rem 1rem;
}
.search-overlay[hidden] { display: none; }
body.search-open { overflow: hidden; }

.search-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.3);
  width: 100%;
  max-width: 640px;
  overflow: hidden;
}

.search-input-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.search-modal-icon { color: var(--muted); flex-shrink: 0; }
.search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  color: var(--text);
  caret-color: var(--primary);
}
.search-input::placeholder { color: var(--faint); }
.search-esc {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  padding: .2rem .45rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--faint);
  flex-shrink: 0;
}

.search-results {
  max-height: 420px;
  overflow-y: auto;
  padding: .4rem 0;
}
.search-empty {
  padding: 1.5rem 1.25rem;
  color: var(--muted);
  font-size: .9rem;
  margin: 0;
}
.search-result a {
  display: block;
  padding: .75rem 1.25rem;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background .1s, border-color .1s;
}
.search-result.is-active a,
.search-result a:hover {
  background: var(--primary-soft);
  border-left-color: var(--primary);
}
.search-result-top {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .3rem;
}
.search-badge {
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .15rem .45rem;
  border-radius: 999px;
  font-weight: 500;
}
.search-badge-article { background: var(--primary-soft); color: var(--primary); }
.search-badge-drill   { background: var(--accent-gradient, var(--surface-soft)); color: var(--muted); border: 1px solid var(--border); }
.search-meta {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  color: var(--faint);
}
.search-result-title {
  font-family: 'DM Sans', sans-serif;
  font-size: .95rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}
.search-result-excerpt {
  font-size: .8rem;
  color: var(--muted);
  margin-top: .25rem;
  line-height: 1.5;
}

.search-footer {
  display: flex;
  gap: 1.25rem;
  padding: .6rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
}
.search-footer span {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: .3rem;
}
.search-footer kbd {
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  padding: .15rem .35rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  color: var(--muted);
}

/* ── LINKEDIN PILL ── */
.nav-linkedin {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text) !important;
  background: linear-gradient(135deg, #ffffff 0%, var(--primary-soft, #F2E6DA) 100%);
  padding: .4rem .9rem !important;
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .18s ease, transform .18s ease;
}
.nav-linkedin:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}



/* =========================================
   7. HERO
   ========================================= */

.hero {
  padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 4vw, 3.5rem) clamp(2rem, 5vw, 4rem);
  margin-left: calc(clamp(1.5rem, 4vw, 3.5rem) * -1);
  margin-right: calc(clamp(1.5rem, 4vw, 3.5rem) * -1);
  background: var(--hero-gradient, var(--bg));
}

/* Split: 62% left text / 38% right panel */
.hero-split {
  display: grid;
  grid-template-columns: 62fr 38fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 860px) { .hero-split { grid-template-columns: 1fr; } }

.eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1.2rem;
}

.hero-title {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(2.2rem, 3.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.hero-sub {
  margin-top: 1.4rem;
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 54ch;
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

/* Right panel in hero split */
.hero-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 2.2rem;
  box-shadow: var(--shadow-sm);
}
.hero-panel .panel-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1rem;
}
.hero-panel h3 { font-size: 1.4rem; margin-bottom: 0.6rem; }
.hero-panel p  { color: var(--muted); font-size: 0.96rem; }
.hero-panel .panel-link {
  display: inline-block;
  margin-top: 1.4rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
}
.hero-panel .panel-link::after { content: " →"; }

/* Approach strip — publications hero left column */
.pub-approach {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.2rem;
}
.pub-approach-name {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .35rem;
}
.pub-approach-desc {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.55;
}

/* Audience pills — used in featured series panel */
.pub-audience-label {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: .5rem;
}
.pub-audience-roles {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.pub-role-tag {
  font-family: 'DM Mono', monospace;
  font-size: .63rem;
  letter-spacing: .06em;
  padding: .28rem .8rem;
  border-radius: 2rem;
  border: 1px solid var(--primary);
  color: var(--surface);
  background: var(--primary);
}

/* Stat strip — 3 numbers below hero-left */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 2.5rem;
}
.stat-strip .stat {
  padding: 1.1rem 1.4rem;
  border-right: 1px solid var(--border);
  background: var(--surface);
}
.stat-strip .stat:last-child { border-right: none; }
.stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1;
}
.stat-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 0.35rem;
}
@media (max-width: 640px) { .stat-strip { grid-template-columns: 1fr 1fr; } }


/* =========================================
   8. COMPONENTS
   ========================================= */

/* --- Buttons --- */
.btn-primary {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--surface);
  background: var(--btn-gradient, var(--text));
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius-sm);
  border: none;
  transition: opacity .2s ease, transform .15s ease;
}
.btn-primary:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  color: var(--surface);
}

.btn-secondary, .btn-ghost {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  background: transparent;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: border-color .2s ease, color .2s ease;
}
.btn-secondary:hover, .btn-ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* --- Cards --- */
.card {
  background: var(--surface-gradient, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.6rem;
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover {
  background: var(--card-hover-gradient, var(--surface-soft));
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 2rem;
}
@media (max-width: 1000px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px)  { .card-grid { grid-template-columns: 1fr; } }
.card-grid .card {
  border: none;
  border-radius: 0;
  background: var(--surface);
}

.card-link {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 1rem;
}
.card-link::after { content: "→"; }
.card-link:hover { color: var(--primary-strong); }

/* --- Num / label --- */
.num {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

/* --- Badge --- */
.badge {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--border);
}
.badge.live {
  background: #dcfce7;
  color: #16a34a;
  border-color: #86efac;
}

/* --- Map grid (sitemap) --- */
.map-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 2rem;
}
@media (max-width: 1000px) { .map-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .map-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .map-grid { grid-template-columns: 1fr; } }
.map-card {
  background: var(--surface);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--text);
  transition: background .18s ease;
}
.map-card:hover { background: var(--surface-soft); }
.map-card h3 { font-size: 1.15rem; }
.map-card p { font-size: 0.92rem; color: var(--muted); margin: 0; }
.map-card .status {
  margin-top: auto;
  padding-top: 0.8rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* --- Featured card --- */
.featured-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}
.featured-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1rem;
}

/* --- Pull quote --- */
.pull-quote {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  line-height: 1.3;
  max-width: 28ch;
  color: var(--text);
}
.pull-quote em { color: var(--primary); font-style: italic; }

/* --- Flow diagram --- */
.flow-wrapper {
  overflow-x: auto;
  padding: 0.5rem 0;
}
.flow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: max-content;
}
.flow-card {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  white-space: nowrap;
}
.flow-card.active { background: var(--primary); color: var(--surface); border-color: var(--primary); }
.flow-arrow { color: var(--faint); font-size: 1rem; }

/* --- Progress --- */
.progress-block { margin: 1rem 0; }
.progress-label {
  display: flex;
  justify-content: space-between;
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--faint);
  margin-bottom: 0.4rem;
}
.progress-bar {
  height: 4px;
  background: var(--bg-deep);
  border-radius: 99px;
  overflow: hidden;
}
.progress-bar .progress {
  height: 100%;
  background: var(--primary);
  border-radius: 99px;
}

/* --- Placeholder note --- */
.coming {
  margin-top: 2rem;
  padding: 1.4rem 1.6rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  max-width: var(--measure);
}
.coming .label {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

/* --- Meta --- */
.meta {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--faint);
}


/* =========================================
   9. DRILL LAYOUT
   ========================================= */

.drill-article {
  max-width: var(--measure);
  padding: 3rem 0;
}
.drill-article h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 0.8rem;
}

.drill-toggle {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.9rem;
  margin: 1.5rem 0 0;
  transition: background .18s ease;
  user-select: none;
}
.drill-toggle:hover { background: var(--primary-soft); }

.drill-answer {
  display: none;
  margin-top: 1rem;
  padding: 1.4rem 1.6rem;
  border-left: 3px solid var(--primary);
  background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.drill-answer.open { display: block; }

.drill-nav {
  display: flex;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

/* ── Drill Pack ── */
.drillpack-article {
  max-width: var(--measure);
  padding: 3rem 0;
  counter-reset: drill-counter;
}
.drillpack-article h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 0.8rem;
}
.drillpack-context {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.9rem;
  margin-bottom: 2.5rem;
}
.drillpack-context a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.drillpack-article h2 {
  counter-increment: drill-counter;
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 3.5rem;
  margin-bottom: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  border-bottom: none;
}
.drillpack-article h2::before {
  content: counter(drill-counter, decimal-leading-zero);
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  font-weight: 400;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.drillpack-article > p:first-of-type {
  font-style: italic;
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 2rem;
}
.drillpack-article p {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.75;
  margin-bottom: 0.8rem;
}
.drillpack-article ul,
.drillpack-article ol {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.7;
  padding-left: 1.4rem;
  margin-bottom: 1rem;
}
.drillpack-article li { margin-bottom: 0.25rem; }
.drillpack-article strong { color: var(--primary); font-weight: 600; }
.drillpack-article hr { display: none; }
.drillpack-article blockquote {
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.1rem 0.85rem;
  background: var(--primary-soft);
  border-left: 3px solid var(--primary);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--text);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.drillpack-article blockquote::before {
  content: "Prompt";
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--primary);
  margin-bottom: 0.4rem;
}
.drillpack-article blockquote p { font-size: 0.9rem; margin: 0; color: var(--text); }
.drillpack-article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin: 1rem 0 1.2rem;
}
.drillpack-article th {
  text-align: left;
  font-family: 'DM Mono', monospace;
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  padding: 0.5rem 0.75rem;
  border-bottom: 1.5px solid var(--primary);
  background: var(--primary-soft);
}
.drillpack-article td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text);
  font-size: 0.9rem;
}
.drillpack-article tr:last-child td { border-bottom: none; }
/* ── Drill Pack CTA (TOC sidebar) ── */
.art-toc-drillpack {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.art-toc-drillpack-label {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: .75rem;
}
.art-toc-drillpack-title {
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--muted);
  margin-bottom: .2rem;
}
.art-toc-drillpack-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: .68rem;
  color: var(--faint);
  margin-bottom: .4rem;
}
.art-toc-drillpack-link {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--muted);
  text-decoration: none;
  padding: .28rem .5rem .28rem .4rem;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: color .15s, border-color .15s, background .15s;
}
.art-toc-drillpack-link:hover {
  color: var(--text);
  background: var(--primary-soft);
  border-left-color: var(--primary);
}

.drillpack-article blockquote {
  margin: 1.2rem 0;
  padding: 0.75rem 1rem;
  background: var(--faint);
  border-left: 3px solid var(--primary);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--muted);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}


/* =========================================
   10. POST / ARTICLE LAYOUT
   ========================================= */

.post-article {
  max-width: var(--measure);
  padding: 3rem 0;
}
.post-article h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 0.5rem;
}
.post-article .post-meta {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--faint);
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.post-article h2 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
  margin-bottom: 0.6rem;
}
.post-article p { color: var(--muted); margin-bottom: 1rem; }
.post-article ul, .post-article ol {
  padding-left: 1.4rem;
  color: var(--muted);
  margin-bottom: 1rem;
}
.post-article li { margin-bottom: 0.3rem; }


/* =========================================
   11. SITEMAP PAGE
   ========================================= */

.sitemap-page { padding: 3rem 0; }
.sitemap-page h1 { margin-bottom: 2rem; }
.sitemap-section { margin-bottom: 2.5rem; }
.sitemap-section h2 {
  font-size: 1rem;
  font-family: 'DM Mono', monospace;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.8rem;
}
.sitemap-section ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.sitemap-section li a {
  text-decoration: none;
  color: var(--muted);
  font-size: 0.95rem;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.sitemap-section li a:hover {
  color: var(--primary);
  border-color: var(--primary);
}


/* =========================================
   12. FOOTER
   ========================================= */

.footer {
  border-top: none;
  background: var(--ink-gradient, var(--text));
  margin-top: 4rem;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem 2.5rem;
  padding: 2.5rem clamp(1.5rem, 4vw, 3.5rem) 3.5rem;
  max-width: 1320px;
  margin: 0 auto;
}
.footer-copy {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.6);
  line-height: 1.9;
}
.footer-copy strong {
  color: rgba(255,255,255,0.95);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.footer-copy a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  transition: color .15s ease, border-color .15s ease;
}
.footer-copy a:hover {
  color: #ffffff;
  border-color: rgba(255,255,255,0.6);
}

@media (max-width: 640px) {
  .footer-inner { flex-direction: column; }
}


/* =========================================
   13. UTILITIES & ANIMATIONS
   ========================================= */

.prose { max-width: var(--measure); }
.prose p { color: var(--muted); margin-bottom: 1rem; }
.prose p:last-child { margin-bottom: 0; }

.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

/* Entrance animation */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    animation: rise 0.85s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  }
  .reveal.d1 { animation-delay: 0.05s; }
  .reveal.d2 { animation-delay: 0.18s; }
  .reveal.d3 { animation-delay: 0.30s; }
  .reveal.d4 { animation-delay: 0.42s; }
  .reveal.d5 { animation-delay: 0.54s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}


/* =========================================
   14. PILLAR STRIP
   ========================================= */

.pillar-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 1.2rem;
}
@media (max-width: 900px) { .pillar-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pillar-strip { grid-template-columns: 1fr; } }

.pillar {
  background: var(--surface);
  padding: 1.4rem 1.2rem;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  transition: background .18s ease;
}
.pillar:hover { background: var(--primary-soft); }
.pillar-num  { font-family: 'DM Mono', monospace; font-size: .68rem; letter-spacing: .15em; color: var(--primary); }
.pillar-name { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 500; color: var(--text); }
.pillar-desc { font-size: .82rem; color: var(--faint); line-height: 1.4; }


/* =========================================
   15. FOOTER COLUMNS
   ========================================= */

.footer-col { display: flex; flex-direction: column; gap: .5rem; }
.footer-group-label {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--primary-soft, rgba(255,255,255,0.5));
  margin-bottom: .2rem;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.footer-links a {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color .15s ease;
}
.footer-links a:hover { color: #ffffff; }

/* AI Promise strip — footer */
.footer-ai-strip {
  width: 100%;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.1rem;
  margin-top: 1.2rem;
}
.footer-ai-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: rgba(255,255,255,.7);
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .05em;
  transition: color .2s;
}
.footer-ai-link:hover { color: rgba(255,255,255,.95); }
.footer-ai-badge {
  padding: .22rem .7rem;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 99px;
  font-size: .6rem;
  letter-spacing: .1em;
  white-space: nowrap;
  flex-shrink: 0;
  color: rgba(255,255,255,.9);
  transition: border-color .2s, background .2s;
}
.footer-ai-link:hover .footer-ai-badge {
  border-color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.08);
}
.footer-ai-text {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width .4s ease, opacity .3s ease;
}
.footer-ai-link:hover .footer-ai-text { opacity: 1; max-width: 520px; }
.footer-ai-cta {
  opacity: 0;
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .25s ease .1s;
}
.footer-ai-link:hover .footer-ai-cta { opacity: 1; }

/* Bento grid — AI Promise page */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}
.bento-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.8rem 2rem;
  box-shadow: var(--shadow-sm);
}
.bento-wide { grid-column: 1 / -1; }
.bento-ink {
  grid-column: 1 / -1;
  background: var(--ink-gradient);
  border-color: transparent;
}
.bento-label {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .75rem;
}
.bento-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: .6rem;
  line-height: 1.3;
}
.bento-card p {
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.72;
}
.bento-quote {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 400;
  color: rgba(255,255,255,.9);
  line-height: 1.5;
}
.bento-quote em { color: #e8c87a; font-style: italic; }
@media (max-width: 700px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-wide, .bento-ink { grid-column: 1; }
}

/* LinkedIn pill in nav */
.nav-linkedin {
  font-family: 'DM Mono', monospace;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--surface) !important;
  background: var(--primary);
  padding: .35rem .7rem !important;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background .18s ease;
}
.nav-linkedin:hover { background: var(--primary-strong) !important; color: var(--surface) !important; }

[data-theme="mono"] .nav-linkedin {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border: none;
}
[data-theme="mono"] .nav-linkedin:hover { background: #333333 !important; }

/* Mono: live badge — white glass on black primary panel */
[data-theme="mono"] .series-status.live {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.4);
  color: rgba(255,255,255,0.95);
}

/* Mono: coming badge — stronger dashed border */
[data-theme="mono"] .series-status.coming {
  border-color: rgba(0,0,0,0.28);
  color: #6b6b6b;
}

/* Mono: in-progress badge — deeper amber on light bg */
[data-theme="mono"] .series-status.in-progress {
  background: rgba(0,0,0,0.06);
  color: #b45309;
  border-color: rgba(0,0,0,0.18);
}
[data-theme="mono"] .series-status.in-progress .series-dot {
  background: #b45309;
  box-shadow: none;
}

/* Mono: elements using var(--primary) inside dark sections */
[data-theme="mono"] .hz-force-name {
  color: rgba(255,255,255,0.92);
}
[data-theme="mono"] .hz-tp-crossing {
  color: rgba(255,255,255,0.55);
}


/* =========================================
   16. DASHBOARD LAYOUT
   ========================================= */

/* Lean hero for dashboard pages */
.hero-lean {
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  background: var(--hero-gradient, var(--bg));
}
.hero-lean .hero-split {
  grid-template-columns: 60fr 40fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}
.hero-lean .hero-title {
  font-size: clamp(1.9rem, 3vw, 3rem);
}
.hero-lean .hero-sub {
  font-size: 1rem;
  margin-top: 1rem;
}
.hero-lean .hero-actions { margin-top: 1.4rem; }
.hero-lean .stat-strip   { margin-top: 1.8rem; }

/* Stat strip — 4 columns on dashboard */
.stat-strip-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (max-width: 700px) { .stat-strip-4 { grid-template-columns: repeat(2, 1fr); } }
.stat-strip-4 .stat {
  padding: 1rem 1.2rem;
  border-right: 1px solid var(--border);
  background: var(--surface);
}
.stat-strip-4 .stat:last-child { border-right: none; }

/* Dashboard grid */
.dashboard-grid {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 2rem;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "books    books    consulting  consulting"
    "pubs     pubs     brand       about";
}
@media (max-width: 960px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "books       books"
      "consulting  consulting"
      "pubs        pubs"
      "brand       about";
  }
}
@media (max-width: 560px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "books" "consulting" "pubs" "brand" "about";
  }
}

.dash-area-books        { grid-area: books; }
.dash-area-consulting   { grid-area: consulting; }
.dash-area-pubs         { grid-area: pubs; }
.dash-area-brand        { grid-area: brand; }
.dash-area-about        { grid-area: about; }

.dash-card {
  background: var(--surface-gradient, var(--surface));
  padding: 2rem 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  transition: background .2s ease;
}
.dash-card:hover { background: var(--card-hover-gradient, var(--surface-soft)); }

.dash-card-label {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dash-card-label .badge { letter-spacing: .06em; }

.dash-card h2 {
  font-size: 1.6rem;
  line-height: 1.1;
  margin-bottom: .6rem;
}
.dash-card h3 {
  font-size: 1.2rem;
  line-height: 1.15;
  margin-bottom: .5rem;
}
.dash-card p {
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.65;
}

/* Inside the books card — two series side by side */
.dash-books-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.4rem;
}
@media (max-width: 560px) { .dash-books-grid { grid-template-columns: 1fr; } }

.dash-book {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.3rem;
}
.dash-book .book-series {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: .5rem;
}
.dash-book h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: .4rem;
}
.dash-book p {
  font-size: .84rem;
  color: var(--muted);
  margin-bottom: .9rem;
}
.dash-book .book-progress {
  margin-bottom: .7rem;
}

/* Consulting areas as tags */
.area-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}
.area-tag {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  padding: .35rem .75rem;
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--muted);
  background: var(--bg);
  white-space: nowrap;
}

/* Publications — two series as rows */
.pub-series {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.2rem;
}
@media (max-width: 560px) { .pub-series { grid-template-columns: 1fr; } }

.pub-series-item {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
}
.pub-series-item .ps-label {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .3rem;
}
.pub-series-item .ps-title {
  font-family: 'Playfair Display', serif;
  font-size: .95rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: .25rem;
}
.pub-series-item .ps-meta {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  color: var(--faint);
  letter-spacing: .06em;
}

/* Open to list */
.open-to-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: 1rem;
}
.open-to-list li {
  font-size: .88rem;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.open-to-list li::before {
  content: "✦";
  color: var(--primary);
  font-size: .7rem;
  flex-shrink: 0;
}

/* Dashboard card footer — CTA pinned to bottom */
.dash-card-footer {
  margin-top: auto;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  margin-top: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}
.dash-card-footer .card-link { margin-top: 0; padding-top: 0; }



/* =========================================
   17. LINKEDIN CAROUSEL
   ========================================= */

.li-carousel {
  position: relative;
  width: 100%;
  background: var(--bg-deep);
  height: 320px;         /* fixed height — images scale to fit */
  overflow: hidden;
}

.li-track {
  display: flex;
  height: 100%;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.li-track::-webkit-scrollbar { display: none; }

.li-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  overflow: hidden;
}

.li-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  background: var(--bg-deep);
}

/* Prev / Next buttons */
.li-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  cursor: pointer;
  color: var(--text);
  transition: background .18s ease, box-shadow .18s ease;
  z-index: 10;
  box-shadow: var(--shadow-sm);
}
.li-btn:hover { background: var(--primary); color: var(--surface); border-color: var(--primary); }
.li-prev { left: .6rem; }
.li-next { right: .6rem; }

/* Dots */
.li-dots {
  position: absolute;
  bottom: .6rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .35rem;
  z-index: 10;
}

.li-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, transform .2s ease;
}
.li-dot.active {
  background: var(--primary);
  transform: scale(1.3);
}

/* Empty state */
.carousel-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--faint);
}
.carousel-empty-icon {
  font-size: 2rem;
  margin-bottom: .8rem;
  opacity: .5;
}
.carousel-empty p {
  font-size: .85rem;
  color: var(--faint);
  line-height: 1.6;
}
.carousel-empty code {
  font-family: 'DM Mono', monospace;
  font-size: .78rem;
  background: var(--bg-deep);
  padding: .15rem .4rem;
  border-radius: 3px;
  color: var(--primary);
}


/* =========================================
   18. UNIFIED BOOKS TRACK
   ========================================= */

.dash-books-unified {
  margin-top: 1.6rem;
}

.unified-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1.2rem;
}
@media (max-width: 640px) { .unified-track { grid-template-columns: repeat(2, 1fr); } }

.unified-stat {
  padding: 1rem 1.1rem;
  border-right: 1px solid var(--border);
  background: var(--bg-deep);
}
.unified-stat:last-child { border-right: none; }


/* =========================================
   19. MENTEE CARDS
   ========================================= */

.mentee-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.mentee-card {
  background: var(--surface-gradient, var(--surface));
  padding: 2rem 2.2rem;
  transition: background .18s ease;
}
.mentee-card:hover { background: var(--card-hover-gradient, var(--surface-soft)); }

/* Header row — photo + meta */
.mentee-header {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  margin-bottom: 1.6rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--border-soft);
}

.mentee-photo {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border);
}
.mentee-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mentee-photo-placeholder {
  width: 100%;
  height: 100%;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 500;
}

.mentee-meta {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.mentee-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text);
}
.mentee-role {
  font-size: .9rem;
  color: var(--muted);
  font-weight: 500;
}
.mentee-org {
  font-family: 'DM Mono', monospace;
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--faint);
}
.mentee-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .4rem;
}
.mentee-linkedin {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
  margin-top: .3rem;
  transition: opacity .15s ease;
}
.mentee-linkedin:hover { opacity: .7; }

/* Body — two sections side by side on wide screens */
.mentee-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 700px) { .mentee-body { grid-template-columns: 1fr; gap: 1.2rem; } }

.mentee-q {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .6rem;
}
.mentee-section p {
  font-size: .93rem;
  color: var(--muted);
  line-height: 1.72;
}


/* =========================================
   20. ABOUT PAGE PHOTO
   ========================================= */

.about-photo-wrap {
  width: 60%;
  max-width: 200px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg-deep);
  position: relative;
  box-shadow: var(--shadow-lg);
}

.about-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .4s ease;
}
.about-photo-wrap:hover .about-photo { transform: scale(1.02); }

/* Placeholder shown when photo not yet uploaded */
.about-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--primary-soft);
  color: var(--primary);
}
.about-photo-placeholder span {
  font-family: 'Playfair Display', serif;
  font-size: 4rem;
  font-weight: 500;
  opacity: .4;
}
.about-photo-placeholder p {
  font-family: 'DM Mono', monospace;
  font-size: .72rem;
  letter-spacing: .1em;
  text-align: center;
  color: var(--faint);
  line-height: 1.6;
}
.about-photo-placeholder code {
  background: var(--bg);
  padding: .15rem .4rem;
  border-radius: 3px;
  color: var(--primary);
}


/* =========================================
   21. SERIES CARDS & STATUS BADGES
   ========================================= */

/* 4-col series overview grid */
.series-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 1.5rem;
}
@media (max-width: 900px) { .series-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .series-grid { grid-template-columns: 1fr; } }

.series-card {
  background: var(--surface-gradient, var(--surface));
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  text-decoration: none;
  color: var(--text);
  transition: background .18s ease;
}
.series-card:hover { background: var(--card-hover-gradient, var(--surface-soft)); }

.series-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .3rem;
}
.series-id {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--primary);
}
.series-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
}
.series-desc {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.6;
  margin-top: .2rem;
}
.series-meta {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .08em;
  color: var(--faint);
  margin-top: auto;
  padding-top: .8rem;
}

/* Status badge — dot + label */
.series-status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: .28rem .72rem;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.series-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

/* PUBLISHED — glass pill on primary panel, live ping dot */
.series-status.live {
  background: rgba(0,0,0,0.28);
  color: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(4px);
}
.series-status.live .series-dot {
  background: #4ade80;
  box-shadow: 0 0 4px rgba(74,222,128,0.9);
}
.series-status.live .series-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: #4ade80;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .series-status.live .series-dot::after {
    animation: ping-live 2s cubic-bezier(0,0,0.2,1) infinite;
  }
  @keyframes ping-live {
    0%   { transform: scale(1);  opacity: .65; }
    100% { transform: scale(3);  opacity: 0;   }
  }
}

/* IN PROGRESS — warm amber glow */
.series-status.in-progress {
  background: rgba(120,53,15,0.18);
  color: #fb923c;
  border: 1px solid rgba(251,146,60,0.35);
}
.series-status.in-progress .series-dot {
  background: #f97316;
  box-shadow: 0 0 5px rgba(249,115,22,0.8);
}

/* COMING — ghost, dashed, barely-there */
/* Reset overrides from the generic .coming placeholder-note rule */
.series-status.coming {
  background: transparent;
  color: var(--faint);
  border: 1px dashed var(--border);
  margin-top: 0;
  padding: .25rem .65rem;
  border-radius: 99px;
  max-width: none;
}
.series-status.coming .series-dot {
  background: var(--faint);
  opacity: .35;
}

/* Series section header — title + status side by side */
.series-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}


/* =========================================
   22. CAREER TIMELINE
   ========================================= */

.timeline-wrap {
  margin-top: 2.5rem;
  overflow-x: auto;
  padding: 3rem 0 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.timeline {
  display: flex;
  align-items: center;
  position: relative;
  min-width: 700px;
  padding: 0 2rem;
}

/* Connecting line */
.timeline::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 2rem;
  right: 2rem;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--primary) 8%,
    var(--primary) 92%,
    transparent 100%);
  transform: translateY(-50%);
  opacity: 0.5;
}

/* Each node */
.tl-node {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: default;
}

/* Year label */
.tl-year {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.6rem;
}

/* Dot */
.tl-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--primary);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tl-node:hover .tl-dot {
  transform: scale(1.4);
  box-shadow: 0 0 0 3px var(--primary), 0 0 12px var(--primary);
}

/* Text block */
.tl-text {
  margin-top: 0.6rem;
  text-align: center;
  max-width: 130px;
}
.tl-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
}
.tl-sub {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin-top: 0.2rem;
  line-height: 1.4;
}

/* Alternating layout — even nodes flip above the line */
.tl-node.flip {
  flex-direction: column-reverse;
}
.tl-node.flip .tl-year { margin-bottom: 0; margin-top: 0.6rem; }
.tl-node.flip .tl-text { margin-top: 0; margin-bottom: 0.6rem; }

/* Current/last node highlight */
.tl-node.current .tl-dot {
  background: var(--text);
  box-shadow: 0 0 0 2px var(--text);
  width: 18px;
  height: 18px;
}
.tl-node.current .tl-year { color: var(--text); }


/* =========================================
   23. CAREER BENTO GRID
   ========================================= */

.career-section {
  padding: 2.5rem 0 2rem;
}

/* Bento grid */
.career-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 2rem;
}

.cb-card {
  background: linear-gradient(145deg, var(--surface) 0%, var(--primary-soft) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem 1.4rem 1.3rem;
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.cb-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-strong));
  border-radius: 16px 16px 0 0;
}
.cb-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.18), 0 0 0 1px var(--primary);
}

/* 2002 origin card — spans 2 rows */
.cb-origin { grid-row: span 2; }

/* 2026 now card — full width */
.cb-now { grid-column: 1 / -1; }

/* Year */
.cb-year {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  margin-bottom: .5rem;
}
.cb-origin .cb-year { font-size: 3.6rem; }
.cb-now .cb-year { font-size: 2rem; display: inline; margin-right: .8rem; }

/* Title */
.cb-title {
  font-family: 'DM Sans', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: .3rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.cb-origin .cb-title { font-size: 1rem; }
.cb-now .cb-title { font-size: .95rem; display: inline; }

/* Subtitle */
.cb-sub {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  color: var(--muted);
  letter-spacing: .04em;
  line-height: 1.55;
  margin-top: .35rem;
}

/* Badge */
.cb-badge {
  display: inline-block;
  margin-top: .9rem;
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .25rem .7rem;
  background: var(--primary);
  color: var(--bg);
  border-radius: 99px;
  white-space: nowrap;
  font-weight: 500;
}
.cb-badge.now { background: var(--text); color: var(--bg); }

/* Origin card extras */
.cb-origin-stat {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  color: var(--faint);
  letter-spacing: .06em;
  line-height: 1.7;
}

/* Insight line */
.cb-insight {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--border);
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.6;
  font-style: italic;
}
.cb-origin .cb-insight {
  font-size: .82rem;
}

/* Now card — horizontal layout */
.cb-now-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.cb-now-right {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  color: var(--muted);
  letter-spacing: .04em;
  line-height: 1.6;
  text-align: right;
}

@media (max-width: 680px) {
  .career-bento { grid-template-columns: 1fr 1fr; }
  .cb-origin { grid-row: span 1; }
  .cb-now { grid-column: 1 / -1; }
  .cb-now-inner { flex-direction: column; align-items: flex-start; }
  .cb-now-right { text-align: left; }
}


/* =========================================
   24. LOS PAGE COMPONENTS
   ========================================= */

/* Architecture grid — 2×2 */
.los-arch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (max-width: 680px) { .los-arch-grid { grid-template-columns: 1fr; } }

.los-arch-card {
  background: var(--surface-gradient, var(--surface));
  padding: 1.8rem 1.6rem;
}
.los-arch-label {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .4rem;
}
.los-arch-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: .6rem;
}
.los-arch-desc {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.65;
}

/* Domains grid — 2×3 */
.los-domains-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (max-width: 700px) { .los-domains-grid { grid-template-columns: 1fr; } }

.los-domain-card {
  background: var(--surface-gradient, var(--surface));
  padding: 1.5rem 1.4rem;
  transition: background .18s ease;
}
.los-domain-card:hover { background: var(--card-hover-gradient, var(--surface-soft)); }

.los-domain-header {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin-bottom: 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--border-soft);
}
.los-domain-letter {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--primary);
  line-height: 1;
  flex-shrink: 0;
  opacity: .7;
}
.los-domain-name {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: .3rem;
}
.los-domain-q {
  font-size: .78rem;
  color: var(--faint);
  font-style: italic;
  line-height: 1.4;
}

.los-cap-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.los-cap-list li {
  font-size: .82rem;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.los-cap-list li span {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .06em;
  color: var(--primary);
  flex-shrink: 0;
}

/* Dependency map */
.los-dep-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.los-dep-chain {
  background: var(--surface);
  padding: 1.2rem 1.4rem;
}
.los-dep-chain.los-dep-foundational {
  background: var(--primary-soft);
}

.los-dep-label {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .6rem;
}

.los-dep-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
}

.los-dep-node {
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .3rem .65rem;
  white-space: nowrap;
}
.los-dep-node.root {
  background: var(--primary);
  color: var(--surface);
  border-color: var(--primary);
}

.los-dep-arrow {
  font-family: 'DM Mono', monospace;
  font-size: .85rem;
  color: var(--faint);
  flex-shrink: 0;
}

.los-dep-note {
  font-size: .76rem;
  color: var(--faint);
  font-style: italic;
  margin-top: .6rem;
}


/* =========================================
   25. LOS — VISUAL REDESIGN (v2)
       Architecture · Domains · Dep Map
   ========================================= */

/* ── ARCHITECTURE: FOUR PILLARS ── */

.los-pillars {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 2rem;
  align-items: start;
}
@media (max-width: 900px) {
  .los-pillars { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .los-pillars { grid-template-columns: 1fr; }
}

.los-pillar {
  background: var(--surface);
  padding: 1.4rem 1.2rem 1.6rem;
}
.los-pillar-label {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .35rem;
}
.los-pillar-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: .5rem;
}
.los-pillar-desc {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-soft);
}

/* Belt stack */
.los-belt-stack { display: flex; flex-direction: column; gap: 3px; }
.los-belt {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .45rem .8rem;
  border-radius: var(--radius-sm);
  background: var(--bc, var(--bg-deep));
  color: var(--bt, var(--text));
  transition: transform .15s ease;
}
.los-belt:hover { transform: translateX(3px); }
.los-belt-name {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  letter-spacing: .06em;
  font-weight: 500;
  flex-shrink: 0;
  min-width: 46px;
}
.los-belt-info {
  font-size: .7rem;
  line-height: 1.3;
  opacity: .85;
}
.los-belt-radius {
  font-size: .62rem;
  opacity: .7;
}

/* Belt colours — fixed semantic values */
.los-belt[data-belt="White"]  { --bc:#f0ede8; --bt:#333333; }
.los-belt[data-belt="Yellow"] { --bc:#F5C518; --bt:#1a1208; }
.los-belt[data-belt="Orange"] { --bc:#E07522; --bt:#ffffff; }
.los-belt[data-belt="Green"]  { --bc:#2E7D32; --bt:#ffffff; }
.los-belt[data-belt="Blue"]   { --bc:#1565C0; --bt:#ffffff; }
.los-belt[data-belt="Brown"]  { --bc:#5D4037; --bt:#ffffff; }
.los-belt[data-belt="Black"]  { --bc:#1a1a1a; --bt:#eeeeee; }
.los-belt[data-belt="Master"] { --bc:#9a7808; --bt:#fffbe8; }

/* Maturity scale */
.los-maturity-stack { display: flex; flex-direction: column; gap: 3px; }
.los-maturity-item {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .55rem .7rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--mc, var(--border));
  background: var(--surface-soft);
  transition: background .15s ease;
}
.los-maturity-item:hover { background: var(--bg-deep); }
.los-maturity-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--mc, var(--primary));
  line-height: 1;
  flex-shrink: 0;
  min-width: 18px;
}
.los-maturity-name {
  font-size: .78rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}
.los-maturity-q {
  font-size: .68rem;
  color: var(--faint);
  font-style: italic;
  margin-top: .15rem;
  line-height: 1.3;
}

/* Maturity stage colours */
.los-maturity-item[data-stage="1"] { --mc:#7a7a8a; }
.los-maturity-item[data-stage="2"] { --mc:#b87030; }
.los-maturity-item[data-stage="3"] { --mc:#3a7a3a; }
.los-maturity-item[data-stage="4"] { --mc:#2a5a9a; }
.los-maturity-item[data-stage="5"] { --mc:#7a4a7a; }
.los-maturity-item[data-stage="6"] { --mc:#9a7808; }

/* Transfer staircase */
.los-transfer-stack { display: flex; flex-direction: column; gap: 5px; }
.los-transfer-step {
  display: flex;
  flex-direction: column;
  padding: .6rem .8rem;
  border-radius: var(--radius-sm);
  background: var(--tc-bg, var(--bg-deep));
  color: var(--tc-txt, var(--text));
  transition: filter .15s ease;
  width: var(--tc-w, 60%);
  align-self: flex-end;
}
.los-transfer-step:hover { filter: brightness(1.06); }
.los-transfer-num {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .12em;
  margin-bottom: .2rem;
  opacity: .75;
}
.los-transfer-name {
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.2;
}
.los-transfer-sub {
  font-size: .7rem;
  opacity: .8;
  margin-top: .1rem;
}

.los-transfer-step[data-level="1"] { --tc-bg:var(--bg-deep); --tc-txt:var(--muted); --tc-w:60%; }
.los-transfer-step[data-level="2"] { --tc-bg:var(--primary-soft); --tc-txt:var(--text); --tc-w:73%; }
.los-transfer-step[data-level="3"] {
  background: color-mix(in srgb, var(--primary) 25%, var(--bg-deep));
  color: var(--text);
  --tc-w: 87%;
}
.los-transfer-step[data-level="4"] { --tc-bg:var(--primary); --tc-txt:var(--surface); --tc-w:100%; }

/* Context strip */
.los-context-stack { display: flex; flex-direction: column; gap: 4px; }
.los-ctx-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .8rem;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  transition: background .15s ease, border-color .15s ease;
}
.los-ctx-item:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
}
.los-ctx-icon {
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1;
}
.los-ctx-name {
  font-size: .8rem;
  font-weight: 500;
  color: var(--text);
}
.los-ctx-desc {
  font-size: .68rem;
  color: var(--faint);
}


/* ── DOMAINS: 3-COL WITH CHIPS ── */

.los-domains-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 2rem;
}
@media (max-width: 800px) { .los-domains-v2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .los-domains-v2 { grid-template-columns: 1fr; } }

.los-dcard {
  background: var(--surface);
  padding: 1.4rem 1.3rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: background .18s ease;
}
.los-dcard:hover { background: var(--surface-soft); }

/* Watermark domain letter */
.los-dcard::after {
  content: attr(data-domain);
  position: absolute;
  bottom: -.5rem;
  right: .4rem;
  font-family: 'Playfair Display', serif;
  font-size: 7rem;
  font-weight: 700;
  color: var(--primary);
  opacity: .055;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* Colour stripe at top of each domain card */
.los-dcard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--dc, var(--primary));
}

/* Domain card colours */
.los-dcard[data-domain="A"] { --dc: #9E5A34; }
.los-dcard[data-domain="B"] { --dc: #1565C0; }
.los-dcard[data-domain="C"] { --dc: #2E7D32; }
.los-dcard[data-domain="D"] { --dc: #7B1FA2; }
.los-dcard[data-domain="E"] { --dc: #C62828; }
.los-dcard[data-domain="F"] { --dc: #9a7808; }

.los-dcard-top {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin-bottom: .9rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--border-soft);
}
.los-dcard-letter {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--dc, var(--primary));
  line-height: 1;
  flex-shrink: 0;
}
.los-dcard-name {
  font-family: 'Playfair Display', serif;
  font-size: .95rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: .3rem;
}
.los-dcard-q {
  font-size: .75rem;
  color: var(--faint);
  font-style: italic;
  line-height: 1.45;
}

/* Capability chips */
.los-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.los-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  color: var(--muted);
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: .25rem .65rem .25rem .45rem;
  transition: background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.los-chip:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--text);
}
.los-chip-code {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  font-weight: 500;
  color: var(--dc, var(--primary));
  letter-spacing: .04em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: .1rem .35rem;
  flex-shrink: 0;
}


/* ── DEPENDENCY MAP V2 ── */

.los-dep-v2 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2rem;
}

.los-chain {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow .18s ease;
}
.los-chain:hover { box-shadow: var(--shadow-sm); }

.los-chain-label {
  flex-shrink: 0;
  width: 130px;
  padding: .9rem .8rem;
  background: var(--bg-deep);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
}
.los-chain-label-text {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);
  line-height: 1.4;
}

.los-chain-body {
  flex: 1;
  padding: .9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.los-chain-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
}

/* Nodes */
.los-cnode {
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  padding: .35rem .75rem;
  border-radius: var(--radius-sm);
  background: var(--bg-deep);
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
  transition: background .15s ease;
}
.los-cnode:hover { background: var(--primary-soft); color: var(--text); }

/* Root node — foundational */
.los-cnode.root {
  background: var(--primary);
  color: var(--surface);
  border-color: var(--primary);
  font-weight: 600;
}
.los-cnode.root:hover {
  background: var(--primary-strong, var(--primary));
  color: var(--surface);
}

/* Arrow */
.los-carrow {
  color: var(--primary);
  font-size: .9rem;
  font-weight: 300;
  flex-shrink: 0;
  opacity: .7;
}

/* Chain note */
.los-chain-note {
  font-size: .74rem;
  color: var(--faint);
  font-style: italic;
}

/* Foundational chain — special treatment */
.los-chain.foundational {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.los-chain.foundational .los-chain-label {
  background: var(--primary);
  border-right-color: var(--primary);
}
.los-chain.foundational .los-chain-label-text {
  color: var(--surface);
}
.los-chain.foundational .los-chain-body {
  background: transparent;
}

@media (max-width: 700px) {
  .los-chain { flex-direction: column; }
  .los-chain-label { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
}


/* =========================================
   26. LOS SPOTLIGHT (homepage section)
   ========================================= */

.los-spotlight {
  background: var(--ink-gradient, var(--text));
  padding: clamp(3rem, 6vw, 5rem) 0;
  position: relative;
  overflow: hidden;
}

/* Subtle radial glow */
.los-spotlight::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse 70% 80% at 20% 50%,
    rgba(158, 90, 52, 0.18) 0%, transparent 65%);
  pointer-events: none;
}

.los-spotlight-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 860px) {
  .los-spotlight-inner { grid-template-columns: 1fr; }
}

/* Left side */
.los-spot-heading {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 500;
  color: #ffffff;
  line-height: 1.15;
  margin: .6rem 0 1rem;
}

.los-spot-sub {
  font-size: .95rem;
  color: rgba(255,255,255,.65);
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 1.8rem;
}

.los-spot-stats {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
}
.los-spot-stat { text-align: center; }
.los-spot-num {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
  line-height: 1;
}
.los-spot-label {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-top: .3rem;
}

.los-spot-cta {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .75rem 1.5rem;
  background: var(--primary);
  color: var(--surface);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: opacity .18s ease, transform .18s ease;
}
.los-spot-cta:hover {
  opacity: .88;
  transform: translateY(-2px);
  color: var(--surface);
}

/* Right side */
.los-spot-right {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.los-spot-domains {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.los-spot-domain {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .55rem .9rem;
  background: rgba(255,255,255,.05);
  border-left: 3px solid var(--dd, rgba(255,255,255,.2));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: background .18s ease, transform .18s ease;
}
.los-spot-domain:hover {
  background: rgba(255,255,255,.1);
  transform: translateX(4px);
}

.los-spot-dletter {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--dd, rgba(255,255,255,.7));
  line-height: 1;
  flex-shrink: 0;
  min-width: 18px;
}
.los-spot-dname {
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  color: rgba(255,255,255,.7);
}

.los-spot-principle {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
}
.los-spot-principle-label {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .5rem;
}
.los-spot-principle-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-style: italic;
  color: rgba(255,255,255,.85);
  line-height: 1.5;
}


/* =========================================
   27. HOMEPAGE REDESIGN COMPONENTS
   ========================================= */

/* ── HERO ── */
.hp-hero {
  background: var(--ink-gradient, var(--text));
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 5rem);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.hp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 15% 50%,
    rgba(158,90,52,.22) 0%, transparent 65%);
  pointer-events: none;
}
.hp-hero-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem,4vw,3.5rem);
  display: grid;
  grid-template-columns: 58fr 42fr;
  gap: clamp(2.5rem,5vw,5rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 860px) { .hp-hero-inner { grid-template-columns: 1fr; } }

.hp-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
  margin: .6rem 0 1rem;
}
.hp-hero-sub {
  font-size: 1rem;
  color: rgba(255,255,255,.6);
  line-height: 1.75;
  max-width: 50ch;
}

/* TOC panel */
.hp-toc {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hp-toc-label {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: .8rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hp-toc-item {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .65rem .7rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background .15s ease;
}
.hp-toc-item:hover { background: rgba(255,255,255,.08); }
.hp-toc-num {
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  letter-spacing: .12em;
  color: rgba(255,255,255,.65);
  flex-shrink: 0;
  margin-top: .15rem;
}
.hp-toc-name {
  font-size: .82rem;
  font-weight: 500;
  color: rgba(255,255,255,.8);
  line-height: 1.3;
  margin-bottom: .15rem;
}
.hp-toc-meta {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  color: rgba(255,255,255,.35);
  letter-spacing: .04em;
}

/* ── FEATURED ARTICLE ── */
.hp-featured-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  background: var(--surface-gradient, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.2rem 2.4rem;
  box-shadow: var(--shadow-md);
  margin-top: 1.5rem;
  position: relative;
  overflow: hidden;
}
.hp-featured-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-strong, var(--primary)));
}
@media (max-width: 780px) {
  .hp-featured-card { grid-template-columns: 1fr; }
}
.hp-fa-meta {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1rem;
}
.hp-fa-series {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--faint);
}
.hp-fa-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 1rem;
}
.hp-fa-excerpt {
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.72;
  margin-bottom: 1.4rem;
}
.hp-fa-footer {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.hp-fa-detail {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .08em;
  color: var(--faint);
}

/* Right side of featured card */
.hp-fa-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.2rem;
}
.hp-fa-pull {
  background: var(--bg-deep);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.hp-fa-pull-label {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primary);
}
.hp-fa-pull-text {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--text);
  line-height: 1.6;
}

/* ── LOS SECTION ── */
.hp-los-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem,5vw,5rem);
  align-items: start;
}
@media (max-width: 860px) { .hp-los-grid { grid-template-columns: 1fr; } }

.hp-domains-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hp-domain-row {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: .6rem .9rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05);
  border-left: 3px solid var(--dd, rgba(255,255,255,.2));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: background .15s ease, transform .15s ease;
}
.hp-domain-row:hover { background: rgba(255,255,255,.1); transform: translateX(3px); }
.hp-dl {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--dd, rgba(255,255,255,.7));
  flex-shrink: 0;
  min-width: 16px;
  line-height: 1.3;
}
.hp-dn {
  font-size: .82rem;
  font-weight: 500;
  color: rgba(255,255,255,.75);
  line-height: 1.3;
}
.hp-dq {
  font-size: .72rem;
  color: rgba(255,255,255,.4);
  font-style: italic;
  margin-top: .1rem;
  line-height: 1.35;
}

/* ── BOOKS ── */
.hp-books-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-top: 2rem;
  align-items: start;
}
@media (max-width: 800px) { .hp-books-grid { grid-template-columns: 1fr; } }

.hp-book-lead {
  background: var(--surface-gradient, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.hp-book-lead::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--primary);
}
.hp-book-badge {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
}
.hp-book-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: .3rem;
}
.hp-book-sub {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--primary);
  margin-bottom: .5rem;
}
.hp-book-status {
  display: flex;
  gap: 1.2rem;
  margin-top: 1.2rem;
  padding: .9rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.hp-book-stat {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  color: var(--faint);
  letter-spacing: .04em;
}
.hp-book-stat span {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: var(--text);
  display: block;
  line-height: 1;
  margin-bottom: .2rem;
}

.hp-book-pipeline {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.hp-pipeline-label {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: -.4rem;
}
.hp-pipeline-series {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.3rem;
}
.hp-ps-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .9rem;
}
.hp-ps-name {
  font-family: 'Playfair Display', serif;
  font-size: .95rem;
  font-weight: 500;
  color: var(--text);
}
.hp-ps-track {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: .6rem;
}
.hp-ps-node {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  color: var(--faint);
  flex-shrink: 0;
  transition: background .15s ease;
}
.hp-ps-node.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--surface);
  font-weight: 600;
}
.hp-ps-line {
  flex: 1;
  height: 2px;
  background: var(--border);
}
.hp-ps-arc {
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  letter-spacing: .04em;
  color: var(--faint);
  line-height: 1.5;
}
.hp-pipeline-note {
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.3rem;
}

/* ── PUBLICATIONS ── */
.hp-pubs-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 820px) { .hp-pubs-grid { grid-template-columns: 1fr; } }

.hp-pubs-series {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hp-pub-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  text-decoration: none;
  color: inherit;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05);
  transition: background .15s ease;
}
.hp-pub-row:hover { background: rgba(255,255,255,.1); }
.hp-pub-id {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  text-align: center;
  justify-self: center;
}
.hp-pub-title {
  font-size: .88rem;
  font-weight: 500;
  color: rgba(255,255,255,.8);
  line-height: 1.25;
}
.hp-pub-meta {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  color: rgba(255,255,255,.35);
  letter-spacing: .04em;
  margin-top: .15rem;
}
.hp-pub-row .series-status {
  justify-self: center;
  text-align: center;
  white-space: nowrap;
}

/* ── PRACTICE SECTION ── */
.hp-practice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 2rem;
}
@media (max-width: 860px) { .hp-practice-grid { grid-template-columns: 1fr; } }

.hp-practice-card {
  background: var(--surface-gradient, var(--surface));
  padding: 2rem;
  transition: background .18s ease;
}
.hp-practice-card:hover { background: var(--card-hover-gradient, var(--surface-soft)); }

.hp-practice-cred { background: var(--bg-deep); }
.hp-practice-cred:hover { background: var(--bg-deep); }

.hp-pc-icon {
  font-size: 1.6rem;
  color: var(--primary);
  opacity: .6;
  margin-bottom: .6rem;
  line-height: 1;
}
.hp-pc-label {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .7rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.hp-practice-card h3 {
  font-size: 1.15rem;
  margin-bottom: .6rem;
}
.hp-practice-card p {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.7;
}


/* =========================================
   28. A1 INNER GOVERNANCE — BLUEPRINT VIEW
   ========================================= */

.los-a1-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 800px) { .los-a1-grid { grid-template-columns: 1fr; } }

.los-a1-purpose {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.75;
  font-style: italic;
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--primary);
  background: var(--primary-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 1.2rem;
}

.los-a1-question {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.4rem;
  position: relative;
  overflow: hidden;
}
.los-a1-question::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--primary);
}
.los-a1-q-label {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .5rem;
}
.los-a1-q-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
}

.los-a1-sig {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.los-a1-sig li {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.65;
  padding-left: 1rem;
  position: relative;
}
.los-a1-sig li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--primary);
}

.los-a1-protocols {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.los-a1-protocol {
  padding: .7rem .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background .15s ease;
}
.los-a1-protocol:hover { background: var(--surface-soft); }
.los-a1-proto-name {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--primary);
  margin-bottom: .25rem;
}
.los-a1-proto-desc {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.55;
}

/* Failure architecture 4-state */
.los-failure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.los-fstate {
  background: var(--surface);
  padding: 1rem 1.1rem;
  transition: background .15s ease;
}
.los-fstate:hover { background: var(--surface-soft); }

.los-fs-indicator {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--fs-color, var(--border));
  margin-bottom: .65rem;
}
.los-fs-state {
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fs-color, var(--faint));
  margin-bottom: .2rem;
}
.los-fs-name {
  font-family: 'Playfair Display', serif;
  font-size: .95rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: .3rem;
  line-height: 1.2;
}
.los-fs-desc {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.55;
}

.los-fstate[data-state="healthy"]  { --fs-color: #2E7D32; }
.los-fstate[data-state="underuse"] { --fs-color: #b87030; }
.los-fstate[data-state="overuse"]  { --fs-color: #E07522; }
.los-fstate[data-state="collapse"] { --fs-color: #C62828; }

/* Context readings */
.los-ctx-readings {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.los-ctx-reading {
  display: flex;
  gap: 1rem;
  padding: .55rem .8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  align-items: flex-start;
  transition: background .15s ease;
}
.los-ctx-reading:hover { background: var(--surface-soft); }
.los-cr-ctx {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .05em;
  color: var(--primary);
  flex-shrink: 0;
  min-width: 90px;
  padding-top: .1rem;
}
.los-cr-expr {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.5;
}


/* =========================================
   29. ARTICLE LAYOUT
   ========================================= */

.art-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
}

/* ── HEADER ── */
.art-breadcrumb {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .08em;
  color: var(--faint);
  margin-bottom: 1.8rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
}
.art-breadcrumb a { color: var(--faint); text-decoration: none; }
.art-breadcrumb a:hover { color: var(--primary); }
.art-breadcrumb span { opacity: .5; }

.art-meta-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.art-series-badge {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-soft);
  padding: .25rem .6rem;
  border-radius: 99px;
  border: 1px solid var(--border);
}
.art-reading-time {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .08em;
  color: var(--faint);
}

.art-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: .8rem;
}
.art-subtitle {
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.65;
  font-style: italic;
  margin-bottom: 1.2rem;
  max-width: 60ch;
}

.art-byline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.art-byline-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
}
/* ── AUDIO PLAYER ── */
.art-audio {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .9rem 1.2rem;
  margin: 0 0 2rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.art-audio-icon {
  color: var(--primary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.art-audio-label {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 1;
}
.art-audio-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.art-audio-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .38rem .75rem;
  border-radius: 999px;
  border: 1.5px solid var(--primary);
  background: transparent;
  color: var(--primary);
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.art-audio-btn:hover:not(:disabled) {
  background: var(--primary);
  color: #fff;
}
.art-audio-btn:disabled {
  opacity: .35;
  cursor: default;
}
.art-audio-stop {
  border-color: var(--border);
  color: var(--muted);
}
.art-audio-stop:hover:not(:disabled) {
  background: var(--muted);
  border-color: var(--muted);
  color: #fff;
}
.art-audio-speed {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  padding: .35rem .5rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.art-audio-status {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .08em;
  color: var(--faint);
  min-width: 4rem;
}

/* ── SHARE BAR ── */
.art-share {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 1.5rem 0;
  margin: 2rem 0 0;
  border-top: 1px solid var(--border);
}
.art-share-label {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}
.art-share-btns {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}
.art-share-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  letter-spacing: .05em;
  font-weight: 500;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .12s;
}
.art-share-btn:hover { transform: translateY(-1px); }
.art-share-linkedin {
  background: #0A66C2;
  color: #fff;
  border-color: #0A66C2;
}
.art-share-linkedin:hover {
  background: #004182;
  border-color: #004182;
  color: #fff;
}
.art-share-whatsapp {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
}
.art-share-whatsapp:hover {
  background: #128C7E;
  border-color: #128C7E;
  color: #fff;
}
.art-share-copy {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}
.art-share-copy:hover {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--primary);
}

/* ── AUTHOR ── */
.art-author {
  font-family: 'DM Mono', monospace;
  font-size: .7rem;
  letter-spacing: .06em;
  font-weight: 500;
  color: var(--text);
}
.art-date, .art-updated {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .06em;
  color: var(--faint);
}
.art-updated::before { content: '· Revised '; }

.art-genre-tags {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
}
.art-genre {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .08em;
  padding: .2rem .5rem;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--faint);
}

.art-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .8rem;
  margin-bottom: 2rem;
}
.art-tag {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .06em;
  color: var(--primary);
  text-decoration: none;
  padding: .2rem .5rem;
  border: 1px solid var(--border);
  border-radius: 99px;
  transition: background .15s ease, border-color .15s ease;
}
.art-tag:hover { background: var(--primary-soft); border-color: var(--primary); }

/* ── TL;DR ── */
.art-tldr {
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.2rem 1.5rem;
  margin-bottom: 2.5rem;
}
.art-tldr-label {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .5rem;
}
.art-tldr-text {
  font-size: .95rem;
  color: var(--text);
  line-height: 1.7;
  font-style: italic;
}

/* ── ARTICLE CONTENT + TOC LAYOUT ── */
/* Widen art-wrap only when sidebar is showing — reading text stays at 780px */
.art-wrap:has(.art-toc-sidebar:not([hidden])) {
  max-width: 1080px;
}
.art-wrap:has(.art-toc-sidebar:not([hidden])) .art-body {
  max-width: 780px;
}

.art-content-wrap {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 0 2.5rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .art-content-wrap { grid-template-columns: 1fr; }
  .art-toc-sidebar  { display: none; }
}

/* ── TOC SIDEBAR ── */
.art-toc-sidebar {
  position: sticky;
  top: 110px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  padding-bottom: 2rem;
}
.art-toc-label {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
.art-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.art-toc-item { margin: 0; }
.art-toc-h3   { padding-left: .85rem; }
.art-toc-link {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--muted);
  text-decoration: none;
  padding: .28rem .5rem .28rem .4rem;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: color .15s, border-color .15s, background .15s;
}
.art-toc-link:hover {
  color: var(--text);
  background: var(--primary-soft);
  border-left-color: var(--primary);
}
.art-toc-link.is-active {
  color: var(--text);
  border-left-color: var(--primary);
  font-weight: 600;
}

/* ── BODY TYPOGRAPHY ── */
.art-body {
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.82;
}
.art-body.font-sm { font-size: 0.9rem !important; }
.art-body.font-lg { font-size: 1.18rem !important; }
.art-body h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--text);
  margin-top: 2.8rem;
  margin-bottom: .8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border-soft);
}
.art-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text);
  margin-top: 2rem;
  margin-bottom: .5rem;
}
.art-body p { margin-bottom: 1.4rem; }
.art-body p:last-child { margin-bottom: 0; }
.art-body strong { color: var(--text); font-weight: 600; }
.art-body em { font-style: italic; }
.art-body a { color: var(--primary); border-bottom: 1px solid var(--primary-soft); text-decoration: none; }
.art-body a:hover { border-bottom-color: var(--primary); }
.art-body ul, .art-body ol { padding-left: 1.4rem; margin-bottom: 1.4rem; }
.art-body li { margin-bottom: .4rem; }
.art-body blockquote {
  border-left: 4px solid var(--primary);
  padding: 1.1rem 1.4rem;
  margin: 2rem 0;
  background: var(--primary-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  position: relative;
}
.art-body blockquote p {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.65;
  color: var(--text);
  font-style: italic;
  margin-bottom: 0;
}
.art-body blockquote p + p {
  margin-top: .6rem;
  font-size: .85rem;
  font-weight: 400;
  font-style: normal;
  color: var(--muted);
}
.art-body blockquote cite,
.art-body blockquote footer {
  display: block;
  margin-top: .6rem;
  font-size: .8rem;
  font-style: normal;
  font-weight: 500;
  color: var(--primary);
}
.art-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

/* Pull quote — use > .pull-class in markdown, or add class manually */
.art-body .pull-quote,
.art-pull {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 400;
  font-style: italic;
  color: var(--text);
  line-height: 1.4;
  border-left: 3px solid var(--primary);
  padding-left: 1.2rem;
  margin: 2rem 0;
}

/* Figure / image */
.art-figure {
  margin: 2.2rem 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
.art-figure img {
  width: 100%;
  height: auto;
  display: block;
}
.art-figcaption {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .06em;
  color: var(--faint);
  padding: .7rem 1rem;
  background: var(--bg-deep);
  line-height: 1.5;
}

/* ── ARTICLE SECTIONS ── */
.art-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.art-section-label {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .6rem;
}
.art-section-heading {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 1.4rem;
}

/* Questions to Ponder */
.art-question-list {
  list-style: none;
  counter-reset: q-counter;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.art-question {
  counter-increment: q-counter;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .9rem 1rem .9rem 3rem;
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.65;
  position: relative;
  transition: background .15s ease;
}
.art-question:hover { background: var(--surface-soft); }
.art-question::before {
  content: counter(q-counter);
  position: absolute;
  left: 1rem;
  top: .9rem;
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--primary);
  line-height: 1.65;
}

/* Stress Test */
.art-stress-intro {
  font-size: .9rem;
  color: var(--faint);
  font-style: italic;
  margin-bottom: 1.2rem;
}
.art-stress-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.art-stress-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow .15s ease;
}
.art-stress-item:hover { box-shadow: var(--shadow-sm); }
.art-stress-challenge {
  background: var(--bg-deep);
  padding: .8rem 1.2rem;
  font-family: 'Playfair Display', serif;
  font-size: .95rem;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.art-stress-challenge::before {
  content: '↯ ';
  color: var(--primary);
  font-family: 'DM Mono', monospace;
  font-size: .8rem;
}
.art-stress-response {
  padding: .9rem 1.2rem;
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.7;
}

/* Bibliography */
.art-bib-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  counter-reset: bib-counter;
}
.art-bib-item {
  counter-increment: bib-counter;
  padding: .7rem 1rem .7rem 2.8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative;
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.65;
}
.art-bib-item::before {
  content: counter(bib-counter);
  position: absolute;
  left: .9rem;
  top: .75rem;
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  color: var(--primary);
}
.art-bib-author { font-weight: 500; color: var(--text); }
.art-bib-year { color: var(--faint); margin: 0 .25rem; }
.art-bib-title { font-style: italic; }
.art-bib-url { color: var(--primary); text-decoration: none; margin-left: .4rem; font-size: .8rem; }
.art-bib-note { display: block; margin-top: .3rem; font-size: .82rem; color: var(--faint); font-style: italic; }

/* Cite this article */
.art-cite {
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  background: var(--bg-deep);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.art-cite-label {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: .4rem;
}
.art-cite-text {
  font-family: 'DM Mono', monospace;
  font-size: .72rem;
  letter-spacing: .02em;
  color: var(--muted);
  line-height: 1.65;
}

/* What's Next */
.art-next-card {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.3rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.art-next-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--primary);
}
.art-next-code {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary);
  flex-shrink: 0;
  min-width: 36px;
}
.art-next-body { flex: 1; }
.art-next-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: .3rem;
}
.art-next-desc {
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.6;
}

/* Series Navigator */
.art-series-nav {
  margin-top: 2.5rem;
  padding: 1.4rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.art-sn-label {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1rem;
}
.art-sn-track {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 1.2rem;
  overflow-x: auto;
  padding-bottom: .3rem;
}
.art-sn-node {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-deep);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  color: var(--faint);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.art-sn-node:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.art-sn-node.current { background: var(--primary); border-color: var(--primary); color: var(--surface); font-weight: 600; }
.art-sn-line { flex: 1; height: 2px; background: var(--border); min-width: 20px; }
.art-sn-arrows {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}
.art-sn-prev, .art-sn-next {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--primary);
  text-decoration: none;
  transition: color .15s ease;
}
.art-sn-prev:hover, .art-sn-next:hover { color: var(--primary-strong); }

/* Related Articles */
.art-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.25rem;
}
@media (max-width: 700px) {
  .art-related-grid { grid-template-columns: 1fr; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .art-related-grid { grid-template-columns: repeat(2, 1fr); }
}
.art-related-card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.art-related-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 12%, transparent);
  transform: translateY(-2px);
}
.art-related-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.art-related-code {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-soft);
  padding: .15rem .4rem;
  border-radius: var(--radius-sm);
  letter-spacing: .03em;
}
.art-related-nav-hint {
  font-family: 'DM Sans', sans-serif;
  font-size: .65rem;
  color: var(--muted);
  white-space: nowrap;
}
.art-related-title {
  font-family: 'DM Sans', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.art-related-excerpt {
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.5;
  flex: 1;
  margin: 0;
}
.art-related-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: auto;
  padding-top: .4rem;
  border-top: 1px solid var(--border);
}
.art-related-read {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  color: var(--faint);
}
.art-related-status {
  font-size: .6rem;
  font-weight: 600;
  padding: .15rem .4rem;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.art-related-status-live {
  color: var(--series-live-text, #166534);
  background: var(--series-live-bg, #dcfce7);
}
.art-related-status-draft {
  color: var(--muted);
  background: var(--border);
}

/* About Author */
.art-author-card {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
}
@media (max-width: 580px) { .art-author-card { flex-direction: column; } }
.art-author-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--border);
  background: var(--primary-soft);
}
.art-author-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-author-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  color: var(--primary);
}
.art-author-body { flex: 1; }
.art-author-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: .2rem;
}
.art-author-title {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .06em;
  color: var(--primary);
  margin-bottom: .6rem;
}
.art-author-bio {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: .8rem;
}
.art-author-links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.art-author-links a {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid var(--primary-soft);
  padding-bottom: 1px;
  transition: border-color .15s ease;
}
.art-author-links a:hover { border-bottom-color: var(--primary); }

/* AI Promise note — article author bio */
.art-ai-note {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--border);
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .03em;
  color: var(--faint);
  line-height: 1.6;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.art-ai-badge {
  padding: .18rem .6rem;
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: .6rem;
  letter-spacing: .1em;
  color: var(--primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.art-ai-note a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid var(--primary-soft);
  transition: border-color .15s;
  white-space: nowrap;
}
.art-ai-note a:hover { border-bottom-color: var(--primary); }

/* Font size controls */
.art-font-controls {
  display: flex;
  align-items: center;
  gap: .2rem;
  margin-left: auto;
}
.art-font-btn {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .15rem .4rem;
  cursor: pointer;
  line-height: 1.4;
  transition: color .15s, background .15s, border-color .15s;
}
.art-font-btn:hover:not(:disabled) { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.art-font-btn:disabled { opacity: .35; cursor: default; }

/* Reading percentage */
.art-read-pct {
  position: fixed;
  top: 6px;
  right: 10px;
  z-index: 201;
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  font-weight: 600;
  color: var(--primary);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.art-read-pct.visible { opacity: 1; }

/* Keyboard nav toast */
.reader-toast {
  position: fixed;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--text);
  color: var(--bg);
  font-family: 'DM Sans', sans-serif;
  font-size: .8rem;
  padding: .45rem 1rem;
  border-radius: 99px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  white-space: nowrap;
  z-index: 500;
}
.reader-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Back to top */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  left: 1.5rem;
  z-index: 90;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s, transform .2s, background .15s, color .15s;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 8%, transparent);
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Dark mode toggle */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--header-nav);
  cursor: pointer;
  padding: 0;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
.theme-toggle:hover { color: var(--primary); background: var(--primary-soft); }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
.theme-toggle.is-dark .icon-sun  { display: block; }
.theme-toggle.is-dark .icon-moon { display: none; }

/* Mark as read indicator */
.card.is-read { position: relative; }
.card.is-read::after {
  content: "✓ Read";
  position: absolute;
  top: .75rem;
  right: .75rem;
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-soft);
  padding: .15rem .4rem;
  border-radius: 99px;
  letter-spacing: .03em;
}

/* Print styles */
@media print {
  .header, .footer, .art-breadcrumb, .art-series-nav,
  .art-author-links, .art-tags { display: none; }
  .art-wrap { max-width: 100%; padding: 0; }
  .art-body { font-size: 11pt; color: #000; }
  .art-title { font-size: 22pt; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #666; }
}


/* =========================================
   30. MENTEES PAGE — INVITATION + CARD GRID
   ========================================= */

/* ── INVITATION SECTION ── */
.mnt-invite-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 860px) { .mnt-invite-grid { grid-template-columns: 1fr; } }

.mnt-invite-lead h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  margin-top: .6rem;
  line-height: 1.2;
}

.mnt-offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 560px) { .mnt-offer-grid { grid-template-columns: 1fr; } }

.mnt-offer-card {
  background: var(--surface-gradient, var(--surface));
  padding: 1.4rem 1.3rem;
  transition: background .18s ease;
}
.mnt-offer-card:hover { background: var(--card-hover-gradient, var(--surface-soft)); }

.mnt-offer-icon {
  font-size: 1.2rem;
  color: var(--primary);
  opacity: .6;
  margin-bottom: .5rem;
  line-height: 1;
}
.mnt-offer-title {
  font-family: 'Playfair Display', serif;
  font-size: .95rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: .5rem;
  line-height: 1.3;
}
.mnt-offer-desc {
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.7;
}

/* Capacity note */
.mnt-capacity-note {
  margin-top: 2rem;
  padding: 1.2rem 1.4rem;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.mnt-cap-label {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--primary);
  flex-shrink: 0;
}
.mnt-capacity-note p {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.65;
  flex: 1;
  min-width: 200px;
}
.mnt-capacity-note .card-link { flex-shrink: 0; margin-top: 0; }

/* ── CARD GRID (2-col) ── */
.mnt-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 780px) { .mnt-card-grid { grid-template-columns: 1fr; } }

.mnt-card {
  background: var(--surface-gradient, var(--surface));
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: background .18s ease;
}
.mnt-card:hover { background: var(--card-hover-gradient, var(--surface-soft)); }

.mnt-card-header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.mnt-card-meta { display: flex; flex-direction: column; gap: .2rem; }
.mnt-card-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
}
.mnt-card-role {
  font-size: .88rem;
  color: var(--muted);
  font-weight: 500;
}
.mnt-card-org {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .05em;
  color: var(--faint);
}

.mnt-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.mnt-card-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}
.mnt-card-section p {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.72;
  margin-top: .4rem;
}

.mnt-card-footer {
  padding-top: .8rem;
  border-top: 1px solid var(--border-soft);
}

/* Empty state */
.mnt-empty {
  padding: 3rem 2rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--faint);
  font-size: .9rem;
}


/* =========================================
   31. BOOKS PAGE
   ========================================= */

/* ── LEAD BOOK ── */
.bk-lead {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  margin-top: 2rem;
}
@media (max-width: 780px) { .bk-lead { grid-template-columns: 1fr; } }

/* Book cover */
.bk-lead-cover {
  position: sticky;
  top: calc(88px + 2rem);
}
.bk-cover-placeholder {
  width: 100%;
  aspect-ratio: 2 / 3;
  background: var(--ink-gradient, var(--text));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 1.6rem 1.4rem;
  position: relative;
  overflow: hidden;
}
.bk-cover-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 20% 30%,
    rgba(158,90,52,.35) 0%, transparent 70%);
}
.bk-cover-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
  position: relative;
  z-index: 1;
}
.bk-cover-sub {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-top: .4rem;
  position: relative;
  z-index: 1;
}

/* Lead book right */
.bk-status-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .9rem;
}
.bk-lead-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: .3rem;
}
.bk-lead-series {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1.2rem;
}
.bk-lead-desc {
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 60ch;
  margin-bottom: .8rem;
}

.bk-lead-tagline {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 1.4rem 0;
  padding: .9rem 1.2rem;
  background: var(--primary-soft);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--text);
}
.bk-tq-mark {
  font-size: 1.8rem;
  color: var(--primary);
  line-height: 1;
  flex-shrink: 0;
}

.bk-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 1.4rem 0;
}
@media (max-width: 560px) { .bk-meta-grid { grid-template-columns: 1fr 1fr; } }
.bk-meta-item {
  background: var(--surface);
  padding: .8rem 1rem;
}
.bk-meta-label {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: .25rem;
}
.bk-meta-val {
  font-size: .82rem;
  color: var(--text);
  font-weight: 500;
  line-height: 1.4;
}

.bk-progress-wrap { margin: 1.2rem 0 1.6rem; }

.bk-lead-actions {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
}

/* ── FOUR PARTS ── */
.bk-parts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 2rem;
}
@media (max-width: 900px) { .bk-parts-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .bk-parts-grid { grid-template-columns: 1fr; } }

.bk-part {
  background: var(--surface);
  padding: 1.4rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.bk-part-num {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--primary);
}
.bk-part-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
}
.bk-part-sub {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .05em;
  color: var(--faint);
  margin-bottom: .3rem;
}
.bk-part-desc {
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.65;
  flex: 1;
  margin-bottom: .6rem;
}

.bk-protected-phrase {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-top: 2rem;
  padding: 1rem 1.4rem;
  background: var(--bg-deep);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-style: italic;
  color: var(--muted);
}
.bk-pp-mark {
  font-size: 1.4rem;
  color: var(--primary);
  line-height: 1;
  flex-shrink: 0;
}

/* ── ECOSYSTEM ── */
.bk-eco-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 2rem;
}
@media (max-width: 860px) { .bk-eco-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .bk-eco-grid { grid-template-columns: 1fr; } }

.bk-eco-card {
  background: var(--surface-gradient, var(--surface));
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  transition: background .18s ease;
}
.bk-eco-card:hover { background: var(--card-hover-gradient, var(--surface-soft)); }
.bk-eco-primary {
  background: var(--primary-soft);
  position: relative;
  overflow: hidden;
}
.bk-eco-primary::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--primary);
}
.bk-eco-label {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
}
.bk-eco-name {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: .2rem;
}
.bk-eco-desc {
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.65;
  flex: 1;
}
.bk-eco-price {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  letter-spacing: .05em;
  color: var(--text);
  font-weight: 500;
  margin-top: .4rem;
}
.bk-eco-free {
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  letter-spacing: .05em;
  color: #15803d;
  font-weight: 500;
  margin-top: .4rem;
}

/* ── SERIES LAYOUT ── */
.bk-series-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}
@media (max-width: 860px) { .bk-series-layout { grid-template-columns: 1fr; } }

.bk-series-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.bk-series-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.4rem .6rem;
}
.bk-series-name {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
}
.bk-series-sub {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .06em;
  color: var(--faint);
  padding: 0 1.4rem 1rem;
  line-height: 1.5;
}

.bk-vol-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
}
.bk-vol {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem 1.4rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: background .15s ease;
}
.bk-vol:hover { background: var(--surface-soft); }
.bk-vol-active { background: var(--primary-soft); }
.bk-vol-active:hover { background: var(--primary-soft); }
.bk-vol-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--primary);
  flex-shrink: 0;
  min-width: 26px;
}
.bk-vol-title {
  font-size: .88rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.25;
}
.bk-vol-theme {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .04em;
  color: var(--faint);
  margin-top: .15rem;
}


/* =========================================
   32. HORIZON SERIES PAGE
   ========================================= */

/* ── HERO ── */
.hz-hero {
  background: var(--ink-gradient, var(--text));
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4.5rem);
  position: relative;
  overflow: hidden;
}
.hz-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 75% at 10% 50%,
    rgba(158,90,52,.2) 0%, transparent 65%);
  pointer-events: none;
}
.hz-hero-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem,4vw,3.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem,5vw,5rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 860px) { .hz-hero-inner { grid-template-columns: 1fr; } }

.hz-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
  margin: .6rem 0 1rem;
}
.hz-hero-sub {
  font-size: .98rem;
  color: rgba(255,255,255,.6);
  line-height: 1.75;
  max-width: 50ch;
  margin-bottom: 1.4rem;
}
.hz-hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
}
.hz-meta-item {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .08em;
  color: rgba(255,255,255,.45);
}
.hz-meta-sep {
  color: rgba(255,255,255,.2);
  font-size: .7rem;
}

/* Forces panel */
.hz-forces {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.hz-forces-label {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: .2rem;
}
.hz-force {
  background: rgba(255,255,255,.06);
  border-radius: var(--radius-sm);
  padding: .9rem 1rem;
}
.hz-force-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: .25rem;
}
.hz-force-desc {
  font-size: .82rem;
  color: rgba(255,255,255,.6);
  line-height: 1.55;
}
.hz-force-sep {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  color: rgba(255,255,255,.25);
  text-align: center;
  line-height: 1;
}
.hz-forces-conclusion {
  font-size: .8rem;
  color: rgba(255,255,255,.45);
  line-height: 1.65;
  font-style: italic;
  padding-top: .4rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ── THESIS BAND ── */
.hz-thesis-band {
  padding-top: clamp(2.5rem,5vw,4rem);
  padding-bottom: clamp(2.5rem,5vw,4rem);
}
.hz-thesis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem,5vw,5rem);
  align-items: center;
}
@media (max-width: 860px) { .hz-thesis-grid { grid-template-columns: 1fr; } }

.hz-thesis-right {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.hz-thesis-pair {
  background: rgba(255,255,255,.06);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
}
.hz-thesis-pair-exp {
  background: rgba(158,90,52,.18);
  border: 1px solid rgba(158,90,52,.3);
}
.hz-tp-label {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: .35rem;
}
.hz-tp-items {
  font-family: 'Playfair Display', serif;
  font-size: .95rem;
  font-weight: 500;
  color: rgba(255,255,255,.9);
  margin-bottom: .2rem;
}
.hz-tp-earns {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .05em;
  color: rgba(255,255,255,.45);
}
.hz-tp-crossing {
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--primary);
  padding: .3rem 0;
}

/* ── LADDER ── */
.hz-ladder {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.hz-rung {
  display: flex;
  flex-direction: column;
}
.hz-rung-zone {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .7rem 1.4rem;
  border-bottom: 1px solid var(--border);
}
.hz-rung-compression .hz-rung-zone {
  background: var(--bg-deep);
  color: var(--faint);
}
.hz-rung-expansion .hz-rung-zone {
  background: var(--primary-soft);
  color: var(--primary);
}

.hz-rung-steps {
  display: grid;
  gap: 1px;
  background: var(--border);
}
.hz-rung-compression .hz-rung-steps { grid-template-columns: 1fr 1fr; }
.hz-rung-expansion .hz-rung-steps { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .hz-rung-compression .hz-rung-steps,
  .hz-rung-expansion .hz-rung-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .hz-rung-compression .hz-rung-steps,
  .hz-rung-expansion .hz-rung-steps { grid-template-columns: 1fr; }
}

.hz-step {
  background: var(--surface);
  padding: 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  transition: background .15s ease;
}
.hz-step:hover { background: var(--surface-soft); }
.hz-rung-expansion .hz-step { background: color-mix(in srgb, var(--primary-soft) 30%, var(--surface)); }
.hz-rung-expansion .hz-step:hover { background: var(--primary-soft); }

.hz-step-num {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .14em;
  color: var(--primary);
}
.hz-step-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
}
.hz-step-earns {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .05em;
  color: var(--faint);
  font-style: italic;
  margin-bottom: .3rem;
}
.hz-step-desc {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.65;
  flex: 1;
}

.hz-crossing-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .6rem 1.4rem;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.hz-crossing-line {
  flex: 1;
  height: 1px;
  background: var(--primary);
  opacity: .4;
}
.hz-crossing-label {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--primary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── EPISODES ── */
.hz-episodes {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2rem;
}

.hz-episode {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow .18s ease;
}
.hz-episode:hover { box-shadow: var(--shadow-sm); }

.hz-ep-live {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.hz-ep-reserve {
  opacity: .65;
  border-style: dashed;
}

/* Next-up episode: border and left panel trend toward primary */
.hz-ep-next {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
}
.hz-ep-next .hz-ep-left {
  background: color-mix(in srgb, var(--primary) 22%, var(--bg-deep));
  border-right-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}
.hz-ep-next .hz-ep-num {
  color: var(--primary-strong);
}

/* In-progress episodes: episode number steps back to muted */
.hz-ep-working .hz-ep-num {
  color: var(--muted);
  font-size: 1.2rem;
}

/* Far-out episode: whole row fades, left panel recedes, number faint */
.hz-ep-distant {
  opacity: .72;
}
.hz-ep-distant .hz-ep-left {
  background: color-mix(in srgb, var(--bg) 65%, var(--bg-deep));
}
.hz-ep-distant .hz-ep-num {
  color: var(--faint);
  font-size: 1.1rem;
}

/* ── FRONTIER series additions ── */

/* Arc role tag beneath each episode description */
.fr-ep-arc-tag {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: .4rem;
}
.fr-ep-arc-tag-heart {
  color: var(--primary);
  font-weight: 500;
}

/* Part 3 — heart of the series: restore opacity, accent left border */
.fr-ep-heart {
  opacity: 1 !important;
  border-left: 3px solid var(--primary);
}
.fr-ep-heart .hz-ep-left {
  background: color-mix(in srgb, var(--primary-soft) 60%, var(--bg));
}
.fr-ep-heart .hz-ep-num {
  color: var(--primary);
  font-size: 1.4rem;
}

/* Forces panel: muted variant for the "Not:" counter-question */
.hz-force-name-alt {
  color: rgba(255,255,255,.45);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,.2);
}

/* ── COMPASS series additions ── */

/* Vocabulary grid — 2-col on wide, 1-col on mobile */
.cp-vocab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: 1.8rem;
}
@media (max-width: 640px) { .cp-vocab-grid { grid-template-columns: 1fr; } }

.cp-vocab-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.3rem;
}
.cp-vocab-term {
  font-family: 'DM Mono', monospace;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .45rem;
}
.cp-vocab-def {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.65;
}

/* Episode list — 2-col grid */
.cp-episodes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}
@media (max-width: 780px) { .cp-episodes { grid-template-columns: 1fr; } }

.cp-ep {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  opacity: .82;
  position: relative;
}
.cp-ep-flagship {
  opacity: 1;
  border-color: var(--primary);
  border-left-width: 3px;
}

.cp-ep-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .2rem;
}
.cp-ep-num {
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--primary);
  background: var(--primary-soft);
  padding: .15rem .45rem;
  border-radius: 4px;
  flex-shrink: 0;
}
.cp-ep-theme {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--faint);
  flex: 1;
}
.cp-ep-title {
  font-family: 'Playfair Display', serif;
  font-size: .98rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.25;
}
.cp-ep p.cp-ep-thesis {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.cp-ep-takeaway {
  font-size: .75rem;
  color: var(--faint);
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: .5rem;
  margin-top: .2rem;
  line-height: 1.5;
}
.cp-ep-flagship-tag {
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 500;
  margin-top: .2rem;
}

.hz-ep-left {
  flex-shrink: 0;
  width: 90px;
  background: var(--bg-deep);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem .6rem;
}
.hz-ep-live .hz-ep-left {
  background: var(--primary);
  border-right-color: var(--primary);
}
.hz-ep-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--primary);
  line-height: 1;
}
.hz-ep-live .hz-ep-num { color: #fff; }

.hz-ep-status-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
}
.hz-ep-date {
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  letter-spacing: .06em;
  color: var(--faint);
  text-align: center;
}
.hz-ep-live .hz-ep-date { color: rgba(255,255,255,.6); }

.hz-ep-body {
  flex: 1;
  padding: 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.hz-ep-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
}
.hz-ep-question {
  font-size: .78rem;
  color: var(--faint);
  font-style: italic;
  margin-bottom: .2rem;
}
.hz-ep-desc {
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.65;
  flex: 1;
}
.hz-ep-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: .6rem 0 .5rem;
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .06em;
  color: var(--muted);
}
.hz-ep-meta-strip span + span::before {
  content: " · ";
  opacity: .5;
}
.hz-ep-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .4rem;
}

.hz-ep-right {
  flex-shrink: 0;
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: .5rem;
  min-width: 120px;
}
.hz-ep-pub {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .06em;
  color: var(--faint);
  text-align: right;
}

@media (max-width: 680px) {
  .hz-episode { flex-direction: column; }
  .hz-ep-left { width: 100%; flex-direction: row; justify-content: flex-start; border-right: none; border-bottom: 1px solid var(--border); padding: .7rem 1rem; }
  .hz-ep-right { flex-direction: row; align-items: center; border-top: 1px solid var(--border); padding: .8rem 1rem; }
}

/* ── AUDIENCE ── */
.hz-audience-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2.5rem,5vw,5rem);
  align-items: start;
}
@media (max-width: 860px) { .hz-audience-grid { grid-template-columns: 1fr; } }

.hz-audience-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hz-aud-item {
  background: rgba(255,255,255,.06);
  border-radius: var(--radius-sm);
  padding: .9rem 1.1rem;
  transition: background .15s ease;
}
.hz-aud-item:hover { background: rgba(255,255,255,.1); }
.hz-aud-role {
  font-family: 'Playfair Display', serif;
  font-size: .95rem;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  margin-bottom: .25rem;
}
.hz-aud-desc {
  font-size: .82rem;
  color: rgba(255,255,255,.5);
  line-height: 1.6;
}

/* ── FOLLOW + AUTHOR ── */
.hz-follow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem,4vw,4rem);
  align-items: start;
}
@media (max-width: 780px) { .hz-follow-grid { grid-template-columns: 1fr; } }

.hz-author-strip {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
}
.hz-author-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--border);
  background: var(--primary-soft);
}
.hz-author-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hz-author-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--primary);
}
.hz-author-name {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: .15rem;
}
.hz-author-title {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .07em;
  color: var(--primary);
  margin-bottom: .5rem;
}


/* =========================================
   33. ARTICLE CONTEXT NAV — PROMINENT LINKS
   ========================================= */

.art-context-nav {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1.3fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 1.6rem 0 2.4rem;
}
@media (max-width: 780px) {
  .art-context-nav { grid-template-columns: 1fr; }
}

.art-ctx-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.1rem 1.3rem;
  background: var(--surface-gradient, var(--surface));
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}
.art-ctx-card:hover {
  background: var(--card-hover-gradient, var(--primary-soft));
  transform: translateY(-1px);
}

.art-ctx-card-center {
  background: var(--primary-soft);
  justify-content: space-between;
  flex-direction: row-reverse;
}
.art-ctx-card-center:hover { background: var(--primary-soft); filter: brightness(0.97); }
.art-ctx-card-center .art-ctx-icon { color: var(--primary); }

.art-ctx-card-next {
  justify-content: space-between;
}
.art-ctx-disabled {
  cursor: default;
}
.art-ctx-disabled:hover {
  background: var(--surface-gradient, var(--surface));
  transform: none;
}

.art-ctx-icon {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  color: var(--primary);
  flex-shrink: 0;
  line-height: 1;
  transition: transform .18s ease;
}
.art-ctx-card:hover .art-ctx-icon { transform: translateX(2px); }
.art-ctx-card-center:hover .art-ctx-icon,
.art-ctx-card:first-child:hover .art-ctx-icon { transform: translateX(-2px); }
.art-ctx-icon-muted {
  color: var(--faint);
}

.art-ctx-text {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.art-ctx-label-small {
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--primary);
}
.art-ctx-label {
  font-family: 'Playfair Display', serif;
  font-size: .92rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}
.art-ctx-sub {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
  letter-spacing: .04em;
  color: var(--faint);
  line-height: 1.4;
}


/* =========================================
   34. SERIES STATUS — IDEATION
   ========================================= */

.series-status.ideation {
  background: var(--bg-deep);
  color: var(--muted);
  border: 1px solid var(--border);
}
.series-status.ideation .series-dot {
  background: var(--muted);
  opacity: .6;
}


/* =========================================
   35. CONTACT FAB — fixed, all pages
   ========================================= */

.contact-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 1.6rem);
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .6rem;
}

/* Pills — hidden by default */
.contact-fab-pills {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
  pointer-events: none;
}

.contact-pill {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: 'DM Mono', monospace;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  background: var(--surface-gradient, var(--surface));
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: .55rem .9rem .55rem .6rem;
  box-shadow: var(--shadow-md);
  white-space: nowrap;

  opacity: 0;
  transform: translateY(8px) scale(.96);
  transition: opacity .18s ease, transform .18s ease, background .15s ease, border-color .15s ease;
}
.contact-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--card-hover-gradient, var(--primary-soft));
}

.contact-pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: .8rem;
  line-height: 1;
  flex-shrink: 0;
}
.contact-pill-icon-li {
  font-family: 'DM Mono', monospace;
  font-weight: 700;
  font-size: .62rem;
  letter-spacing: 0;
  text-transform: none;
}

/* Main toggle button */
.contact-fab-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--btn-gradient, var(--primary));
  color: var(--surface);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  transition: transform .2s ease, box-shadow .2s ease;
}
.contact-fab-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.22);
}
.contact-fab-btn:active { transform: translateY(0) scale(.96); }

.contact-fab-icon {
  position: absolute;
  font-size: 1.25rem;
  line-height: 1;
  transition: opacity .15s ease, transform .2s ease;
}
.contact-fab-icon-open  { opacity: 1; transform: rotate(0deg) scale(1); }
.contact-fab-icon-close { opacity: 0; transform: rotate(-45deg) scale(.7); font-weight: 300; }

/* ── OPEN STATE ── */
.contact-fab.open .contact-fab-pills {
  pointer-events: auto;
}
.contact-fab.open .contact-pill {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* stagger */
.contact-fab.open .contact-pill:nth-child(1) { transition-delay: .04s; }
.contact-fab.open .contact-pill:nth-child(2) { transition-delay: .09s; }

.contact-fab.open .contact-fab-btn {
  background: var(--ink-gradient, var(--text));
}
.contact-fab.open .contact-fab-icon-open  { opacity: 0; transform: rotate(45deg) scale(.7); }
.contact-fab.open .contact-fab-icon-close { opacity: 1; transform: rotate(0deg) scale(1); color: #fff; }

/* ── DESKTOP HOVER ENHANCEMENT ── */
@media (hover: hover) and (pointer: fine) {
  .contact-fab:hover .contact-fab-pills,
  .contact-fab:focus-within .contact-fab-pills {
    pointer-events: auto;
  }
  .contact-fab:hover .contact-pill,
  .contact-fab:focus-within .contact-pill {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .contact-fab:hover .contact-fab-icon-open,
  .contact-fab:focus-within .contact-fab-icon-open {
    opacity: 0;
    transform: rotate(45deg) scale(.7);
  }
  .contact-fab:hover .contact-fab-icon-close,
  .contact-fab:focus-within .contact-fab-icon-close {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    color: #fff;
  }
  .contact-fab:hover .contact-fab-btn,
  .contact-fab:focus-within .contact-fab-btn {
    background: var(--ink-gradient, var(--text));
  }
}

/* Mobile sizing */
@media (max-width: 480px) {
  .contact-fab-btn { width: 48px; height: 48px; }
  .contact-pill { font-size: .65rem; padding: .5rem .8rem .5rem .55rem; }
  .contact-pill-icon { width: 22px; height: 22px; font-size: .75rem; }
}

/* =========================================
   UTILITY CLASSES
   ========================================= */

.font-serif { font-family: 'Playfair Display', serif; }
.font-mono  { font-family: 'DM Mono', monospace; }
.font-sans  { font-family: 'DM Sans', sans-serif; }

/* Eyebrow / label pattern used on ink sections */
.ink-label {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .4rem;
}

/* Stat variants for dark/ink backgrounds */
.stat-num-ink   { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 600; color: #fff; line-height: 1; }
.stat-label-ink { font-family: 'DM Mono', monospace; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-top: .3rem; }

/* =========================================
   PAGE TRANSITIONS
   ========================================= */

@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes page-out {
  to { opacity: 0; transform: translateY(-6px); }
}

body {
  animation: page-in 0.28s ease;
}
body.page-exit {
  animation: page-out 0.22s ease forwards;
  pointer-events: none;
}

/* =========================================
   IMAGE LIGHTBOX
   ========================================= */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
  cursor: zoom-out;
}
.lightbox.open {
  opacity: 1;
  visibility: visible;
}
.lightbox-img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius, 6px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  cursor: default;
}
.lightbox-caption {
  margin-top: .85rem;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'DM Mono', monospace;
  font-size: .78rem;
  text-align: center;
  max-width: 600px;
  line-height: 1.5;
}
.lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: .25rem .5rem;
  transition: color .15s;
}
.lightbox-close:hover { color: #fff; }

/* =========================================
   404 PAGE
   ========================================= */

.not-found-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
.not-found-card {
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  padding: 1.25rem 1.4rem;
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
  display: block;
}
.not-found-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 12%, transparent);
  text-decoration: none;
  color: var(--text);
}
.not-found-card-label {
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .35rem;
}
.not-found-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 .3rem;
}
.not-found-card-desc {
  font-size: .82rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}
@media (max-width: 640px) {
  .not-found-grid { grid-template-columns: 1fr; }
}


/* =========================================
   CUSTOM SCROLLBAR
   ========================================= */

html {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: var(--muted); }


/* =========================================
   SCROLL-REVEAL
   ========================================= */

@media (prefers-reduced-motion: no-preference) {
  .js-sr .sr {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }
  .js-sr .sr.sr-visible {
    opacity: 1;
    transform: none;
  }
  .js-sr .sr.sr-d1 { transition-delay: 0.08s; }
  .js-sr .sr.sr-d2 { transition-delay: 0.16s; }
  .js-sr .sr.sr-d3 { transition-delay: 0.24s; }
  .js-sr .sr.sr-d4 { transition-delay: 0.32s; }
}