/* =========================================================
   base.css — design tokens, reset, typography, buttons
   NCSGI · NSBM Centre for Sustainability and Global Impact
   ========================================================= */

:root{
  /* --- brand palette --- */
  --ink:#16241d;
  --ink-soft:#2a3b31;
  --paper:#eef2ea;
  --paper-raised:#f7f9f3;
  --paper-line:#d7ddc9;
  --moss:#2f5233;
  --moss-deep:#1f3a24;
  --gold:#c98a3e;
  --sky:#2e7d9a;
  --clay:#a5472c;
  --text:#1b2a22;
  --text-soft:#4c5c50;

  /* --- runtime accent (swapped per SDG page by the router) --- */
  --accent:#2f5233;
  --accent-soft:#e4ede2;

  /* --- geometry --- */
  --radius-s:6px;
  --radius-m:14px;
  --radius-l:28px;
  --maxw:1200px;
  --shadow:0 18px 40px -22px rgba(20,32,22,0.35);
}

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

/* The hidden attribute has to beat any display rule further down the
   sheet — the browser default is only a UA style, so an author rule
   like `display:flex` silently wins and the element stays visible. */
[hidden]{display:none !important;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
}

body{
  margin:0;
  font-family:'Manrope',sans-serif;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Fraunces',serif;
  font-weight:500;
  line-height:1.08;
  margin:0 0 0.5em;
  color:var(--ink);
  letter-spacing:-0.01em;
}
p{line-height:1.65; color:var(--text-soft); margin:0 0 1em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}

:focus-visible{outline:2.5px solid var(--gold); outline-offset:3px;}

/* ---------- layout helper ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px; border-radius:100px;
  font-weight:700; font-size:14px;
  border:1.5px solid transparent;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background .2s ease;
}
.btn-primary{background:var(--moss); color:#fff;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 26px -12px rgba(47,82,51,0.55);}
.btn-ghost{border-color:var(--ink); color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:#fff;}
.btn-on-accent{background:#fff; color:var(--accent);}
.btn-on-accent:hover{transform:translateY(-2px); box-shadow:0 14px 26px -12px rgba(0,0,0,0.35);}

/* ---------- badges ---------- */
.badge-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
.badge{
  font-size:12px; font-weight:700; padding:6px 12px; border-radius:100px;
  background:var(--accent-soft); color:var(--moss);
}

/* ---------- scroll reveal ---------- */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.reveal.in{opacity:1; transform:translateY(0);}