/* ============================================================
   Ben Mukoma — Home v2
   Personal/literary counterpart to the Kenyan Grafik studio system.
   Warm paper + Libre Baskerville voice, Inter for structure.
   ============================================================ */

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

:root {
  --stone: #e1dfdd;
  --near-black: #010101;
  --ink: #1a1a1a;
  --slate: #6b6b6b;
  --ash: #b0aeac;
  --chalk: #f0efed;
  --smoke: #d0cecc;
  --white: #ffffff;
  --graphite: #3d4f5c;

  /* tweakable accent — oxblood */
  --accent: #6e3b3b;

  --tag-brand-bg: #dde3e8; --tag-brand-text: #2a3d4a; --tag-brand-line: #2a3d4a;
  --tag-value-bg: #e5e0d8; --tag-value-text: #3d3328; --tag-value-line: #6a5638;
  --tag-systems-bg: #dfe3dd; --tag-systems-text: #2d3d2a; --tag-systems-line: #3a5236;
  --tag-growth-bg: #e8e0d5; --tag-growth-text: #4a3820; --tag-growth-line: #7a5320;
  --tag-faith-bg: #e3e0e8; --tag-faith-text: #3a2d4a; --tag-faith-line: #4a3a66;

  --space-xs: 8px;  --space-sm: 16px; --space-md: 24px;
  --space-lg: 48px; --space-xl: 80px; --space-2xl: 120px;

  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --maxw: 1200px;
}

html { scroll-behavior: smooth; }

body {
  background: transparent;
  color: var(--ink);
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 18px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ---------- PAGE TEXTURE (fixed, behind everything) ---------- */
.page-texture { position: fixed; inset: 0; z-index: -1; background-color: var(--stone); pointer-events: none; }
body[data-texture="grid"] .page-texture {
  background-image:
    linear-gradient(rgba(0,0,0,0.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.030) 1px, transparent 1px);
  background-size: 64px 64px;
}
body[data-texture="dots"] .page-texture {
  background-image: radial-gradient(rgba(0,0,0,0.06) 1.1px, transparent 1.6px);
  background-size: 26px 26px;
}
body[data-texture="hatch"] .page-texture {
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.028) 0 1px, transparent 1px 11px);
}
body[data-texture="grain"] .page-texture {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}
body[data-texture="none"] .page-texture { background-image: none; }

::selection { background: color-mix(in oklab, var(--accent) 22%, transparent); }

.sans { font-family: 'Inter', system-ui, sans-serif; }

/* ---------- READING PROGRESS HAIRLINE ---------- */
.read-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--accent);
  z-index: 300; transition: width 80ms linear;
  pointer-events: none;
}

/* ---------- NAV ---------- */
nav#main-nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in oklab, var(--stone) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, padding 200ms ease;
  padding: 0 var(--space-lg);
}
nav#main-nav.scrolled { border-bottom-color: var(--smoke); }
.nav-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; height: 64px;
}
.nav-logo {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px; font-weight: 600; color: var(--near-black);
  text-decoration: none; letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 9px;
}
.nav-logo .mark {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--near-black); color: var(--stone);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: 0;
}
.nav-links { display: flex; align-items: center; gap: var(--space-lg); list-style: none; }
.nav-links a {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; font-weight: 500; color: var(--slate);
  text-decoration: none; transition: color 200ms ease; letter-spacing: 0.01em;
  position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 240ms var(--ease-out);
}
.nav-links a:hover, .nav-links a.active { color: var(--near-black); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links .external { display: inline-flex; align-items: center; gap: 4px; }
.nav-links .external::after { display: none; }
.nav-links .external svg { width: 12px; height: 12px; stroke: currentColor; transition: transform 220ms var(--ease-out); }
.nav-links .external:hover svg { transform: translate(2px, -2px); }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 4px; color: var(--near-black); }
.nav-toggle svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }

.mobile-nav {
  display: none; position: fixed; inset: 0; background: var(--stone); z-index: 200;
  flex-direction: column; align-items: center; justify-content: center; gap: var(--space-lg);
}
.mobile-nav.open { display: flex; }
.mobile-nav a { font-family: 'Inter', system-ui, sans-serif; font-size: 28px; font-weight: 600; color: var(--near-black); text-decoration: none; }
.mobile-nav-close { position: absolute; top: 20px; right: 24px; background: none; border: none; cursor: pointer; color: var(--near-black); }
.mobile-nav-close svg { width: 24px; height: 24px; stroke: currentColor; fill: none; }

/* ---------- SECTION BASE ---------- */
section { padding: var(--space-xl) var(--space-lg); }
.container { max-width: var(--maxw); margin: 0 auto; }
.reading-col { max-width: 680px; }
.section-rule { border: none; border-top: 1px solid var(--smoke); max-width: var(--maxw); margin: 0 auto; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--near-black); color: var(--stone);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; font-weight: 600; letter-spacing: 0.06em;
  text-decoration: none; padding: 14px 26px; border-radius: 2px; border: none; cursor: pointer;
  transition: background 220ms ease, transform 220ms var(--ease-out);
}
.btn-primary:hover { background: var(--graphite); transform: translateY(-1px); }
.btn-primary .arr { display: inline-block; transition: transform 200ms var(--ease-out); }
.btn-primary:hover .arr { transform: translateX(4px); }

.text-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; font-weight: 500; color: var(--near-black);
  text-decoration: none; transition: color 200ms ease;
}
.text-cta .arrow { display: inline-block; transition: transform 200ms var(--ease-out); }
.text-cta:hover { color: var(--accent); }
.text-cta:hover .arrow { transform: translateX(4px); }

/* ============================================================
   HERO  (3 variants, switched via body[data-hero])
   ============================================================ */
#hook {
  min-height: calc(100vh - 64px - var(--band-actual, 18vw));
  display: flex; align-items: center;
  padding: var(--space-xl) var(--space-lg);
  position: relative; overflow: hidden;
}
.hv { display: none; max-width: var(--maxw); margin: 0 auto; width: 100%; position: relative; z-index: 2; }
body[data-hero="a"] .hv-a,
body[data-hero="b"] .hv-b,
body[data-hero="c"] .hv-c { display: block; }

/* faint paper grid texture sitting behind the hero */
/* hero focal grid is now provided by the global .page-texture */
.hero-texture { display: none; }

.hook-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; font-weight: 500; color: var(--slate);
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--space-md);
  display: inline-flex; align-items: center; gap: 8px;
}
.hook-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); display: inline-block; }

.hook-headline {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700; color: var(--near-black);
  line-height: 1.06; letter-spacing: -0.03em;
}
.hook-headline .ln { display: block; overflow: hidden; }
.hook-headline .ln > span { display: block; }

