/* ============================================================
   African Solidarity Civic Organisation — Design System
   Palette sampled from the org mark:
     green-900 #0D351B  (primary / charter)
     green-700 #1B5230  (hover / mid)
     green-050 #EAF0EA  (tint)
     gold-500  #BB8B21  (accent / call to action)
     gold-300  #D9B25C  (accent on dark)
     ink       #14130F  (text)
     paper     #FAF8F3  (warm background, not stark white)
   Type: Fraunces (display) + Work Sans (body) + IBM Plex Mono (labels)
   ============================================================ */

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

:root{
  --green-900:#0D351B;
  --green-800:#123F22;
  --green-700:#1B5230;
  --green-050:#EAF0EA;
  --gold-500:#BB8B21;
  --gold-400:#C99A2E;
  --gold-300:#D9B25C;
  --ink:#14130F;
  --ink-soft:#4A4A42;
  --paper:#FAF8F3;
  --paper-alt:#F1EEE4;
  --line:rgba(13,53,27,0.14);
  --max:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

h1,h2,h3,h4{
  font-family:'Fraunces',serif;
  font-weight:600;
  line-height:1.08;
  margin:0 0 .5em;
  color:var(--green-900);
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.6rem,5.4vw,4.6rem); font-weight:600;}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem);}
h3{font-size:1.35rem;}
p{margin:0 0 1em;}
.lede{font-size:1.18rem;color:var(--ink-soft);}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-500);
  display:flex;
  align-items:center;
  gap:.6em;
  margin-bottom:.9em;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold-500);display:inline-block;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 32px;}
section{padding:96px 0;}
@media (max-width:640px){ section{padding:64px 0;} }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-family:'IBM Plex Mono',monospace;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.95em 1.7em;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-gold{background:var(--gold-500);color:var(--green-900);}
.btn-gold:hover{background:var(--gold-300);transform:translateY(-1px);}
.btn-line{border-color:currentColor;color:inherit;background:transparent;}
.btn-line:hover{background:rgba(255,255,255,.08);transform:translateY(-1px);}
.btn-line.on-paper:hover{background:var(--green-900);color:var(--paper);}

/* ---------- Header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--max);margin:0 auto;padding:16px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:44px;width:44px;border-radius:50%;}
.brand-text{font-family:'Fraunces',serif;font-weight:600;font-size:1.02rem;color:var(--green-900);line-height:1.15;}
.brand-text span{display:block;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:.62rem;letter-spacing:.12em;color:var(--gold-500);text-transform:uppercase;margin-top:2px;}

nav.links{display:flex;align-items:center;gap:30px;}
nav.links a{
  font-family:'IBM Plex Mono',monospace;
  font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
nav.links a:hover, nav.links a.active{color:var(--green-900);border-color:var(--gold-500);}
.nav-cta{display:flex;align-items:center;gap:18px;}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.burger span{display:block;width:22px;height:2px;background:var(--green-900);margin:4px 0;}

@media (max-width:900px){
  nav.links{
    position:fixed;inset:64px 0 0 0;background:var(--paper);
    flex-direction:column;align-items:flex-start;padding:32px;gap:22px;
    transform:translateX(100%); transition:transform .25s ease;
  }
  nav.links.open{transform:translateX(0);}
  .burger{display:block;}
  .nav-cta .btn-line{display:none;}
}

/* ---------- Hero w/ sunburst signature ---------- */
.hero{
  position:relative;
  background:var(--green-900);
  color:var(--paper);
  overflow:hidden;
  padding:120px 0 100px;
}
.hero .sunburst{
  position:absolute;left:50%;top:38%;
  width:1400px;height:1400px;
  transform:translate(-50%,-50%);
  opacity:.16;
  pointer-events:none;
}
.hero-inner{position:relative;z-index:2;max-width:820px;}
.hero h1{color:var(--paper);}
.hero .lede{color:rgba(250,248,243,.82);max-width:560px;font-size:1.15rem;}
.hero-ctas{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap;}
.hero .btn-line{border-color:rgba(250,248,243,.5);color:var(--paper);}

.page-hero{padding:80px 0 72px;}
.page-hero .eyebrow{color:var(--gold-300);}
.page-hero p.lede{color:rgba(250,248,243,.82);}

/* ---------- Marquee strip ---------- */
.marquee-strip{
  background:var(--gold-500);
  color:var(--green-900);
  overflow:hidden;
  white-space:nowrap;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.marquee-track{
  display:inline-flex;
  animation:marquee 32s linear infinite;
  font-family:'IBM Plex Mono',monospace;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
}
.marquee-track span{padding:12px 40px;display:inline-block;}
@keyframes marquee{ 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
@media (prefers-reduced-motion:reduce){ .marquee-track{animation:none;} }

/* ---------- Split section ---------- */
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:center;}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:36px;}}
.map-mark{
  background:var(--green-050);
  border:1px solid var(--line);
  border-radius:4px;
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  overflow:hidden;
}
.map-mark svg{width:58%;}

