/* =========================================================
   AHNO — Afghanistan Humanitarian National Organization
   Design system
   ========================================================= */

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

:root{
  /* --- palette, drawn from the AHNO emblem --- */
  --plum-950:#241530;
  --plum-900:#2E1B3B;
  --plum-800:#3E2650;
  --plum-600:#5B3566;
  --plum-400:#8A6796;

  --amber-600:#B8701C;
  --amber-500:#D98A2B;
  --amber-300:#F0B863;

  --teal-600:#1E6E66;
  --teal-500:#2E9C90;
  --teal-300:#7FC4BB;

  --paper:#FBF6EC;
  --paper-alt:#F2E9D8;
  --paper-deep:#E9DCC3;

  --ink:#251A2B;
  --ink-muted:#5E5064;
  --ink-soft:#8A7C8F;

  --line:#DFCFAE;
  --line-dark:rgba(251,246,236,0.18);

  --radius-s:2px;
  --radius-m:4px;

  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  color:var(--plum-950);
  margin:0 0 .5em;
  line-height:1.15;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.4rem,4.2vw,3.6rem); font-weight:600;}
h2{font-size:clamp(1.7rem,2.6vw,2.35rem);}
h3{font-size:1.28rem; font-weight:600;}
h4{font-size:1.05rem; font-weight:600; color:var(--plum-800);}

p{margin:0 0 1.1em; max-width:70ch;}
a{color:var(--teal-600); text-decoration:none;}
a:hover{color:var(--amber-600);}
ul,ol{margin:0 0 1.1em; padding-left:1.25em;}
li{margin-bottom:.45em;}
img{max-width:100%; display:block;}

:focus-visible{outline:2px solid var(--amber-500); outline-offset:3px;}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px;}

@media (max-width:720px){
  .wrap{padding:0 20px;}
  body{font-size:16px;}
}

/* ---------- top utility strip ---------- */
.strip{
  background:var(--plum-950);
  color:var(--paper-alt);
  font-size:.82rem;
}
.strip .wrap{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; padding-bottom:8px;
  flex-wrap:wrap; gap:6px 20px;
}
.strip a{color:var(--paper-alt); opacity:.85;}
.strip a:hover{opacity:1; color:var(--amber-300);}
.strip .strip-reg{opacity:.7;}

/* ---------- header / nav ---------- */
header.site{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40;
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:24px;
}
.brand{display:flex; align-items:center; gap:14px; color:var(--ink); }
.brand img{height:56px; width:auto;}
.brand-text .name{
  font-family:'Fraunces',serif; font-weight:600; font-size:1.18rem;
  color:var(--plum-950); line-height:1.1;
}
.brand-text .tag{font-size:.74rem; letter-spacing:.03em; color:var(--ink-soft);}

nav.primary ul{
  list-style:none; margin:0; padding:0; display:flex; gap:2px; align-items:center;
}
nav.primary a{
  display:block; padding:10px 15px; color:var(--ink); font-weight:600; font-size:.95rem;
  border-bottom:2px solid transparent;
}
nav.primary a:hover{color:var(--amber-600);}
nav.primary li.active a{color:var(--plum-800); border-bottom-color:var(--amber-500);}
.nav-cta{
  background:var(--plum-950); color:var(--paper)!important; padding:10px 20px!important;
  border-radius:var(--radius-s); margin-left:6px;
}
.nav-cta:hover{background:var(--amber-600); color:var(--paper)!important;}

.nav-toggle{display:none;}

@media (max-width:940px){
  nav.primary ul{
    position:absolute; left:0; right:0; top:100%;
    background:var(--paper); flex-direction:column; align-items:stretch;
    border-bottom:1px solid var(--line);
    display:none;
  }
  nav.primary.open ul{display:flex;}
  nav.primary a{padding:14px 32px; border-bottom:1px solid var(--line);}
  .nav-cta{margin:10px 32px; text-align:center;}
  .nav-toggle{
    display:block; background:none; border:1px solid var(--line); border-radius:var(--radius-s);
    padding:8px 12px; font-size:1.1rem; color:var(--plum-950); cursor:pointer;
  }
}

