/* ============================================================
   ROOTLINE — shared stylesheet
   Palette: deep forest ink, warm stone paper, root brown, gold thread
   ============================================================ */

@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&display=swap');

:root{
  --ink:        #14241A;   /* near-black green, primary text */
  --forest:     #1F3D2B;   /* deep forest green, primary dark */
  --paper:      #EFE9DC;   /* warm stone paper, page background */
  --paper-lt:   #FBF8F1;   /* lighter paper, card surfaces */
  --brown:      #6B4226;   /* root brown, secondary accent */
  --gold:       #B8901F;   /* gold thread, links / highlights */
  --gold-soft:  #E4CE93;   /* pale gold, tags / hovers */
  --line:       #D8CFB8;   /* hairline rule on paper */

  --display: 'Fraunces', serif;
  --body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --max: 1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:var(--gold);text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px;
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  color:var(--forest);
  line-height:1.15;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.4rem,5vw,4rem); font-weight:700;}
h2{font-size:clamp(1.7rem,3vw,2.4rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1em;}
.eyebrow{
  font-family:var(--body);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brown);
  font-weight:600;
}

.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}
section{padding:72px 0;}
.hairline{border:none; border-top:1px solid var(--line); margin:0;}

/* ---------- header / nav ---------- */
header.site{
  position:sticky; top:0; z-index:40;
  background:rgba(239,233,220,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{
  max-width:var(--max); margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{display:flex; align-items:center; gap:10px; color:var(--forest); font-family:var(--display); font-weight:700; font-size:1.25rem;}
.brand svg{width:30px; height:30px; flex:none;}
.brand:hover{text-decoration:none;}
nav.links{display:flex; gap:28px; align-items:center; flex-wrap:wrap;}
nav.links a{
  color:var(--ink); font-size:.92rem; font-weight:500;
  padding-bottom:3px; border-bottom:2px solid transparent;
}
nav.links a:hover, nav.links a[aria-current="page"]{
  color:var(--forest); border-bottom-color:var(--gold); text-decoration:none;
}
.btn{
  display:inline-block; padding:11px 22px; border-radius:3px;
  font-weight:600; font-size:.92rem; border:1px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--forest); color:var(--paper-lt);}
.btn-primary:hover{background:var(--ink); text-decoration:none;}
.btn-outline{background:transparent; border-color:var(--forest); color:var(--forest);}
.btn-outline:hover{background:var(--forest); color:var(--paper-lt); text-decoration:none;}
.btn-gold{background:var(--gold); color:var(--paper-lt);}
.btn-gold:hover{background:var(--brown); text-decoration:none;}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:96px 0 80px;
  background:
    radial-gradient(ellipse at 85% 10%, rgba(184,144,31,.15), transparent 55%),
    var(--forest);
  color:var(--paper-lt);
  overflow:hidden;
}
.hero .wrap{position:relative; z-index:2;}
.hero h1{color:var(--paper-lt); max-width:780px;}
.hero .lede{max-width:640px; font-size:1.15rem; color:#DCE6DC;}
.hero .eyebrow{color:var(--gold-soft);}
.hero-actions{display:flex; gap:16px; margin-top:28px; flex-wrap:wrap;}
.root-motif{
  position:absolute; right:-60px; top:-40px; width:520px; max-width:60vw; opacity:.5; z-index:1;
}

/* ---------- stat / roots strip ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--paper-lt);
}
.stats div{padding:26px 22px; border-right:1px solid var(--line);}
.stats div:last-child{border-right:none;}
.stats .num{font-family:var(--display); font-size:2.1rem; color:var(--forest); font-weight:700;}
.stats .lbl{font-size:.85rem; color:var(--brown); margin-top:4px;}

/* ---------- department / service cards ---------- */
.dept-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:36px;}
.dept-card{
  background:var(--paper-lt); border:1px solid var(--line); border-radius:6px;
  padding:28px 24px; position:relative;
}
.dept-card .idx{font-family:var(--display); font-size:.85rem; color:var(--gold); font-weight:700; letter-spacing:.05em;}
.dept-card h3{margin-top:10px;}
.dept-card p{font-size:.92rem; color:#3B4A3F; margin-bottom:0;}
.dept-card .role{
  margin-top:14px; padding-top:14px; border-top:1px dashed var(--line);
  font-size:.82rem; color:var(--brown); font-weight:600;
}

/* ---------- pathway (how it works) ---------- */
.pathway{list-style:none; margin:36px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
.pathway li{position:relative; padding-top:18px;}
.pathway li::before{content:""; position:absolute; top:0; left:0; width:100%; height:2px; background:var(--gold-soft);}
.pathway .step{font-family:var(--display); color:var(--gold); font-weight:700; font-size:.85rem;}
.pathway h3{font-size:1rem; margin:6px 0 6px;}
.pathway p{font-size:.86rem; color:#3B4A3F;}

/* ---------- funders ---------- */
.funders{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px;}
.funders span{
  border:1px solid var(--line); border-radius:20px; padding:8px 16px;
  font-size:.82rem; color:var(--brown); background:var(--paper-lt);
}

/* ---------- section variants ---------- */
.section-dark{background:var(--forest); color:var(--paper-lt);}
.section-dark h2{color:var(--paper-lt);}
.section-dark .eyebrow{color:var(--gold-soft);}
.section-alt{background:var(--paper-lt); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

/* ---------- people / directors ---------- */
.people-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:36px;}
.person{background:var(--paper-lt); border:1px solid var(--line); border-radius:6px; overflow:hidden;}
.person .photo{
  aspect-ratio:1/1; background:var(--forest);
  display:flex; align-items:center; justify-content:center; color:var(--gold-soft);
}
.person .photo svg{width:46%; height:46%;}
.person .body{padding:18px 20px;}
.person .name{font-family:var(--display); font-weight:600; color:var(--forest); font-size:1.1rem;}
.person .title{font-size:.83rem; color:var(--brown); font-weight:600; margin:2px 0 10px; text-transform:uppercase; letter-spacing:.04em;}
.person p{font-size:.9rem; color:#3B4A3F; margin:0;}

/* ---------- careers / job cards ---------- */
.job-list{display:flex; flex-direction:column; gap:0; margin-top:30px; border-top:1px solid var(--line);}
.job{
  display:grid; grid-template-columns:1fr auto auto; gap:18px; align-items:center;
  padding:24px 4px; border-bottom:1px solid var(--line);
}
.job h3{margin:0 0 4px;}
.job .meta{font-size:.83rem; color:var(--brown);}
.tag{
  font-size:.75rem; font-weight:600; padding:5px 12px; border-radius:20px;
  background:var(--gold-soft); color:var(--brown); white-space:nowrap;
}
.job .apply{white-space:nowrap;}
.status-banner{
  background:var(--gold-soft); border:1px solid var(--gold); color:var(--brown);
  border-radius:6px; padding:14px 20px; font-weight:600; font-size:.9rem; margin-top:28px;
  display:flex; align-items:center; gap:10px;
}

/* ---------- forms ---------- */
form.card{
  background:var(--paper-lt); border:1px solid var(--line); border-radius:8px; padding:32px;
  max-width:640px;
}
.field{margin-bottom:18px;}
label{display:block; font-size:.85rem; font-weight:600; color:var(--forest); margin-bottom:6px;}
input, select, textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:4px;
  font-family:var(--body); font-size:.95rem; background:#fff; color:var(--ink);
}
textarea{min-height:120px; resize:vertical;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form-note{font-size:.82rem; color:var(--brown); margin-top:10px;}

/* ---------- contact info blocks ---------- */
.contact-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:48px; margin-top:36px; align-items:start;}
.info-block{margin-bottom:26px;}
.info-block h3{margin-bottom:6px; font-size:1.05rem;}
.info-block p{font-size:.92rem; color:#3B4A3F;}

/* ---------- footer ---------- */
footer{background:var(--ink); color:#C9CFC7; padding:48px 0 28px;}
footer .wrap{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap;}
footer .brand-f{font-family:var(--display); color:var(--paper-lt); font-size:1.15rem; margin-bottom:8px;}
footer nav{display:flex; gap:20px; flex-wrap:wrap;}
footer a{color:#C9CFC7;}
footer a:hover{color:var(--gold-soft);}
.fine{font-size:.8rem; color:#8B9488; margin-top:30px; text-align:center;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .dept-grid{grid-template-columns:repeat(2,1fr);}
  .stats{grid-template-columns:repeat(2,1fr);}
  .stats div:nth-child(2){border-right:none;}
  .pathway{grid-template-columns:repeat(2,1fr);}
  .people-grid{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr;}
  .job{grid-template-columns:1fr; align-items:flex-start;}
  nav.links{display:none;}
  .field-row{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .dept-grid, .people-grid{grid-template-columns:1fr;}
  .pathway{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr;}
  .stats div{border-right:none; border-bottom:1px solid var(--line);}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}