/* Layout for the SAHA site. Colours and type come from tokens.css (brand single source of truth). */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:var(--fs-body)/var(--lh-body) var(--font);color:var(--ink);background:var(--white)}
a{color:var(--primary)} a:hover{color:var(--accent)}
h1,h2,h3{font-family:var(--font-serif);line-height:var(--lh-tight);margin:0 0 var(--sp-3)}
h2{font-size:var(--fs-h1);color:var(--primary)}
h3{font-size:var(--fs-h2)}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--sp-4)}
section{padding:56px 0;border-top:1px solid var(--slate-200)}
.lead{font-size:17px;color:var(--slate-700);max-width:760px}
.muted{color:var(--slate-500);font-size:var(--fs-small)}

/* header / nav */
header{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.95);border-bottom:1px solid var(--slate-200)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);height:60px}
.brand{font-family:var(--font-serif);font-size:20px;font-weight:700;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px}
.brand i{width:10px;height:10px;background:var(--accent);display:inline-block}
nav a{margin-left:18px;color:var(--slate-700);text-decoration:none;font-size:var(--fs-small)}
nav a:hover{color:var(--primary)}

/* hero */
.hero{border-top:0;padding:48px 0 40px;background:linear-gradient(180deg,var(--blue-50),var(--white))}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero h1{font-size:var(--fs-display);color:var(--ink)}
.hero img{width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow-2);background:var(--white)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);margin:var(--sp-6) 0}
.stat{background:var(--white);border:1px solid var(--slate-200);border-radius:var(--r-md);padding:var(--sp-3)}
.stat b{display:block;font-family:var(--font-serif);font-size:26px;color:var(--primary)}
.stat span{font-size:var(--fs-caption);color:var(--slate-600)}
.btn{display:inline-block;padding:10px 18px;border-radius:var(--r-sm);background:var(--primary);color:var(--white);text-decoration:none;font-weight:600;margin:0 8px 8px 0}
.btn:hover{background:var(--blue-700);color:var(--white)}
.btn.ghost{background:var(--white);color:var(--primary);border:1px solid var(--primary)}

/* cards & grids */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-4)}
.card{border:1px solid var(--slate-200);border-radius:var(--r-md);padding:var(--sp-4);background:var(--white)}
.card h3{font-size:var(--fs-h3);margin-bottom:6px}
.card p{margin:0;color:var(--slate-600);font-size:var(--fs-small)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.split img{width:100%;border-radius:var(--r-md);border:1px solid var(--slate-200)}
pre{background:var(--slate-100);border-radius:var(--r-sm);padding:var(--sp-3);overflow-x:auto;font:12.5px/1.5 var(--font-mono)}
.badge{font-size:var(--fs-micro);background:var(--crimson-50);color:var(--accent);border-radius:4px;padding:1px 6px;margin-left:6px;vertical-align:middle}

/* lists */
.list{list-style:none;padding:0;margin:0}
.list li{padding:10px 0;border-bottom:1px solid var(--slate-200)}
.list li small{display:block;color:var(--slate-500)}
.year{font-family:var(--font-serif);color:var(--accent);margin:var(--sp-6) 0 var(--sp-2)}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sp-3)}
.people div{padding:var(--sp-3);border-left:3px solid var(--primary);background:var(--slate-50)}
.people small{display:block;color:var(--slate-500)}
details{margin-top:var(--sp-4)} summary{cursor:pointer;color:var(--primary)}
.authors{columns:4 180px;font-size:var(--fs-small);color:var(--slate-700)}

/* partners & footer */
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:28px 40px}
.logos img{height:44px;width:auto;object-fit:contain}
.logo-group{margin-bottom:var(--sp-6)}
.logo-group h3{font-family:var(--font);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.08em;color:var(--slate-500)}
footer{background:var(--ink);color:var(--slate-300);padding:32px 0;font-size:var(--fs-small)}
footer a{color:var(--white)}

@media (max-width:820px){
  .hero .wrap,.split{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  nav{display:none}
}
a.card{display:block;text-decoration:none;color:inherit} a.card:hover{border-color:var(--primary);box-shadow:var(--shadow-1)}

/* v2: logo, tabs, hero pair, team avatars */
.brand img{width:32px;height:32px}
nav a.on{color:var(--primary);font-weight:700;border-bottom:2px solid var(--accent);padding-bottom:3px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.pair img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-md);box-shadow:var(--shadow-2)}
.pair figcaption{font-size:var(--fs-caption);color:var(--slate-600);margin-top:6px}
.card.wide{display:block}
pre.cite{white-space:pre-wrap;font-family:var(--font);font-size:var(--fs-small)}
.people div{display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:center}
.people b{font-weight:600;grid-column:2}
.people small{grid-column:2;margin:0}
.people .ph,.people img{grid-row:1 / span 2}
.ph,.people img{width:44px;height:44px;border-radius:50%;flex:none;object-fit:cover}
.ph{display:inline-flex;align-items:center;justify-content:center;background:var(--blue-100);color:var(--primary);font-weight:700;font-size:13px}