/* ---------- hero ---------- */
.hero{
  background:var(--plum-950);
  color:var(--paper);
  position:relative;
  overflow:hidden;
}
.hero .wrap{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px;
  align-items:center;
  padding-top:76px; padding-bottom:64px;
}
.hero-emblem{
  position:absolute; right:-90px; top:50%; transform:translateY(-50%);
  width:620px; opacity:.1; filter:brightness(0) invert(1);
  pointer-events:none;
}
.hero .eyebrow-line{
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
  color:var(--amber-300); font-weight:600; font-size:.85rem;
}
.hero .eyebrow-line::before{content:""; width:28px; height:2px; background:var(--amber-300); display:block;}
.hero h1{color:#fff; max-width:14ch;}
.hero p.lede{color:var(--paper-alt); font-size:1.15rem; max-width:46ch;}
.hero-actions{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap;}

.btn{
  display:inline-block; padding:13px 26px; font-weight:600; font-size:.96rem;
  border-radius:var(--radius-s); border:1px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--amber-500); color:var(--plum-950);}
.btn-primary:hover{background:var(--amber-300); color:var(--plum-950);}
.btn-ghost{border-color:var(--line-dark); color:#fff;}
.btn-ghost:hover{border-color:var(--amber-300); color:var(--amber-300);}
.btn-dark{background:var(--plum-950); color:var(--paper);}
.btn-dark:hover{background:var(--amber-600); color:#fff;}

.hero-stats{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line-dark);
  border:1px solid var(--line-dark);
}
.hero-stats div{background:var(--plum-900); padding:22px 20px;}
.hero-stats .num{
  font-family:'Fraunces',serif; font-size:2.1rem; color:var(--amber-300); font-weight:600; line-height:1;
}
.hero-stats .label{font-size:.83rem; color:var(--paper-alt); margin-top:8px; line-height:1.35;}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; padding-top:48px;}
  .hero-emblem{display:none;}
}

