/* ═══════════════════════════════════════════════════════════════
   Amerikan Kushite Project
   Display: Fraunces · Body: Figtree · Labels: IBM Plex Mono
   Warm paper ground, deep Kush green, ochre gold. Dignified, not slick —
   this is a donor document that happens to be a website.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink:      #12201b;   /* deep green-black */
  --ink-2:    #1b2f27;
  --paper:    #f7f2e8;   /* warm off-white */
  --paper-2:  #efe6d6;
  --sand:     #e2d3ba;
  --gold:     #c08a2e;
  --gold-lt:  #e0a940;
  --clay:     #9c4a2c;
  --body-c:   #2f3a35;
  --muted:    #6d7a72;
  --rule:     rgba(18, 32, 27, .14);
  --rule-dk:  rgba(247, 242, 232, .18);

  --display: "Fraunces", Georgia, serif;
  --body:    "Figtree", "Helvetica Neue", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --pad:  clamp(1.25rem, 5vw, 6rem);
  --maxw: 1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--body-c);
  font-family: var(--body);
  font-size: clamp(1rem, .45vw + .92rem, 1.1rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--gold); color: #fff; }
a { color: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper); padding: .8rem 1.2rem;
}
.skip:focus { left: 0; }

/* ── type ────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.12; color: var(--ink); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.75rem); letter-spacing: -.015em; }
h3 { font-size: 1.12rem; letter-spacing: -.005em; }

.kicker {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .22em; color: var(--clay);
  margin-bottom: .9rem;
}
.overline {
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .28em; color: var(--gold-lt);
  margin-bottom: 1.4rem;
}
.principle {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.05rem, 1.9vw, 1.45rem); line-height: 1.45; color: var(--ink);
  border-left: 3px solid var(--gold); padding-left: 1.2rem;
  margin-top: clamp(2rem, 4vw, 3rem); max-width: 62ch;
}
.src {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  color: var(--muted); margin-top: 2rem;
}

/* ── top bar ─────────────────────────────────────────────── */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .85rem var(--pad);
  background: transparent;
  transition: background .3s ease, box-shadow .3s ease;
}
.topbar.stuck {
  background: rgba(247, 242, 232, .95);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--rule);
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.brand-mark {
  width: 26px; height: 26px; flex: 0 0 auto;
  background: no-repeat center / contain url("logo-mark.svg");
}
.brand-mark.big { width: 54px; height: 54px; }
.brand-text {
  font-family: var(--display); font-weight: 700; font-size: .92rem;
  line-height: 1.05; color: var(--paper); letter-spacing: -.01em;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.brand-text span { display: block; font-weight: 400; font-size: .78rem; opacity: .85; }
.topbar.stuck .brand-text { color: var(--ink); text-shadow: none; }

.topbar nav { display: flex; gap: clamp(.8rem, 1.8vw, 1.8rem); }
.topbar nav a {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .14em; color: rgba(247,242,232,.82); text-decoration: none;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
  transition: color .2s, border-color .2s;
}
.topbar nav a:hover { color: var(--paper); border-color: var(--gold); }
.topbar.stuck nav a { color: var(--muted); text-shadow: none; }
.topbar.stuck nav a:hover { color: var(--ink); }
@media (max-width: 1080px) { .topbar nav { display: none; } }
@media (max-width: 560px) { .nav-cta { display: none; } }

/* ── buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em;
  padding: .9rem 1.5rem; border: 1px solid transparent;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: #1a1206; border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-lt); border-color: var(--gold-lt); }
.btn-ghost { border-color: currentColor; color: inherit; }
.nav-cta { padding: .7rem 1.1rem; }

/* ── hero ────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 92svh;
  display: grid; align-items: center;
  padding: clamp(6rem, 14vh, 9rem) var(--pad) clamp(4rem, 9vh, 7rem);
  overflow: hidden; background: var(--ink);
}
.hero-art {
  position: absolute; inset: 0;
  background: url("media/hero.jpg") center 62% / cover no-repeat;
}
.hero-art::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,20,16,.93) 0%, rgba(10,20,16,.78) 38%, rgba(10,20,16,.35) 68%, rgba(10,20,16,.2) 100%),
    linear-gradient(180deg, rgba(10,20,16,.75) 0%, rgba(10,20,16,.15) 40%, rgba(10,20,16,.6) 100%);
}
.hero-inner { position: relative; z-index: 2; max-width: 60ch; }
.hero h1 {
  font-size: clamp(2.6rem, 7.5vw, 6rem); line-height: .95; letter-spacing: -.03em;
  color: var(--paper); margin-bottom: 1.4rem;
}
.hero .lede {
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(1.2rem, 2.6vw, 1.9rem); line-height: 1.3;
  color: var(--gold-lt); margin-bottom: 1.1rem;
}
.hero-sub { color: rgba(247,242,232,.9); max-width: 48ch; }
.hero-sub strong { color: var(--paper); }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.hero .btn-ghost { color: var(--paper); }
.hero-rule {
  position: absolute; left: 0; right: 0; bottom: 0; height: 5px; z-index: 2;
  background: linear-gradient(90deg, var(--gold) 0%, var(--clay) 50%, var(--ink-2) 100%);
}

/* ── sections ────────────────────────────────────────────── */
.section {
  padding: clamp(3.5rem, 9vh, 7rem) var(--pad);
  max-width: var(--maxw); margin-inline: auto;
}
.band {
  background: var(--paper-2);
  max-width: none;
  border-block: 1px solid var(--rule);
}
.band > * { max-width: var(--maxw); margin-inline: auto; }
.sec-head { max-width: 60ch; margin-bottom: clamp(2rem, 4.5vw, 3.4rem); }

/* ── numbered steps ──────────────────────────────────────── */
.steps { list-style: none; display: grid; gap: clamp(1.2rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.steps li { border-top: 2px solid var(--ink); padding-top: 1.2rem; }
.step-n {
  font-family: var(--display); font-size: 2.4rem; font-weight: 700;
  line-height: 1; color: var(--gold); display: block; margin-bottom: .5rem;
}
.steps h3 { margin-bottom: .5rem; }

/* ── stats ───────────────────────────────────────────────── */
.stats { display: grid; gap: clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stat {
  background: var(--paper); border: 1px solid var(--rule);
  border-top: 4px solid var(--clay); padding: 1.6rem 1.4rem;
}
.stat-n {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; color: var(--ink);
  letter-spacing: -.02em; margin-bottom: .6rem;
}
.stat-l { display: block; font-weight: 600; color: var(--ink); }
.stat-s { display: block; font-family: var(--mono); font-size: .65rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-top: .5rem; }

.need-notes { margin-top: 2.4rem; display: grid; gap: 1rem; max-width: 68ch; }
.need-notes p { padding-left: 1.2rem; border-left: 2px solid var(--sand); }

/* ── lanes ───────────────────────────────────────────────── */
.lanes { display: grid; gap: clamp(1rem, 2.5vw, 1.8rem);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.lane { background: var(--paper-2); border: 1px solid var(--rule); padding: 1.6rem 1.4rem; }
.lane h3 { margin-bottom: .6rem; }
.lane-promise { background: var(--ink); border-color: var(--ink); }
.lane-promise h3 { color: var(--gold-lt); }
.lane-promise p { color: rgba(247,242,232,.9); }

/* ── pillars / needs / controls (card grids) ─────────────── */
.pillars, .needs, .controls {
  display: grid; gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.pillars article, .needs article, .controls article {
  background: var(--paper); border: 1px solid var(--rule); padding: 1.5rem 1.3rem;
  border-left: 3px solid var(--gold);
}
.band .pillars article, .band .controls article { background: var(--paper); }
.pillars h3, .needs h3, .controls h3 { margin-bottom: .5rem; }

/* ── split ───────────────────────────────────────────────── */
.split {
  display: grid; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.split.band { max-width: none; }
.split.band > * { max-width: none; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split-rev .split-art { order: 2; } }
.split-art img { width: 100%; display: block; border: 1px solid var(--rule); }
.split-art figcaption {
  font-family: var(--mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--muted); margin-top: .7rem;
}
.split-copy h2 { margin-bottom: 1.4rem; }

.specs { display: grid; gap: 0; margin-top: .5rem; }
.specs > div {
  display: grid; grid-template-columns: 10rem 1fr; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--rule);
}
.specs dt { font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--clay); padding-top: .25rem; }
@media (max-width: 560px) { .specs > div { grid-template-columns: 1fr; gap: .2rem; } }

.numlist { list-style: none; counter-reset: n; display: grid; gap: 1.2rem; margin-top: 1.4rem; }
.numlist li { counter-increment: n; padding-left: 3rem; position: relative; }
.numlist li::before {
  content: counter(n); position: absolute; left: 0; top: -.1rem;
  font-family: var(--display); font-weight: 700; font-size: 1.6rem; color: var(--gold);
}
.numlist h3 { margin-bottom: .3rem; }
.guardrail {
  margin-top: 1.8rem; padding: 1rem 1.2rem;
  background: rgba(156, 74, 44, .08); border-left: 3px solid var(--clay);
  font-size: .95rem;
}

/* ── week ────────────────────────────────────────────────── */
.week { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.day { background: var(--paper); border: 1px solid var(--rule); padding: 1.3rem 1.1rem; }
.day h3 {
  font-family: var(--mono); font-size: .7rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .16em; color: var(--clay); margin-bottom: .8rem;
}
.day ul { list-style: none; display: grid; gap: .45rem; }
.day li { padding-left: 1rem; position: relative; font-size: .95rem; }
.day li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px;
  background: var(--gold); }
.day-daily { background: var(--ink); border-color: var(--ink); }
.day-daily h3 { color: var(--gold-lt); }
.day-daily li { color: rgba(247,242,232,.92); }

/* ── scorecard ───────────────────────────────────────────── */
.score { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.score > div { border-top: 2px solid var(--ink); padding-top: 1rem; }
.score h3 { margin-bottom: .6rem; }
.score ul { list-style: none; display: grid; gap: .35rem; }
.score li { font-size: .95rem; color: var(--muted); }

/* ── ladder + phases ─────────────────────────────────────── */
.ladder { list-style: none; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ladder li {
  background: var(--paper-2); border: 1px solid var(--rule); padding: 1.4rem 1.2rem;
  border-top: 4px solid var(--gold);
}
.ladder li:nth-child(2) { border-top-color: #b8802c; }
.ladder li:nth-child(3) { border-top-color: var(--clay); }
.ladder li:nth-child(4) { border-top-color: var(--ink); }
.rung {
  display: block; font-family: var(--mono); font-size: .7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .2em; color: var(--clay); margin-bottom: .7rem;
}
.ladder p { font-family: var(--display); font-size: 1.05rem; line-height: 1.45; color: var(--ink); }

.phases { margin-top: clamp(2.5rem, 5vw, 4rem); }
.phases-h {
  font-family: var(--mono); font-size: .7rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .2em; color: var(--clay); margin-bottom: 1.4rem;
}
.phase { border-left: 2px solid var(--sand); padding: 0 0 1.6rem 1.6rem; position: relative; }
.phase::before {
  content: ""; position: absolute; left: -7px; top: .35rem;
  width: 12px; height: 12px; background: var(--gold); border-radius: 50%;
}
.phase:last-of-type { border-left-color: transparent; }
.phase-t {
  font-family: var(--mono); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--muted);
}
.phase h4 { font-size: 1.1rem; margin: .2rem 0 .35rem; }
.phase p { max-width: 62ch; }
.gate { margin-top: .5rem; padding: 1rem 1.2rem; background: var(--paper); border: 1px solid var(--rule); }

/* ── ecosystem ───────────────────────────────────────────── */
.eco { display: grid; gap: clamp(1.2rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: start; }
@media (max-width: 800px) { .eco { grid-template-columns: 1fr; } }
.eco-core {
  background: var(--ink); color: var(--paper); padding: 2rem 1.5rem; text-align: center;
  border-top: 4px solid var(--gold);
}
.eco-core span { display: block; font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--paper); }
.eco-core em {
  display: block; margin-top: .4rem; font-style: normal;
  font-family: var(--mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--gold-lt);
}
.eco ul { list-style: none; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.eco li { border-top: 1px solid var(--rule); padding-top: .9rem; }
.eco li h3 { font-size: 1rem; margin-bottom: .2rem; }
.eco li p { font-size: .92rem; color: var(--muted); }

/* ── the call ────────────────────────────────────────────── */
.call {
  position: relative; overflow: hidden; background: var(--ink); color: var(--paper);
  padding: clamp(4rem, 11vh, 8rem) var(--pad);
}
.call-art {
  position: absolute; inset: 0;
  background: url("media/desert.jpg") center 55% / cover no-repeat;
  opacity: .3;
}
.call-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,32,27,.85) 0%, rgba(18,32,27,.7) 50%, rgba(18,32,27,.95) 100%);
}
.call-inner { position: relative; z-index: 2; max-width: var(--maxw); margin-inline: auto; }
.call h2 { color: var(--paper); font-size: clamp(1.9rem, 4.6vw, 3.4rem); max-width: 20ch; margin-bottom: 1.2rem; }
.call .lede { max-width: 60ch; color: rgba(247,242,232,.9); font-size: 1.08rem; }
.asks { list-style: none; display: grid; gap: 1.4rem; margin: clamp(2.2rem, 5vw, 3.4rem) 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.asks li { border-top: 2px solid var(--gold); padding-top: 1rem; }
.asks span { font-family: var(--display); font-size: 1.6rem; font-weight: 700; color: var(--gold); }
.asks h3 { color: var(--paper); margin: .2rem 0 .3rem; }
.asks p { color: rgba(247,242,232,.82); font-size: .95rem; }
.call-cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.call .btn-ghost { color: var(--paper); }

/* ── footer ──────────────────────────────────────────────── */
footer { background: var(--paper-2); border-top: 1px solid var(--rule);
  padding: clamp(3rem, 7vh, 5rem) var(--pad); }
.foot-grid {
  max-width: var(--maxw); margin-inline: auto;
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr; } }
.sources { list-style: none; display: grid; gap: .9rem; margin-bottom: 1.6rem; }
.sources li { font-size: .9rem; color: var(--muted); padding-left: 1rem; border-left: 2px solid var(--sand); }
.sources strong { color: var(--ink); font-weight: 600; }
.compliance { font-size: .9rem; padding: 1rem 1.2rem; background: var(--paper); border-left: 3px solid var(--clay); }
.disclaimer { font-size: .82rem; color: var(--muted); margin-top: 1.2rem; max-width: 70ch; }
.foot-name { font-family: var(--display); font-size: 1.3rem; font-weight: 700; color: var(--ink); margin-top: .8rem; }
.foot-tag, .foot-loc { font-size: .9rem; color: var(--muted); }
.foot-loc { margin-top: .3rem; }
.mailto {
  display: inline-block; margin-top: 1rem; font-family: var(--mono); font-size: .78rem;
  color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--gold); padding-bottom: 2px;
}
.mailto:hover { color: var(--clay); }

/* ── reveal ──────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ?flat — settled, no motion. For screenshots and link previews. */
body.flat .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ── leadership ──────────────────────────────────────────── */
.lead { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 860px) { .lead { grid-template-columns: 1fr; } }
.lead-art img { width: 100%; display: block; border: 1px solid var(--rule); }
.lead-role {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .2em; color: var(--clay);
}
.lead-name {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.05; color: var(--ink); margin: .2rem 0 1.1rem; letter-spacing: -.02em;
}
.lead-copy p + p { margin-top: .9rem; }
.lead-copy .mailto { margin-top: 1.4rem; }
/* In ?flat the hero is pinned to a cinematic ratio, otherwise a tall full-page
   capture makes 92svh swallow the whole screenshot and the page looks empty. */
body.flat .hero { min-height: min(56vw, 92svh); }

.sec-lede { font-family: var(--display); font-style: italic; font-size: 1.1rem;
  color: var(--muted); margin-top: .5rem; }