/* ============================================================
   BAMBAKO.ORG — shared design system
   Palette carried over from the diaspora dues tracker for a
   single consistent brand across every page and tool.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* core palette */
  --indigo-deep:#152238;
  --indigo:#1f3557;
  --indigo-soft: rgba(21,34,56,0.06);
  --sand:#f4ecd8;
  --sand-deep:#ece0c4;
  --paper:#fffdf7;
  --gold:#c99a3d;
  --gold-bright:#e0b458;
  --leaf:#2f7a52;
  --leaf-soft: rgba(47,122,82,0.12);
  --clay:#a4423a;
  --clay-soft: rgba(164,66,58,0.10);
  --ink:#17231f;
  --ink-soft: rgba(23,35,31,0.62);
  --line: rgba(23,35,31,0.12);
  --line-dark: rgba(244,236,216,0.16);

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Public Sans', 'Helvetica Neue', Arial, sans-serif;

  --maxw: 1080px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height:1.55;
  -webkit-text-size-adjust:100%;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  color: var(--indigo-deep);
}
p{ margin:0 0 1em 0; max-width: 62ch; }
.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
:focus-visible{
  outline: 3px solid var(--gold-bright);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ---------- header / nav ---------- */
.site-header{
  background: var(--indigo-deep);
  border-bottom: 1px solid var(--line-dark);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height: 76px;
  gap: 20px;
}
.brand{
  display:flex;
  align-items:baseline;
  gap:10px;
  text-decoration:none;
  color:#fff;
}
.brand .mark{
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.brand .tag{
  font-size: 12.5px;
  color: rgba(244,236,216,0.6);
  display:none;
}
@media (min-width:640px){ .brand .tag{ display:inline; } }

nav.main-nav{
  display:flex;
  align-items:center;
  gap: 4px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
nav.main-nav a{
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(244,236,216,0.78);
  text-decoration:none;
  padding: 8px 12px;
  border-radius: 5px;
}
nav.main-nav a:hover{ color:#fff; background: rgba(244,236,216,0.08); }
nav.main-nav a.current{ color: var(--gold-bright); }
nav.main-nav a.cta{
  background: var(--gold);
  color: var(--indigo-deep);
}
nav.main-nav a.cta:hover{ background: var(--gold-bright); }

/* ---------- hero ---------- */
.hero{
  background: var(--indigo-deep);
  color: var(--sand);
  padding: 56px 0 64px;
}
.hero .container{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items:center;
}
@media (max-width: 860px){
  .hero .container{ grid-template-columns: 1fr; }
}
.eyebrow-line{
  font-size: 14px;
  color: var(--gold-bright);
  margin: 0 0 14px 0;
}
.hero h1{
  color:#fff;
  font-size: clamp(32px, 4.6vw, 50px);
  margin-bottom: 18px;
}
.hero p.lede{
  color: rgba(244,236,216,0.82);
  font-size: 17.5px;
  max-width: 46ch;
}
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 24px;
}
.btn{
  display:inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 20px;
  border-radius: 6px;
  text-decoration:none;
  border: 1px solid transparent;
}
.btn-gold{ background: var(--gold); color: var(--indigo-deep); }
.btn-gold:hover{ background: var(--gold-bright); }
.btn-outline{
  background: transparent;
  color: var(--sand);
  border-color: rgba(244,236,216,0.35);
}
.btn-outline:hover{ border-color: var(--gold-bright); color: var(--gold-bright); }

/* hero illustration */
.hero-art{ width:100%; height:auto; }

/* ---------- sections ---------- */
section{ padding: 60px 0; }
.section-head{
  max-width: 60ch;
  margin-bottom: 34px;
}
.section-head .kicker{
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--leaf);
  margin: 0 0 8px 0;
}
.section-head h2{ font-size: clamp(24px, 3vw, 32px); margin-bottom: 10px; }
.section-head p{ color: var(--ink-soft); }

.bg-sand{ background: var(--sand); }
.bg-paper{ background: var(--paper); }

/* ---------- ledger list (village-today, projects) ---------- */
.ledger{
  border-top: 1px solid var(--line);
}
.ledger-row{
  display:grid;
  grid-template-columns: 40px 1fr auto;
  gap: 18px;
  align-items:start;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.ledger-row .glyph{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
}
.ledger-row .glyph svg{ width:26px; height:26px; }
.ledger-row h3{
  font-size: 19px;
  margin-bottom: 4px;
  color: var(--indigo-deep);
}
.ledger-row .desc{
  color: var(--ink-soft);
  font-size: 15px;
  max-width: 56ch;
  margin:0;
}
.status{
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 100px;
  white-space:nowrap;
  height: fit-content;
}
.status-active{ background: var(--leaf-soft); color: var(--leaf); }
.status-progress{ background: rgba(201,154,61,0.16); color:#8a6a24; }
.status-planned{ background: var(--clay-soft); color: var(--clay); }

@media (max-width:560px){
  .ledger-row{ grid-template-columns: 34px 1fr; }
  .ledger-row .status{ grid-column: 2; margin-top:6px; }
}

/* ---------- get involved band ---------- */
.band{
  background: var(--indigo-deep);
  color: var(--sand);
}
.band h2{ color:#fff; }
.band-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 28px;
}
@media (max-width:900px){ .band-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:560px){ .band-grid{ grid-template-columns:1fr; } }
.band-item{
  border-top: 2px solid var(--gold);
  padding-top: 14px;
}
.band-item h4{
  color:#fff;
  font-size: 17px;
  margin-bottom: 8px;
}
.band-item p{ color: rgba(244,236,216,0.75); font-size: 14.5px; }
.band-item a.link{
  color: var(--gold-bright);
  font-weight:700;
  font-size:14.5px;
  text-decoration:none;
}
.band-item a.link:hover{ text-decoration:underline; }

/* ---------- footer ---------- */
footer.site-footer{
  background: var(--indigo-deep);
  border-top: 1px solid var(--line-dark);
  color: rgba(244,236,216,0.55);
  padding: 34px 0;
  font-size: 13.5px;
}
footer.site-footer .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap: 12px;
}
footer.site-footer a{ color: rgba(244,236,216,0.75); text-decoration:none; }
footer.site-footer a:hover{ color: var(--gold-bright); }
footer .foot-links{ display:flex; gap:16px; flex-wrap:wrap; }

/* ---------- generic content page ---------- */
.page-hero{
  background: var(--sand);
  padding: 46px 0 40px;
  border-bottom: 1px solid var(--line);
}
.page-hero h1{ font-size: clamp(28px, 4vw, 40px); }
.page-hero p{ color: var(--ink-soft); margin-top:10px; }

.prose h3{ margin-top: 34px; margin-bottom: 10px; font-size: 20px; }
.prose p{ color: var(--ink-soft); font-size: 15.5px; }

.card-note{
  background: var(--sand);
  border: 1px dashed var(--gold);
  border-radius: 8px;
  padding: 18px 20px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.card-note strong{ color: var(--indigo-deep); }

.figure-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap: 24px;
  margin-top: 12px;
}
.figure-card h4{ font-size:16.5px; margin-bottom:4px; color:var(--indigo-deep); }
.figure-card .role{ font-size:13px; color: var(--leaf); font-weight:700; margin-bottom:8px; }
.figure-card p{ font-size:14px; color: var(--ink-soft); }

.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-grid h3{ font-size:18px; margin-bottom:8px; }
.contact-grid p{ color: var(--ink-soft); font-size:15px; }