/* ---------- page header (non-home) ---------- */
.page-head{
  background:var(--plum-950); color:var(--paper); position:relative; overflow:hidden;
}
.page-head .wrap{padding:56px 32px 48px; position:relative; z-index:2;}
.page-head .kicker{color:var(--amber-300); font-weight:600; font-size:.85rem; letter-spacing:.02em; margin-bottom:10px;}
.page-head h1{color:#fff; max-width:20ch; margin-bottom:14px;}
.page-head p{color:var(--paper-alt); max-width:60ch; font-size:1.08rem; margin-bottom:0;}
.page-head-emblem{
  position:absolute; right:-60px; top:-40px; width:340px; opacity:.08;
  filter:brightness(0) invert(1);
}

/* ---------- sections ---------- */
section{padding:72px 0;}
section.alt{background:var(--paper-alt);}
section.dark{background:var(--plum-950); color:var(--paper);}
section.dark h2, section.dark h3, section.dark h4{color:#fff;}
section.dark p{color:var(--paper-alt);}
section.dark .value-card{background:var(--paper);}
section.dark .value-card h3{color:var(--plum-950);}
section.dark .value-card p{color:var(--ink-muted);}
section.tight{padding:48px 0;}

.section-head{max-width:62ch; margin-bottom:44px;}
.section-head .kicker{
  color:var(--amber-600); font-weight:700; font-size:.83rem; margin-bottom:10px; display:block;
}
section.dark .section-head .kicker{color:var(--amber-300);}
.section-head h2{margin-bottom:.35em;}
.section-head p{color:var(--ink-muted); font-size:1.05rem;}

hr.rule{border:none; border-top:1px solid var(--line); margin:56px 0;}

/* ---------- intro / two column ---------- */
.two-col{display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:start;}
@media (max-width:860px){.two-col{grid-template-columns:1fr;}}

.lead-quote{
  font-family:'Fraunces',serif; font-size:1.5rem; font-weight:500; color:var(--plum-800);
  line-height:1.4; border-left:3px solid var(--amber-500); padding-left:24px; margin:0;
}

/* ---------- cards ---------- */
.grid{display:grid; gap:28px;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){
  .grid.cols-3, .grid.cols-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .grid.cols-3, .grid.cols-4, .grid.cols-2{grid-template-columns:1fr;}
}

.value-card{
  background:var(--paper); border:1px solid var(--line); padding:28px 26px;
  border-top:3px solid var(--teal-500);
}
.value-card:nth-child(3n+2){border-top-color:var(--amber-500);}
.value-card:nth-child(3n+3){border-top-color:var(--plum-600);}
.value-card h3{font-size:1.12rem; margin-bottom:.4em;}
.value-card p{margin-bottom:0; font-size:.97rem; color:var(--ink-muted);}

.focus-card{
  background:var(--paper); border:1px solid var(--line); padding:26px 24px;
  display:flex; flex-direction:column; gap:10px;
}
.focus-card h3{font-size:1.08rem;}
.focus-card p{font-size:.94rem; color:var(--ink-muted); margin-bottom:0;}
.focus-icon{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--paper-alt); color:var(--teal-600); font-family:'Fraunces',serif; font-weight:600;
}

/* ---------- issue list (numbered, genuinely sequential) ---------- */
.issue{
  display:grid; grid-template-columns:64px 1fr; gap:22px; padding:30px 0; border-top:1px solid var(--line);
}
.issue:last-child{border-bottom:1px solid var(--line);}
.issue .num{
  font-family:'Fraunces',serif; font-size:2rem; color:var(--amber-500); font-weight:600; line-height:1;
}
.issue h3{margin-bottom:.4em;}
.issue p{color:var(--ink-muted); margin-bottom:.6em; font-size:.98rem;}
.issue p:last-child{margin-bottom:0;}

/* ---------- stat band ---------- */
.stat-band{
  display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line);
}
.stat-band div{padding:30px 26px; border-left:1px solid var(--line);}
.stat-band div:first-child{border-left:none;}
.stat-band .num{font-family:'Fraunces',serif; font-size:2.3rem; color:var(--plum-800); font-weight:600;}
.stat-band .label{font-size:.9rem; color:var(--ink-muted); margin-top:6px;}
@media (max-width:700px){
  .stat-band{grid-template-columns:1fr;}
  .stat-band div{border-left:none; border-top:1px solid var(--line);}
  .stat-band div:first-child{border-top:none;}
}

/* ---------- timeline / mountain divider ---------- */
.ridge{display:block; width:100%; height:44px;}
.ridge path{fill:var(--paper);}
.ridge.alt path{fill:var(--paper-alt);}
.ridge.dark-to-paper path{fill:var(--paper);}
.ridge.paper-to-dark path{fill:var(--plum-950);}