/* v3: footer contact, coverage chart */
footer p{margin:0 0 8px} footer .fine{color:var(--slate-400);font-size:var(--fs-caption)}
.legend{display:flex;gap:18px;font-size:var(--fs-small);color:var(--slate-600);margin:12px 0}
.legend i{display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:6px}
#organChart svg{width:100%;height:auto;display:block}
.tip{position:fixed;pointer-events:none;background:var(--ink);color:#fff;font-size:12px;padding:6px 9px;border-radius:6px;z-index:10}
.tablewrap{overflow-x:auto;margin-top:16px}
table{border-collapse:collapse;width:100%;font-size:var(--fs-small);min-width:640px}
th{text-align:left;font-weight:400;color:var(--slate-500);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:8px 10px 8px 0;border-bottom:1px solid var(--slate-300)}
td{padding:7px 10px 7px 0;border-bottom:1px solid var(--slate-200);font-variant-numeric:tabular-nums}
th.n,td.n{text-align:right;padding-right:18px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px}
.dot.cx{background:var(--primary)} .dot.pr{background:var(--primary);opacity:.45} .dot.xe{background:var(--teal)}
.state{display:inline-block;font-size:11px;padding:1px 7px;border-radius:999px;border:1px solid var(--slate-300);color:var(--slate-600)}
.state.dz{border-color:var(--accent);color:var(--accent)}

/* v4: consortium storytelling sections, mobile nav */
.hero .wrap>*,.split>*{min-width:0}
.eyebrow{font-size:var(--fs-caption);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 var(--sp-2)}
section.soft{background:var(--slate-50)}
.mission{background:var(--blue-700);color:var(--blue-100);border-top:0}
.mission .wrap{max-width:900px}
.mission .eyebrow{color:var(--crimson-300)}
.mission .quote{font-family:var(--font-serif);font-size:24px;line-height:1.35;color:var(--white);margin:0 0 var(--sp-4)}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);counter-reset:s}
.steps li{counter-increment:s;background:var(--white);border:1px solid var(--slate-200);border-radius:var(--r-md);padding:var(--sp-4)}
.steps li::before{content:counter(s);display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--primary);color:var(--white);font-weight:700;align-items:center;justify-content:center;margin-bottom:var(--sp-2)}
.steps b{display:block;font-family:var(--font-serif);font-size:var(--fs-h3);margin-bottom:4px}
.steps span{font-size:var(--fs-small);color:var(--slate-600)}
.timeline{list-style:none;padding:0 0 0 20px;margin:0;border-left:2px solid var(--blue-100)}
.timeline li{position:relative;padding:0 0 var(--sp-4) var(--sp-4)}
.timeline li::before{content:"";position:absolute;left:-27px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--primary);border:2px solid var(--white)}
.timeline li.next::before{background:var(--accent)}
.timeline time{display:block;font-weight:700;color:var(--primary);font-size:var(--fs-small)}
.timeline li.next time{color:var(--accent)}
.thanks{text-align:center;padding:40px 0}
.thanks p{font-family:var(--font-serif);font-size:20px;color:var(--slate-700);max-width:680px;margin:0 auto}
.give{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4);margin-top:var(--sp-8);padding:var(--sp-6);border-radius:var(--r-lg);background:var(--crimson-50);border:1px solid var(--crimson-300)}
.give p{margin:0;max-width:640px;color:var(--slate-700)}
details p{color:var(--slate-700);margin:8px 0 0}
#support details{border-bottom:1px solid var(--slate-200);padding:12px 0;margin:0}
#support summary{font-weight:600}
.cta{background:linear-gradient(120deg,var(--primary),var(--blue-700));color:var(--blue-100);border-top:0}
.cta .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.cta h2{color:var(--white);margin-bottom:6px}
.cta p{margin:0}
.btn.light{background:var(--white);color:var(--primary)}
.cta .btn.ghost{background:transparent;color:var(--white);border-color:var(--white)}
@media (max-width:820px){
  header .wrap{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:6px;gap:4px}
  nav{display:flex;width:100%;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  nav a{margin:0 16px 0 0;white-space:nowrap}
  .mission .wrap{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .hero h1{font-size:32px}
}
@media (max-width:480px){.steps{grid-template-columns:1fr}}