/* the emphasized word + drawn underline */
.brandword { position: relative; display: inline-block; font-style: italic; font-family: 'Libre Baskerville', Georgia, serif; color: var(--accent); padding: 0 0.04em; }
.brandword svg { position: absolute; left: -2%; bottom: -0.14em; width: 104%; height: 0.34em; overflow: visible; }
.brandword svg path {
  fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 420; stroke-dashoffset: 420;
}
#hook.lit .brandword svg path { animation: drawLine 760ms var(--ease-out) 760ms forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

.hook-sub {
  font-size: 19px; color: var(--ink); line-height: 1.7; max-width: 460px;
}
.hook-sub strong { font-style: italic; font-weight: 400; color: var(--accent); }

/* line-reveal helper for hero */
.reveal-line > span { display: block; transform: translateY(112%); opacity: 0; }
#hook.lit .reveal-line.go > span { animation: lineUp 760ms var(--ease-out) forwards; }
@keyframes lineUp { to { transform: translateY(0); opacity: 1; } }
.reveal-soft { opacity: 0; transform: translateY(16px); }
#hook.lit .reveal-soft.go { animation: fadeUp 640ms var(--ease-out) forwards; }

/* portrait placeholder */
.portrait {
  width: 100%; max-width: 420px; aspect-ratio: 3/4;
  background: var(--chalk); border: 1px solid var(--smoke); border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-sm); color: var(--ash); position: relative; overflow: hidden;
}
.portrait::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.025) 1px, transparent 1px);
  background-size: 32px 32px; pointer-events: none;
}
.portrait svg.ic { width: 40px; height: 40px; stroke: var(--ash); fill: none; position: relative; }
.portrait span { font-family: 'Inter', system-ui, sans-serif; font-size: 11px; color: var(--ash); letter-spacing: 0.1em; text-transform: uppercase; position: relative; }

/* --- Variant A: split --- */
.hv-a .grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-xl); align-items: center; }
.hv-a .hook-headline { font-size: clamp(42px, 5vw, 72px); margin-bottom: var(--space-md); }
.hv-a .hook-sub { margin-bottom: var(--space-lg); }
.hv-a .col-visual { display: flex; justify-content: flex-end; }

/* --- Variant B: centered typographic --- */
.hv-b { text-align: center; position: relative; }
.hv-b .hook-eyebrow { justify-content: center; }
.hv-b .ghost {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%);
  font-family: 'Libre Baskerville', Georgia, serif; font-style: italic;
  font-size: clamp(180px, 30vw, 460px); line-height: 1; color: rgba(1,1,1,0.035);
  white-space: nowrap; z-index: 0; pointer-events: none; user-select: none;
}
.hv-b .inner { position: relative; z-index: 2; max-width: 940px; margin: 0 auto; }
.hv-b .hook-headline { font-size: clamp(46px, 7vw, 104px); margin: 0 auto var(--space-md); }
.hv-b .hook-sub { margin: 0 auto var(--space-lg); font-size: 20px; max-width: 560px; }
.hv-b .cta-row { display: flex; justify-content: center; }

/* hero portrait — present, not the focus; placement set via body[data-portrait] */
.hero-portrait { display: flex; flex-direction: column; gap: 12px; }
.hp-photo {
  position: relative; border-radius: 6px; overflow: hidden;
  background: var(--chalk); border: 1px solid var(--smoke);
  box-shadow: 0 20px 50px rgba(1,1,1,0.12);
  display: flex; align-items: center; justify-content: center;
}
.hp-photo::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,0,0,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.028) 1px, transparent 1px);
  background-size: 26px 26px;
}
.hp-photo svg { width: 42px; height: 42px; stroke: var(--ash); fill: none; position: relative; }
.hp-cap { font-family: 'Inter', system-ui, sans-serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }

/* corner (default) — anchored lower-right, asymmetric against the centered type */
body[data-portrait="corner"] .hv-b .hero-portrait { position: absolute; right: 0; bottom: 2%; z-index: 1; align-items: flex-end; text-align: right; }
body[data-portrait="corner"] .hv-b .hp-photo { width: 236px; aspect-ratio: 4/5; }
/* below — centered figure beneath the CTA */
body[data-portrait="below"] .hv-b .hero-portrait { align-items: center; margin: var(--space-xl) auto 0; }
body[data-portrait="below"] .hv-b .hp-photo { width: 216px; aspect-ratio: 4/5; }
/* hidden */
body[data-portrait="hidden"] .hero-portrait { display: none; }

/* --- Variant C: asymmetric overlap --- */
.hv-c .grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 0; align-items: center; }
.hv-c .col-text { position: relative; z-index: 3; }
.hv-c .hook-headline { font-size: clamp(44px, 5.6vw, 84px); margin-bottom: var(--space-md); }
.hv-c .col-text .panel {
  background: color-mix(in oklab, var(--stone) 80%, transparent);
  backdrop-filter: blur(2px); padding: 0; max-width: 600px;
}
.hv-c .hook-sub { margin-bottom: var(--space-lg); }
.hv-c .col-visual { position: relative; margin-left: -12%; }
.hv-c .portrait { max-width: 460px; aspect-ratio: 4/5; margin-left: auto; box-shadow: -24px 24px 60px rgba(1,1,1,0.10); }
.hv-c .stamp {
  position: absolute; top: -26px; right: 8%;
  font-family: 'Inter', system-ui, sans-serif; font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--slate);
  border: 1px solid var(--smoke); border-radius: 100px; padding: 7px 14px; background: var(--stone);
}

/* ============================================================
   HERO PHOTO SCENE — image scaled to the VIEW WIDTH (fixed); a
   centered crop window you drag side-to-side to reveal the rest.
   Leaves padding on the left & right of the page.
   ============================================================ */
:root { --crop-w: clamp(300px, 52vw, 1040px); }
body[data-band="narrow"] { --crop-w: clamp(260px, 40vw, 820px); }   /* more padding · more drag */
body[data-band="wide"]   { --crop-w: clamp(360px, 66vw, 1280px); }  /* less padding · less drag */

.hero-band {
  width: 100%;
  padding: 0 var(--space-lg);
  display: flex; justify-content: center;
  user-select: none; -webkit-user-select: none;
}
.band-crop {
  position: relative;
  width: var(--crop-w); max-width: 100%;
  height: clamp(150px, 17.5vw, 360px);     /* fallback — JS refines to view-width ÷ aspect */
  overflow: hidden;
  background: var(--near-black);
  border: 1px solid var(--smoke);
  border-radius: 3px;
  box-shadow: 0 26px 60px rgba(1,1,1,0.16);
  touch-action: pan-y;                      /* page still scrolls vertically */
}
/* the custom circle replaces the pointer over the crop */
.band-crop, .band-crop * { cursor: none; }