/* ---------- province chips ---------- */
.chip-row{display:flex; flex-wrap:wrap; gap:10px;}
.chip{
  border:1px solid var(--line); padding:8px 16px; font-size:.9rem; font-weight:600;
  color:var(--plum-800); background:var(--paper); border-radius:2px;
}
.chip.hq{background:var(--plum-950); color:#fff; border-color:var(--plum-950);}

/* ---------- org chart ---------- */
.org-tier{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:0; position:relative;}
.org-box{
  background:var(--paper); border:1px solid var(--plum-600); color:var(--plum-950);
  padding:11px 16px; font-size:.86rem; font-weight:600; text-align:center; border-radius:2px;
  min-width:120px;
}
.org-box.top{background:var(--plum-950); color:#fff; border-color:var(--plum-950); min-width:200px;}
.org-box.second{background:var(--teal-600); color:#fff; border-color:var(--teal-600);}
.org-box.third{background:var(--amber-500); color:var(--plum-950); border-color:var(--amber-500);}
.org-connector{width:1px; height:26px; background:var(--line-dark); margin:0 auto; background:var(--ink-soft);}
.org-branches{
  display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:22px;
}
@media (max-width:980px){.org-branches{grid-template-columns:repeat(3,1fr);}}
@media (max-width:600px){.org-branches{grid-template-columns:repeat(2,1fr);}}
.org-branch{border-top:2px solid var(--plum-600); padding-top:14px;}
.org-branch h4{font-size:.88rem; margin-bottom:8px; color:var(--plum-800);}
.org-branch ul{list-style:none; padding:0; margin:0; font-size:.83rem; color:var(--ink-muted);}
.org-branch li{margin-bottom:5px; padding-left:0;}

/* ---------- team table ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--line);}
table{width:100%; border-collapse:collapse; font-size:.93rem; background:var(--paper);}
thead th{
  text-align:left; background:var(--plum-950); color:#fff; padding:13px 16px; font-weight:600;
  font-size:.82rem; letter-spacing:.02em;
}
tbody td{padding:12px 16px; border-top:1px solid var(--line);}
tbody tr:nth-child(even){background:var(--paper-alt);}
tbody tr:hover{background:#F0E3C9;}
td.num-cell{color:var(--ink-soft); width:40px;}

/* ---------- policy list ---------- */
.policy-list{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); border:1px solid var(--line);}
.policy-item{background:var(--paper); padding:22px 24px;}
.policy-item h4{margin-bottom:6px; font-size:1rem;}
.policy-item p{font-size:.92rem; color:var(--ink-muted); margin-bottom:0;}
@media (max-width:760px){.policy-list{grid-template-columns:1fr;}}

/* ---------- AAP / GPI mechanism grid ---------- */
.mech{border-left:3px solid var(--teal-500); padding-left:20px;}
.mech h4{margin-bottom:6px;}
.mech p{font-size:.94rem; color:var(--ink-muted); margin-bottom:0;}

/* ---------- partner / cluster badges ---------- */
.badge-grid{display:flex; flex-wrap:wrap; gap:12px;}
.badge{
  border:1px solid var(--line); background:var(--paper); padding:10px 18px; font-weight:600;
  font-size:.9rem; color:var(--plum-800);
}

/* ---------- value proposition strengths ---------- */
.strength{
  display:grid; grid-template-columns:auto 1fr; gap:18px; padding:22px 0; border-top:1px solid var(--line);
  align-items:start;
}
.strength:last-child{border-bottom:1px solid var(--line);}
.strength .mark{
  width:34px; height:34px; border-radius:50%; background:var(--amber-500); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:var(--plum-950); font-weight:700;
  font-family:'Fraunces',serif;
}
.strength h4{margin-bottom:5px;}
.strength p{font-size:.95rem; color:var(--ink-muted); margin-bottom:0;}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--amber-500); color:var(--plum-950); padding:56px 0; text-align:left;
}
.cta-banner .wrap{display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;}
.cta-banner h2{color:var(--plum-950); margin-bottom:.25em;}
.cta-banner p{margin-bottom:0; color:var(--plum-800); max-width:50ch;}

/* ---------- footer ---------- */
footer.site{background:var(--plum-950); color:var(--paper-alt); padding-top:60px;}
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px;
  border-bottom:1px solid var(--line-dark);
}
.footer-grid h4{color:#fff; font-size:.92rem; margin-bottom:16px; letter-spacing:.02em;}
.footer-grid ul{list-style:none; padding:0; margin:0; font-size:.9rem;}
.footer-grid li{margin-bottom:9px;}
.footer-grid a{color:var(--paper-alt);}
.footer-grid a:hover{color:var(--amber-300);}
.footer-brand{display:flex; gap:14px; align-items:flex-start; margin-bottom:16px;}
.footer-brand img{height:50px; filter:brightness(0) invert(1); opacity:.92;}
.footer-brand .name{font-family:'Fraunces',serif; color:#fff; font-weight:600; font-size:1.05rem;}
.footer-brand .reg{font-size:.78rem; color:var(--ink-soft); margin-top:2px;}
.footer-desc{font-size:.9rem; color:var(--paper-alt); max-width:34ch;}
.footer-bottom{
  display:flex; justify-content:space-between; padding:22px 0; font-size:.82rem; color:var(--ink-soft);
  flex-wrap:wrap; gap:10px;
}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:32px;}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;}
}

/* ---------- misc ---------- */
.eyebrow-inline{color:var(--amber-600); font-weight:700; font-size:.83rem;}
.center{text-align:center;}
.mt-0{margin-top:0;}
.small{font-size:.9rem; color:var(--ink-muted);}