/* ---------- Charter articles (numbered clauses) ---------- */
.articles{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:48px;}
@media (max-width:760px){.articles{grid-template-columns:1fr;}}
.article{background:var(--paper);padding:40px;}
.article .num{
  font-family:'IBM Plex Mono',monospace;
  font-size:.75rem;color:var(--gold-500);letter-spacing:.1em;
  display:block;margin-bottom:14px;
}
.article h3{margin-bottom:.4em;}
.article p{color:var(--ink-soft);margin:0;}

/* ---------- Alt background section ---------- */
.alt{background:var(--paper-alt);}
.dark{background:var(--green-900);color:var(--paper);}
.dark h2,.dark h3{color:var(--paper);}
.dark .eyebrow{color:var(--gold-300);}
.dark p{color:rgba(250,248,243,.78);}

/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px;}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.cards{grid-template-columns:1fr;}}
.card{
  border:1px solid var(--line);
  padding:32px 28px;
  background:var(--paper);
  transition:border-color .2s ease, transform .2s ease;
}
.card:hover{border-color:var(--gold-500);transform:translateY(-3px);}
.card .icon{width:38px;height:38px;margin-bottom:18px;color:var(--green-700);}
.card h3{font-size:1.12rem;}
.card p{color:var(--ink-soft);font-size:.95rem;margin:0;}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--green-900);color:var(--paper);
  border-radius:4px;
  padding:64px 56px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.cta-banner h2{color:var(--paper);margin-bottom:.2em;}
.cta-banner p{color:rgba(250,248,243,.78);margin:0;max-width:480px;}

/* ---------- Values / pillars list ---------- */
.value-list{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line);}
.value-list li{
  display:grid;grid-template-columns:120px 1fr;gap:24px;
  padding:26px 0;border-bottom:1px solid var(--line);
}
.value-list .tag{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;color:var(--gold-500);text-transform:uppercase;padding-top:3px;}
.value-list h4{margin:0 0 .3em;font-family:'Fraunces',serif;color:var(--green-900);font-size:1.15rem;}
.value-list p{margin:0;color:var(--ink-soft);font-size:.96rem;}
@media (max-width:600px){ .value-list li{grid-template-columns:1fr;gap:8px;} }

/* ---------- Donate tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;}
@media (max-width:860px){.tiers{grid-template-columns:1fr;}}
.tier{border:1px solid var(--line);padding:36px 30px;background:var(--paper);display:flex;flex-direction:column;gap:14px;}
.tier .amount{font-family:'Fraunces',serif;font-size:2.1rem;color:var(--green-900);font-weight:600;}
.tier.featured{border-color:var(--gold-500);border-width:2px;position:relative;}
.tier.featured::before{
  content:"Suggested";position:absolute;top:-13px;left:30px;
  background:var(--gold-500);color:var(--green-900);
  font-family:'IBM Plex Mono',monospace;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;
}
.tier ul{margin:0;padding-left:18px;color:var(--ink-soft);font-size:.92rem;}
.tier ul li{margin-bottom:6px;}

.giving-info{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:64px;}
@media (max-width:760px){.giving-info{grid-template-columns:1fr;}}
.giving-info .cell{background:var(--paper);padding:36px;}
.giving-info .cell h4{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-500);margin-bottom:14px;}
.giving-info .cell p, .giving-info .cell a{color:var(--ink-soft);font-size:.96rem;}
.giving-info .cell a{color:var(--green-900);text-decoration:underline;text-underline-offset:3px;}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;gap:40px;}}
.contact-card{border:1px solid var(--line);padding:30px;margin-bottom:18px;}
.contact-card h4{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-500);margin-bottom:10px;}
.contact-card a{color:var(--green-900);font-weight:500;text-decoration:underline;text-underline-offset:3px;}

form.contact-form{display:flex;flex-direction:column;gap:18px;}
form.contact-form label{
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:8px;display:block;
}
form.contact-form input, form.contact-form textarea{
  width:100%;border:1px solid var(--line);background:var(--paper);
  padding:13px 14px;font-family:'Work Sans',sans-serif;font-size:.96rem;color:var(--ink);
  border-radius:2px;
}
form.contact-form input:focus, form.contact-form textarea:focus{outline:2px solid var(--gold-500);outline-offset:1px;}
form.contact-form textarea{resize:vertical;min-height:120px;}

/* ---------- Footer ---------- */
footer.site{background:var(--green-900);color:rgba(250,248,243,.8);padding:64px 0 28px;}
.footer-grid{display:grid;grid-template-columns:1.3fr .8fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(250,248,243,.14);}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px;}}
@media (max-width:600px){.footer-grid{grid-template-columns:1fr;gap:32px;}}
.footer-brand{display:flex;gap:12px;align-items:center;margin-bottom:16px;}
.footer-brand img{height:46px;width:46px;border-radius:50%;}
.footer-brand span{font-family:'Fraunces',serif;font-size:1.05rem;color:var(--paper);}
footer.site h5{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-300);margin:0 0 16px;}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
footer.site a:hover{color:var(--gold-300);}
.footer-bottom{display:flex;justify-content:space-between;padding-top:24px;font-size:.82rem;flex-wrap:wrap;gap:12px;color:rgba(250,248,243,.55);}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold-500); outline-offset:2px;
}