.band-track {
  position: absolute; top: 0; left: 0; height: 100%;
  width: 100vw;                             /* JS sets this to the exact view width */
  will-change: transform;
}
.band-slot { display: block; width: 100%; height: 100%; }

/* "Drag me" cursor — follows the pointer, hidden until it enters the crop */
.band-cursor {
  position: fixed; top: 0; left: 0; z-index: 500;
  pointer-events: none; will-change: transform;
}
.band-cursor .bc-inner {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 104px; height: 104px; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.45);
  background: var(--stone); color: var(--accent);
  font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 600;
  line-height: 1.18; letter-spacing: 0.14em; text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(1,1,1,0.28);
  opacity: 0; transition: opacity 240ms var(--ease-out), transform 320ms var(--ease-out);
}
.band-cursor.show .bc-inner { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.band-cursor.grab .bc-inner { transform: translate(-50%, -50%) scale(0.86); }

/* the photo now lives in the band — retire the in-hero portrait placeholders */
.hero-portrait { display: none !important; }
.hv-a .col-visual, .hv-c .col-visual { display: none !important; }
.hv-a .grid, .hv-c .grid { grid-template-columns: 1fr; }

/* ============================================================
   THE IDEA — offset editorial layout (adapted from Richard Ekwonye)
   ============================================================ */
#idea { padding: var(--space-2xl) var(--space-lg); }
.idea-wrap { max-width: var(--maxw); margin: 0 auto; }
.idea-top { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-lg) var(--space-xl); align-items: start; }
.idea-index { grid-column: 1 / 4; font-family: 'Inter', system-ui, sans-serif; padding-top: 8px; }
.idea-index .num { font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: 0.04em; }
.idea-index .lbl { display: block; margin-top: 8px; font-size: 11px; font-weight: 500; color: var(--slate); letter-spacing: 0.14em; text-transform: uppercase; }
.idea-statement { grid-column: 4 / 13; font-size: clamp(28px, 3.4vw, 48px); font-weight: 400; line-height: 1.26; color: var(--near-black); letter-spacing: -0.015em; max-width: 17em; }
.idea-statement em { font-style: italic; color: var(--accent); }
.idea-lower { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-lg) var(--space-xl); margin-top: var(--space-2xl); }
.idea-lead { grid-column: 4 / 7; font-size: clamp(22px, 1.8vw, 27px); font-weight: 700; line-height: 1.35; color: var(--near-black); }
.idea-lead em { font-style: italic; font-weight: 400; color: var(--accent); }
.idea-prose { grid-column: 7 / 13; max-width: 620px; }
.idea-prose p { font-size: 19px; color: var(--ink); line-height: 1.8; margin-bottom: 1.4em; }
.idea-link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-md); padding-bottom: 14px; border-bottom: 1px solid var(--smoke); font-family: 'Inter', system-ui, sans-serif; font-size: 15px; font-weight: 500; color: var(--near-black); text-decoration: none; transition: color 220ms ease, border-color 220ms ease; }
.idea-link .arrow { display: inline-block; transition: transform 220ms var(--ease-out); }
.idea-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.idea-link:hover .arrow { transform: translateX(4px); }

/* ============================================================
   CREDIBILITY  (the ONE home for the stats)
   ============================================================ */
#credibility { background: var(--near-black); padding: var(--space-xl) var(--space-lg); position: relative; overflow: hidden; }
#credibility::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 80% 50%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 80% at 80% 50%, #000, transparent 70%);
}
.credibility-inner { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: var(--space-2xl); flex-wrap: wrap; position: relative; z-index: 1; }
.cred-stat { text-align: center; }
.cred-number {
  font-family: 'Inter', system-ui, sans-serif; font-size: 56px; font-weight: 700;
  color: var(--stone); line-height: 1; letter-spacing: -0.03em; display: block;
  font-variant-numeric: tabular-nums;
}
.cred-number.geo { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.01em; }
.cred-label {
  font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 500;
  color: var(--ash); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 10px; display: block;
}
.cred-divider { width: 1px; height: 60px; background: #333; }

/* ============================================================
   WHAT I DO
   ============================================================ */
#what-i-do { padding: var(--space-2xl) var(--space-lg); }
.what-header { max-width: var(--maxw); margin: 0 auto 60px; }
.what-header h2 { font-family: 'Inter', system-ui, sans-serif; font-size: 40px; font-weight: 600; color: var(--near-black); line-height: 1.1; letter-spacing: -0.02em; }
.what-cols { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--smoke); border: 1px solid var(--smoke); border-radius: 4px; overflow: hidden; }
.what-col { background: var(--chalk); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); position: relative; transition: background 260ms ease; }
.what-col::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: transform 320ms var(--ease-out); }
.what-col:hover { background: var(--white); }
.what-col:hover::before { transform: scaleY(1); }
.what-col-num { font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 500; color: var(--ash); letter-spacing: 0.1em; }
.what-col h3 { font-family: 'Inter', system-ui, sans-serif; font-size: 22px; font-weight: 600; color: var(--near-black); line-height: 1.2; letter-spacing: -0.01em; }
.what-col p { font-size: 17px; color: var(--ink); line-height: 1.7; flex: 1; }

/* ============================================================
   PILLAR MARQUEE
   ============================================================ */
.pillars { padding: var(--space-lg) 0; border-top: 1px solid var(--smoke); border-bottom: 1px solid var(--smoke); overflow: hidden; position: relative; }
.pillars::before, .pillars::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 14%; z-index: 2; pointer-events: none;
}
.pillars::before { left: 0; background: linear-gradient(90deg, var(--stone), transparent); }
.pillars::after { right: 0; background: linear-gradient(270deg, var(--stone), transparent); }
.marquee { display: flex; width: max-content; animation: scrollX 38s linear infinite; }
.pillars:hover .marquee { animation-play-state: paused; }
.marquee .item {
  display: inline-flex; align-items: center; gap: var(--space-lg); padding-right: var(--space-lg);
  font-family: 'Libre Baskerville', Georgia, serif; font-style: italic;
  font-size: clamp(34px, 4vw, 56px); color: var(--near-black); white-space: nowrap;
}
.marquee .item .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.marquee .item .word { -webkit-text-stroke: 0; }
@keyframes scrollX { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   ARTICLES
   ============================================================ */
#articles { padding: var(--space-2xl) var(--space-lg); }
.articles-header { max-width: var(--maxw); margin: 0 auto 48px; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); }
.articles-header h2 { font-family: 'Inter', system-ui, sans-serif; font-size: 40px; font-weight: 600; color: var(--near-black); line-height: 1.1; letter-spacing: -0.02em; }
.article-list { max-width: var(--maxw); margin: 0 auto; border-top: 1px solid var(--smoke); }
.article-item {
  border-bottom: 1px solid var(--smoke); padding: var(--space-md) 0 var(--space-md) 0;
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-md); align-items: center;
  text-decoration: none; cursor: pointer; position: relative;
  transition: background 260ms ease, padding-left 300ms var(--ease-out);
}
.article-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--pill, var(--accent)); transform: scaleY(0); transform-origin: center;
  transition: transform 300ms var(--ease-out);
}
.article-item:hover { background: color-mix(in oklab, var(--pill, var(--accent)) 6%, transparent); padding-left: 22px; }
.article-item:hover::before { transform: scaleY(1); }
.article-tag { display: inline-block; font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px; border-radius: 100px; margin-bottom: 10px; color: var(--accent); background: color-mix(in oklab, var(--accent) 9%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent); }
.article-title { font-family: 'Inter', system-ui, sans-serif; font-size: 20px; font-weight: 600; color: var(--near-black); line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 6px; max-width: 760px; }
.article-desc { font-size: 15px; color: var(--slate); line-height: 1.5; max-width: 720px; }
.article-arrow { font-family: 'Inter', system-ui, sans-serif; color: var(--ash); font-size: 20px; display: flex; align-items: center; transition: color 220ms ease, transform 220ms var(--ease-out); }
.article-item:hover .article-arrow { color: var(--pill, var(--accent)); transform: translateX(4px); }
.articles-foot { max-width: var(--maxw); margin: var(--space-lg) auto 0; text-align: center; }

/* ============================================================
   NEWSLETTER
   ============================================================ */
#newsletter { padding: var(--space-2xl) var(--space-lg); }
.news-card {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-xl); align-items: center;
  background: var(--chalk); border: 1px solid var(--smoke); border-radius: 6px;
  padding: var(--space-xl); position: relative; overflow: hidden;
}
.news-card::before {
  content: "\201C"; position: absolute; top: -0.18em; right: 0.1em;
  font-family: 'Libre Baskerville', Georgia, serif; font-size: 300px; line-height: 1;
  color: rgba(1,1,1,0.03); pointer-events: none;
}
.news-eyebrow { font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 500; color: var(--slate); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--space-sm); }
.news-title { font-size: clamp(28px, 3vw, 38px); line-height: 1.2; color: var(--near-black); letter-spacing: -0.01em; margin-bottom: var(--space-sm); }
.news-title em { font-style: italic; color: var(--accent); }
.news-sub { font-size: 17px; color: var(--ink); line-height: 1.7; max-width: 420px; }
.news-form { position: relative; z-index: 1; }
.news-field { display: flex; gap: var(--space-xs); margin-bottom: 12px; }
.news-field input {
  flex: 1; min-width: 0; font-family: 'Inter', system-ui, sans-serif; font-size: 15px;
  color: var(--ink); background: var(--white); border: 1px solid var(--smoke); border-radius: 2px;
  padding: 13px 16px; outline: none; transition: border-color 200ms ease, box-shadow 200ms ease;
}
.news-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 14%, transparent); }
.news-fine { font-family: 'Inter', system-ui, sans-serif; font-size: 12px; color: var(--slate); }
.news-success { display: none; font-family: 'Inter', system-ui, sans-serif; }
.news-form.done .news-field, .news-form.done .news-fine { display: none; }
.news-form.done .news-success { display: block; }
.news-success strong { display: block; font-size: 18px; color: var(--near-black); font-weight: 600; margin-bottom: 4px; }
.news-success span { font-size: 14px; color: var(--slate); }

/* ============================================================
   FOOTER
   ============================================================ */
footer { background: var(--near-black); padding: var(--space-xl) var(--space-lg) var(--space-lg); }
.footer-inner { max-width: var(--maxw); margin: 0 auto; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: var(--space-lg); border-bottom: 1px solid #222; flex-wrap: wrap; gap: var(--space-lg); }
.footer-name { font-family: 'Inter', system-ui, sans-serif; font-size: 22px; font-weight: 700; color: var(--stone); letter-spacing: -0.02em; }
.footer-tagline { font-size: 15px; color: var(--ash); margin-top: 6px; font-style: italic; }
.footer-links { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.footer-links a { font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 500; color: var(--ash); text-decoration: none; transition: color 200ms ease; }
.footer-links a:hover { color: var(--stone); }
.footer-social { display: flex; gap: var(--space-sm); }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--ash); text-decoration: none; transition: color 200ms ease, transform 220ms var(--ease-out); }
.footer-social a:hover { color: var(--stone); transform: translateY(-2px); }
.footer-social svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-md); flex-wrap: wrap; gap: var(--space-sm); }
.footer-copy { font-family: 'Inter', system-ui, sans-serif; font-size: 13px; color: var(--slate); }
.footer-email a { font-family: 'Inter', system-ui, sans-serif; font-size: 13px; color: var(--slate); text-decoration: none; transition: color 200ms ease; }
.footer-email a:hover { color: var(--ash); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.rv { opacity: 0; transform: translateY(22px); transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out); }
.rv.on { opacity: 1; transform: none; }
.rvg > * { opacity: 0; transform: translateY(18px); transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); }
.rvg.on > * { opacity: 1; transform: none; }
.rvg.on > *:nth-child(1) { transition-delay: 0s; }
.rvg.on > *:nth-child(2) { transition-delay: 0.09s; }
.rvg.on > *:nth-child(3) { transition-delay: 0.18s; }
.rvg.on > *:nth-child(4) { transition-delay: 0.27s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   MOTION INTENSITY
   ============================================================ */
body[data-motion="balanced"] .marquee { animation-duration: 54s; }
body[data-motion="off"] .marquee { animation: none; }
body[data-motion="off"] .pillars .marquee { transform: none; }
body[data-motion="off"] .rv,
body[data-motion="off"] .rvg > * { opacity: 1 !important; transform: none !important; transition: none !important; }
body[data-motion="off"] .hero-texture { opacity: 1; }
body[data-motion="off"] .reveal-line > span,
body[data-motion="off"] .reveal-soft { transform: none !important; opacity: 1 !important; animation: none !important; }
body[data-motion="off"] .brandword svg path { stroke-dashoffset: 0 !important; animation: none !important; }
body[data-marquee="off"] .pillars { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .rv, .rvg > * { opacity: 1 !important; transform: none !important; }
  .reveal-line > span, .reveal-soft { opacity: 1 !important; transform: none !important; }
  .brandword svg path { stroke-dashoffset: 0 !important; }
  .marquee { animation: none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .hv-a .grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .hv-a .col-visual { justify-content: center; order: -1; }
  .hv-c .grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .hv-c .col-visual { margin-left: 0; order: -1; }
  .hv-c .portrait { margin: 0 auto; }
  .idea-top, .idea-lower { grid-template-columns: 1fr; gap: var(--space-md); }
  .idea-lower { margin-top: var(--space-xl); }
  .idea-statement, .idea-lead, .idea-prose { grid-column: auto; max-width: none; }
  .what-cols { grid-template-columns: 1fr; }
  .news-card { grid-template-columns: 1fr; gap: var(--space-lg); }
  .cred-divider { display: none; }
  .credibility-inner { gap: var(--space-xl); }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  nav#main-nav { padding: 0 var(--space-md); }
  section { padding: var(--space-xl) var(--space-md); }
  #hook, #idea { padding: var(--space-xl) var(--space-md); }
  footer { padding: var(--space-xl) var(--space-md) var(--space-lg); }
  body[data-portrait="corner"] .hv-b .hero-portrait { position: static; align-items: center; text-align: center; margin: var(--space-lg) auto 0; }
  body[data-portrait="corner"] .hv-b .hp-photo { width: 200px; }
  .portrait { max-width: 300px; aspect-ratio: 1/1; }
}
@media (max-width: 600px) {
  .hv-a .hook-headline { font-size: 40px; }
  .cred-number { font-size: 40px; }
  .what-col { padding: var(--space-md); }
  .articles-header { flex-direction: column; }
  .footer-top { flex-direction: column; }
  .news-card { padding: var(--space-lg); }
  .news-field { flex-direction: column; }
}
@media (min-width: 981px) and (max-width: 1100px) {
  .what-cols { grid-template-columns: 1fr 1fr; }
  .what-cols .what-col:last-child { grid-column: span 2; }
}

/* Ben Mukoma — shared subpage styles (About / Writing / Speaking) */
a{color:var(--accent)}a:hover{color:var(--near-black)}
/* ---------- page hero ---------- */
.page-hero{padding:var(--space-2xl) var(--space-lg) var(--space-xl);position:relative;overflow:hidden}
.ph-ghost{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);font-family:'Libre Baskerville',Georgia,serif;font-style:italic;font-size:clamp(130px,22vw,360px);line-height:1;color:rgba(1,1,1,0.035);white-space:nowrap;z-index:0;pointer-events:none;user-select:none}
.ph-inner{max-width:var(--maxw);margin:0 auto;position:relative;z-index:2}
.ph-title{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:clamp(44px,6.2vw,96px);line-height:1.05;letter-spacing:-0.03em;color:var(--near-black);max-width:13em;margin-top:var(--space-md)}
.ph-title em{font-family:'Libre Baskerville',Georgia,serif;font-style:italic;font-weight:400;color:var(--accent)}
.ph-lede{font-size:20px;line-height:1.8;color:var(--ink);max-width:660px;margin-top:var(--space-lg)}
.ph-rise{opacity:0;animation:fadeUp 700ms var(--ease-out) forwards}
.ph-rise:nth-child(2){animation-delay:.12s}.ph-rise:nth-child(3){animation-delay:.24s}
/* ---------- offset editorial sections ---------- */
.sec{padding:var(--space-2xl) var(--space-lg)}
.sec-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-lg) var(--space-xl);align-items:start}
.sec-index{grid-column:1/4;font-family:'Inter',system-ui,sans-serif;padding-top:8px}
.sec-index .num{font-size:13px;font-weight:600;color:var(--accent);letter-spacing:0.04em}
.sec-index .lbl{display:block;margin-top:8px;font-size:11px;font-weight:500;color:var(--slate);letter-spacing:0.14em;text-transform:uppercase}
.sec-body{grid-column:4/10;max-width:680px}
.sec-body.wide{grid-column:4/13;max-width:none}
.sec-side{grid-column:10/13}
.prose p{font-size:19px;line-height:1.8;color:var(--ink);margin-bottom:1.4em}
.prose p:last-child{margin-bottom:0}
.pull{font-family:'Libre Baskerville',Georgia,serif;font-style:italic;font-size:clamp(24px,2.6vw,34px);line-height:1.45;color:var(--near-black);margin:1.2em 0;text-wrap:pretty}
.pull .acc{color:var(--accent)}
.sec-h{font-family:'Inter',system-ui,sans-serif;font-size:clamp(30px,3.2vw,40px);font-weight:600;letter-spacing:-0.02em;color:var(--near-black);line-height:1.1}
.sec-sub{font-size:18px;color:var(--slate);line-height:1.7;margin-top:var(--space-sm);max-width:560px}
.sec-head{max-width:var(--maxw);margin:0 auto var(--space-lg)}
/* ---------- about extras ---------- */
.about-photo{display:flex;flex-direction:column;gap:12px}
.about-photo image-slot{display:block;width:100%;aspect-ratio:4/5;background:var(--chalk);border:1px solid var(--smoke);border-radius:4px;overflow:hidden;box-shadow:0 20px 50px rgba(1,1,1,0.12)}
.about-photo figcaption{font-family:'Inter',system-ui,sans-serif;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--slate)}
.hero-eng-photo{display:flex;flex-direction:column;gap:12px;margin-top:var(--space-xl)}
.hero-eng-photo image-slot{display:block;width:100%;max-width:820px;aspect-ratio:21/9;background:var(--chalk);border:1px solid var(--smoke);border-radius:4px;overflow:hidden;box-shadow:0 20px 50px rgba(1,1,1,0.12)}
.hero-eng-photo figcaption{font-family:'Inter',system-ui,sans-serif;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--slate)}
.scripture-strip{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:12px}
.scripture-strip image-slot{display:block;width:100%;aspect-ratio:21/8;background:var(--chalk);border:1px solid var(--smoke);border-radius:4px;overflow:hidden;box-shadow:0 26px 60px rgba(1,1,1,0.14)}
.scripture-strip figcaption{font-family:'Inter',system-ui,sans-serif;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--slate);text-align:right}
.stat-callout{margin:var(--space-lg) 0 0;padding:var(--space-md) 0;border-top:1px solid var(--smoke);border-bottom:1px solid var(--smoke);display:flex;align-items:baseline;gap:var(--space-md);flex-wrap:wrap}
.stat-callout .big{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:48px;letter-spacing:-0.03em;color:var(--near-black);line-height:1}
.stat-callout .cap{font-family:'Inter',system-ui,sans-serif;font-size:13px;color:var(--slate);max-width:280px;line-height:1.5}
/* ---------- dark band ---------- */
.dark-band{background:var(--near-black);padding:var(--space-2xl) var(--space-lg);position:relative;overflow:hidden}
.dark-band::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 60% 80% at 80% 50%,#000,transparent 70%);mask-image:radial-gradient(ellipse 60% 80% at 80% 50%,#000,transparent 70%)}
.db-inner{max-width:var(--maxw);margin:0 auto;position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-lg) var(--space-xl);align-items:start}
.db-label{grid-column:1/4;font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--ash);padding-top:14px}
.db-body{grid-column:4/12}
.db-title{font-family:'Libre Baskerville',Georgia,serif;font-style:italic;font-size:clamp(36px,4.6vw,64px);color:var(--stone);line-height:1.15;margin-bottom:var(--space-lg);text-wrap:pretty}
.db-acc{color:color-mix(in oklab,var(--accent) 45%,#fff)}
.db-prose p{font-size:18px;line-height:1.85;color:var(--ash);margin-bottom:1.3em}
.db-answer{font-family:'Libre Baskerville',Georgia,serif;font-style:italic;font-size:21px;line-height:1.7;color:var(--stone);margin-top:var(--space-md)}
.db-quotes{display:flex;flex-direction:column;gap:var(--space-md);margin-bottom:var(--space-xl)}
.db-quote{font-family:'Libre Baskerville',Georgia,serif;font-style:italic;font-size:clamp(28px,3.8vw,52px);line-height:1.2;color:var(--stone)}
.db-quote:nth-child(2){margin-left:5%;color:color-mix(in oklab,var(--accent) 45%,#fff)}
.db-quote:nth-child(3){margin-left:10%}
/* ---------- pillar rows (writing) ---------- */
.pillar-list{max-width:var(--maxw);margin:0 auto;border-top:1px solid var(--smoke)}
.pillar-row{display:grid;grid-template-columns:64px 240px 1fr auto;gap:var(--space-lg);align-items:baseline;padding:var(--space-md) 0;border-bottom:1px solid var(--smoke);cursor:pointer;position:relative;text-decoration:none;transition:background 260ms ease,padding-left 300ms var(--ease-out)}
.pillar-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:center;transition:transform 300ms var(--ease-out)}
.pillar-row:hover{background:color-mix(in oklab,var(--accent) 6%,transparent);padding-left:22px}
.pillar-row:hover::before{transform:scaleY(1)}
.pillar-num{font-family:'Inter',system-ui,sans-serif;font-size:12px;color:var(--ash);letter-spacing:0.06em}
.pillar-name{font-family:'Libre Baskerville',Georgia,serif;font-style:italic;font-size:clamp(24px,2.4vw,34px);color:var(--near-black);line-height:1.2}
.pillar-desc{font-size:15px;color:var(--slate);line-height:1.6;max-width:560px}
.pillar-go{font-family:'Inter',system-ui,sans-serif;font-size:20px;color:var(--ash);transition:color 220ms ease,transform 220ms var(--ease-out)}
.pillar-row:hover .pillar-go{color:var(--accent);transform:translateX(4px)}
/* ---------- filter bar ---------- */
.filter-bar{max-width:var(--maxw);margin:0 auto var(--space-lg);display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:500;color:var(--slate);background:transparent;border:1px solid var(--smoke);border-radius:100px;padding:8px 16px;cursor:pointer;transition:color 200ms ease,border-color 200ms ease,background 200ms ease}
.chip:hover{color:var(--near-black);border-color:var(--ash)}
.chip.active{background:var(--near-black);color:var(--stone);border-color:var(--near-black)}
.search input{font-family:'Inter',system-ui,sans-serif;font-size:14px;color:var(--ink);background:var(--white);border:1px solid var(--smoke);border-radius:2px;padding:11px 14px;width:250px;outline:none;transition:border-color 200ms ease,box-shadow 200ms ease}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 14%,transparent)}
.list-empty{display:none;max-width:var(--maxw);margin:0 auto;padding:var(--space-xl) 0;font-family:'Inter',system-ui,sans-serif;font-size:15px;color:var(--slate);text-align:center}
.article-item.hide{display:none}
/* ---------- speaking: formats / topics / who ---------- */
.fmt-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--smoke);border:1px solid var(--smoke);border-radius:4px;overflow:hidden}
.topic-list{max-width:var(--maxw);margin:0 auto;border-top:1px solid var(--smoke)}
.topic-item{border-bottom:1px solid var(--smoke);padding:var(--space-md) 0;display:grid;grid-template-columns:64px 1fr;gap:var(--space-lg);align-items:baseline;transition:background 260ms ease}
.topic-item:hover{background:color-mix(in oklab,var(--accent) 5%,transparent)}
.topic-num{font-family:'Inter',system-ui,sans-serif;font-size:12px;color:var(--ash);letter-spacing:0.06em}
.topic-title{font-family:'Inter',system-ui,sans-serif;font-size:20px;font-weight:600;color:var(--near-black);letter-spacing:-0.01em;margin-bottom:6px;line-height:1.3}
.topic-desc{font-size:15px;color:var(--slate);line-height:1.6;max-width:680px}
.topic-note{max-width:var(--maxw);margin:var(--space-md) auto 0;font-family:'Inter',system-ui,sans-serif;font-size:13px;color:var(--slate);font-style:italic}
.who-list{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg) var(--space-xl)}
.who-item{padding-top:var(--space-sm);border-top:1px solid var(--smoke);font-size:17px;line-height:1.7;color:var(--ink)}
.who-item strong{font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:15px;color:var(--near-black);display:block;margin-bottom:4px}
/* ---------- invite card ---------- */
.invite-card{max-width:var(--maxw);margin:0 auto;background:var(--chalk);border:1px solid var(--smoke);border-radius:6px;padding:var(--space-xl);display:grid;grid-template-columns:1fr 1.1fr;gap:var(--space-xl);align-items:start;position:relative;overflow:hidden}
.invite-card::before{content:"\201C";position:absolute;top:-0.18em;right:0.1em;font-family:'Libre Baskerville',Georgia,serif;font-size:300px;line-height:1;color:rgba(1,1,1,0.03);pointer-events:none}
.iv-copy .news-eyebrow{margin-bottom:var(--space-sm)}
.iv-form{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--space-sm)}
.iv-field label{font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--slate);display:block;margin-bottom:6px}
.iv-field input,.iv-field textarea{width:100%;font-family:'Inter',system-ui,sans-serif;font-size:15px;color:var(--ink);background:var(--white);border:1px solid var(--smoke);border-radius:2px;padding:12px 14px;outline:none;transition:border-color 200ms ease,box-shadow 200ms ease}
.iv-field input:focus,.iv-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 14%,transparent)}
.iv-field textarea{min-height:120px;resize:vertical}
.iv-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}
.iv-form.done .iv-field,.iv-form.done .iv-row,.iv-form.done .btn-primary,.iv-form.done .news-fine{display:none}
.iv-form .news-success{display:none}
.iv-form.done .news-success{display:block}
.tally-wrap{position:relative;z-index:1;background:var(--white);border:1px solid var(--smoke);border-radius:4px;padding:var(--space-md)}
.tally-wrap iframe{display:block;font-family:'Inter',system-ui,sans-serif}
/* ---------- full-bleed image separators ---------- */
.img-sep{width:100%;overflow:hidden}
.img-sep image-slot{display:block;width:100%;height:clamp(240px,32vw,440px);background:var(--chalk)}
/* ---------- insight cards ---------- */
.insight-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}
.insight-card{display:flex;flex-direction:column;background:var(--chalk);border:1px solid var(--smoke);border-radius:16px;overflow:hidden;text-decoration:none;box-shadow:0 2px 10px rgba(1,1,1,0.05);transition:transform 260ms var(--ease-out),box-shadow 260ms ease,background 260ms ease}
.insight-card:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(1,1,1,0.14);background:var(--white)}
.insight-card.hide{display:none}
.ic-media image-slot{display:block;width:100%;aspect-ratio:3/2;background:var(--smoke)}
.ic-body{padding:var(--space-md);display:flex;flex-direction:column;gap:10px;flex:1}
.ic-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ic-meta .article-tag{margin-bottom:0}
.ic-date{font-family:'Inter',system-ui,sans-serif;font-size:12px;color:var(--slate);letter-spacing:0.02em}
.ic-title{font-family:'Inter',system-ui,sans-serif;font-size:19px;font-weight:600;color:var(--near-black);line-height:1.3;letter-spacing:-0.01em}
.ic-desc{font-size:15px;color:var(--slate);line-height:1.6;flex:1}
.ic-more{font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:500;color:var(--accent);display:inline-flex;align-items:center;gap:6px}
.ic-more .arrow{transition:transform 220ms var(--ease-out)}
.insight-card:hover .ic-more .arrow{transform:translateX(4px)}
.insight-card.featured{grid-column:1/-1;display:grid;grid-template-columns:1.25fr 1fr}
.insight-card.featured .ic-media image-slot{aspect-ratio:16/9;height:100%}
.insight-card.featured .ic-body{padding:var(--space-lg);justify-content:center}
.insight-card.featured .ic-title{font-size:clamp(24px,2.4vw,32px)}
.insight-card.featured .ic-desc{flex:0 1 auto}
/* ---------- article (insight) page ---------- */
.art-head{max-width:760px;margin:0 auto;padding:var(--space-xl) var(--space-lg) var(--space-lg)}
.art-back{display:inline-flex;align-items:center;gap:6px;font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:500;color:var(--slate);text-decoration:none;margin-bottom:var(--space-md)}
.art-back:hover{color:var(--accent)}
.art-meta{display:flex;align-items:center;gap:14px;margin-bottom:var(--space-md)}
.art-meta .ic-date{font-size:13px}
.art-title{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:clamp(36px,4.6vw,60px);line-height:1.08;letter-spacing:-0.03em;color:var(--near-black)}
.art-title em{font-family:'Libre Baskerville',Georgia,serif;font-style:italic;font-weight:400;color:var(--accent)}
.art-hero{max-width:980px;margin:0 auto;padding:0 var(--space-lg)}
.art-hero image-slot{display:block;width:100%;aspect-ratio:21/9;background:var(--chalk);border:1px solid var(--smoke);border-radius:4px;overflow:hidden;box-shadow:0 26px 60px rgba(1,1,1,0.14)}
.art-hero figcaption{font-family:'Inter',system-ui,sans-serif;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--slate);margin-top:12px;text-align:right}
.art-body{max-width:720px;margin:0 auto;padding:var(--space-xl) var(--space-lg) var(--space-2xl)}
.art-body p{font-size:19px;line-height:1.85;color:var(--ink);margin-bottom:1.5em}
.art-body .pull{margin:1.6em 0}
.art-end{max-width:720px;margin:0 auto;padding:0 var(--space-lg) var(--space-xl);display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;border-top:0}
.art-author{display:flex;flex-direction:column;gap:4px}
.art-author strong{font-family:'Inter',system-ui,sans-serif;font-size:15px;font-weight:600;color:var(--near-black)}
.art-author span{font-family:'Inter',system-ui,sans-serif;font-size:13px;color:var(--slate)}
@media (max-width:980px){.insight-grid{grid-template-columns:1fr 1fr}.insight-card.featured{grid-template-columns:1fr}}
@media (max-width:600px){.insight-grid{grid-template-columns:1fr}}
/* ---------- footer giant type (variants A/B/C) ---------- */
.footer-giant{max-width:var(--maxw,1200px);margin:0 auto var(--space-lg);padding-bottom:var(--space-lg);border-bottom:1px solid #222;overflow:hidden}
.fg-wordmark{display:block;font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:clamp(52px,12.6vw,210px);line-height:0.95;letter-spacing:-0.045em;color:var(--stone);white-space:nowrap;text-transform:uppercase}
.fg-law{display:block;font-family:'Libre Baskerville',Georgia,serif;font-style:italic;font-size:clamp(44px,10.4vw,170px);line-height:1.05;color:var(--stone);white-space:nowrap}
.fg-law em{font-style:italic;color:color-mix(in oklab,var(--accent) 55%,#fff)}
.fg-cta{display:flex;align-items:baseline;gap:0.18em;font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:clamp(48px,11.5vw,190px);line-height:1;letter-spacing:-0.04em;color:var(--stone);text-decoration:none;white-space:nowrap;transition:color 260ms ease}
.fg-cta .arrow{font-weight:400;transition:transform 300ms var(--ease-out)}
.fg-cta:hover{color:color-mix(in oklab,var(--accent) 55%,#fff)}
.fg-cta:hover .arrow{transform:translateX(0.12em)}
/* ---------- CTA band ---------- */
.cta-band{padding:var(--space-2xl) var(--space-lg);text-align:center}
.cta-band h2{font-family:'Libre Baskerville',Georgia,serif;font-size:clamp(28px,3.4vw,44px);line-height:1.3;color:var(--near-black);max-width:20em;margin:0 auto;text-wrap:pretty}
.cta-band h2 em{font-style:italic;color:var(--accent)}
.cta-band p{font-size:17px;color:var(--slate);margin:var(--space-md) auto 0;max-width:520px;line-height:1.7}
.cta-actions{display:flex;gap:var(--space-sm);justify-content:center;margin-top:var(--space-lg);flex-wrap:wrap}
.btn-ghost{display:inline-flex;align-items:center;gap:9px;background:transparent;color:var(--near-black);font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:600;letter-spacing:0.06em;text-decoration:none;padding:13px 25px;border-radius:2px;border:1px solid var(--near-black);cursor:pointer;transition:background 220ms ease,color 220ms ease,transform 220ms var(--ease-out)}
.btn-ghost:hover{background:var(--near-black);color:var(--stone);transform:translateY(-1px)}
/* ---------- responsive ---------- */
@media (max-width:980px){
.page-hero{padding:var(--space-xl) var(--space-md)}
.sec{padding:var(--space-xl) var(--space-md)}
.sec-grid,.db-inner{grid-template-columns:1fr;gap:var(--space-md)}
.sec-index,.sec-body,.sec-side,.db-label,.db-body{grid-column:auto;max-width:none}
.sec-side{max-width:340px}
.pillar-row{grid-template-columns:48px 1fr auto;gap:var(--space-md)}
.pillar-desc{grid-column:2/4}
.pillar-go{grid-column:3;grid-row:1}
.fmt-grid{grid-template-columns:1fr}
.who-list{grid-template-columns:1fr}
.invite-card{grid-template-columns:1fr;padding:var(--space-lg)}
.dark-band{padding:var(--space-xl) var(--space-md)}
.cta-band{padding:var(--space-xl) var(--space-md)}
}
@media (max-width:600px){
.iv-row{grid-template-columns:1fr}
.search input{width:100%}
.filter-bar{align-items:stretch;flex-direction:column}
.topic-item{grid-template-columns:44px 1fr}
}

/* Ben Mukoma — site easter eggs */

/* ── Night owl (homepage): eyebrow suffix ── */
body.egg-night .hook-eyebrow::after{content:"· hello, night owl";font-family:'Libre Baskerville',Georgia,serif;font-style:italic;text-transform:none;letter-spacing:0;color:var(--accent);margin-left:2px;}

/* ── Over-scroll benediction ── */
.egg-bene{max-height:0;overflow:hidden;background:var(--near-black);transition:max-height 1100ms cubic-bezier(.22,1,.36,1);}
.egg-bene.open{max-height:1000px;}
.eb-inner{max-width:640px;margin:0 auto;padding:110px 24px 130px;text-align:center;opacity:0;transform:translateY(18px);transition:opacity 900ms ease 350ms,transform 900ms cubic-bezier(.22,1,.36,1) 350ms;}
.egg-bene.open .eb-inner{opacity:1;transform:none;}
.eb-eyebrow{font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in oklab,var(--accent) 55%,#fff);margin-bottom:30px;}
.eb-line{font-family:'Libre Baskerville',Georgia,serif;font-style:italic;font-size:17px;line-height:2;color:#cfc9c4;margin-bottom:1.5em;}
.eb-sign{font-family:'Libre Baskerville',Georgia,serif;font-style:italic;font-size:19px;color:color-mix(in oklab,var(--accent) 60%,#fff);}

/* ── "hand" overlay ── */
.egg-hand{position:fixed;inset:0;z-index:920;background:#0a0807;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity 480ms ease,visibility 0s linear 480ms;cursor:pointer;}
.egg-hand.show{opacity:1;visibility:visible;transition:opacity 480ms ease;}
.eh-inner{max-width:680px;padding:40px 28px;text-align:center;}
.egg-hand .eh-line{opacity:0;transform:translateY(16px);}
.egg-hand.show .eh-line{animation:ehUp 700ms cubic-bezier(.22,1,.36,1) forwards;}
.egg-hand.show .eh-line:nth-child(1){animation-delay:.15s;}
.egg-hand.show .eh-line:nth-child(2){animation-delay:.4s;}
.egg-hand.show .eh-line:nth-child(3){animation-delay:1.1s;}
.egg-hand.show .eh-line:nth-child(4){animation-delay:1.9s;}
.egg-hand.show .eh-line:nth-child(5){animation-delay:2.7s;}
@keyframes ehUp{to{opacity:1;transform:none;}}
.eh-eyebrow{font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#847e7a;margin-bottom:28px;}
.eh-q{font-family:'Libre Baskerville',Georgia,serif;font-weight:400;font-size:clamp(32px,5vw,54px);line-height:1.2;letter-spacing:-.01em;color:#f2efec;margin-bottom:36px;}
.eh-q em{font-style:italic;color:color-mix(in oklab,var(--accent) 70%,#fff);}
.eh-a{font-family:'Libre Baskerville',Georgia,serif;font-style:italic;font-size:18px;line-height:1.9;color:#b5afaa;max-width:520px;margin:0 auto 20px;}
.eh-b{font-family:'Libre Baskerville',Georgia,serif;font-size:19px;line-height:1.8;color:#d8d3ce;}
.eh-b em{font-style:italic;color:color-mix(in oklab,var(--accent) 70%,#fff);}
.eh-foot{font-family:'Inter',system-ui,sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#5c5652;margin-top:48px;}


/* ===== WP adaptation layer ===== */
.band-track img{display:block;width:100%;height:auto}
.ic-media{position:relative;overflow:hidden}
.ic-media img,.hp-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hp-photo img{position:absolute}
img.bm-placeholder{object-fit:cover;background:#efe9df}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.article-body img{max-width:100%;height:auto}
.article-body .alignwide,.article-body .alignfull{width:100%}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.marquee{animation:none!important}.rv,.rvg,.reveal-soft,.reveal-line span{opacity:1!important;transform:none!important;animation:none!important}}

/* WP article/list adaptation */
.art-hero img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;border:1px solid var(--smoke);border-radius:4px;box-shadow:0 26px 60px rgba(1,1,1,0.14)}
.art-body h2,.art-body h3{font-family:'Inter',system-ui,sans-serif;font-weight:600;letter-spacing:-0.02em;color:var(--near-black);margin:1.6em 0 0.6em}
.art-body h2{font-size:clamp(24px,2.4vw,30px)}.art-body h3{font-size:clamp(20px,2vw,24px)}
.art-body ul,.art-body ol{font-size:19px;line-height:1.85;color:var(--ink);margin:0 0 1.5em 1.2em}
.art-body blockquote{border-left:2px solid var(--accent);padding-left:20px;margin:1.6em 0;color:var(--slate);font-style:italic}
.art-body figure{margin:1.8em 0}.art-body figcaption{font-family:'Inter',system-ui,sans-serif;font-size:12px;color:var(--slate);margin-top:8px}
#load-more-wrap a.loading{opacity:0.5;pointer-events:none}
.filter-bar .chip{text-decoration:none}