/* ============================================================
   THE CHESTNUT TREE — design tokens
   Palette: forest, bark, moss, gold, parchment, ink
   Display: Fraunces (wonk axis = grain/growth, used sparingly)
   Body: Karla · Utility/field-notes: JetBrains Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..700,0..100,0..1&family=Karla:ital,wght@0,400;0,500;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --forest:#243425;
  --forest-2:#33472F;
  --bark:#5C4433;
  --moss:#7C8A5C;
  --gold:#C69B4A;
  --parchment:#F1EEE2;
  --parchment-2:#E8E2CF;
  --ink:#20261D;
  --paper:#FBFAF6;

  --display: 'Fraunces', serif;
  --body: 'Karla', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --radius: 4px;
  --max: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--display);
  font-variation-settings:"SOFT" 0, "WONK" 1;
  color:var(--forest);
  line-height:1.08;
  margin:0 0 .5em;
  font-weight:600;
}
h1{font-size:clamp(2.4rem,5vw,4.2rem); font-weight:500;}
h2{font-size:clamp(1.7rem,3.2vw,2.6rem);}
h3{font-size:1.3rem;}
p{margin:0 0 1em;}
.eyebrow{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  color:var(--bark);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  margin-bottom:.9em;
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--gold);display:inline-block;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 1.5rem;}
.section{padding:5.5rem 0;}
.section--tight{padding:3.5rem 0;}
.section--moss{background:var(--forest); color:var(--parchment-2);}
.section--moss h2, .section--moss h3{color:var(--paper);}
.section--moss .eyebrow{color:var(--gold);}
.section--parchment{background:var(--parchment);}

/* -------- skip link / focus -------- */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--forest); color:var(--paper); padding:.8em 1.2em; z-index:200;
}
.skip-link:focus{left:1rem; top:1rem;}
a:focus-visible, button:focus-visible{
  outline:3px solid var(--gold); outline-offset:2px;
}

/* -------- header / nav -------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,250,246,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--parchment-2);
}
.nav{
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:1rem 0; position:relative;
}
.brand{
  display:flex; align-items:flex-end;
  text-decoration:none; color:var(--forest);
}
.brand svg{width:30px;height:30px;flex:none;}
.brand img{height:52px;width:auto;flex:none;display:block;}
.nav-links{
  display:flex; align-items:center; gap:1.5rem; list-style:none; margin:0; padding:0; font-size:.78rem;
}
.nav-links > li{display:flex; align-items:center;}
.nav-links a{
  text-decoration:none; text-transform:uppercase; letter-spacing:.08em; font-weight:600; color:var(--forest);
  white-space:nowrap;
}
.nav-links a[aria-current="page"]{color:var(--bark);}
.nav-cta{
  background:transparent; color:var(--forest) !important; text-decoration:none;
  padding:.65rem 1.4rem; border-radius:999px; font-size:.75rem; font-weight:700;
  white-space:nowrap; border:1px solid var(--forest);
  text-transform:uppercase; letter-spacing:.08em; margin-left:1.5rem;
}
.nav-cta:hover{background:var(--forest); color:var(--paper) !important;}

.lang-switch--top{margin-left:1.5rem;}

/* ---- per-item dropdown toggle (Education / Join us subpages) ---- */
.has-dropdown{position:relative; gap:.15rem;}
.dropdown-checkbox{display:none;}
.dropdown-caret{
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--forest); width:18px; height:18px; flex:none;
}
.dropdown-caret svg{transition:transform .2s ease;}
.dropdown-checkbox:checked ~ .dropdown-caret svg{transform:rotate(180deg);}
.dropdown{
  display:none; list-style:none; margin:0; padding:.5rem 0;
  position:absolute; top:100%; left:0; margin-top:.9rem;
  background:var(--paper); border:1px solid var(--parchment-2); border-radius:var(--radius);
  min-width:230px; box-shadow:0 12px 28px rgba(32,38,29,.1); z-index:50;
}
.dropdown-checkbox:checked ~ .dropdown{display:block;}
.dropdown li{list-style:none;}
.dropdown a{
  display:block; padding:.6rem 1.1rem; text-transform:none; letter-spacing:0;
  font-weight:500; color:var(--ink); font-size:.85rem;
}
.dropdown a:hover{background:var(--parchment);}

/* ---- overall hamburger: fallback only on narrow viewports ---- */
.nav-toggle-checkbox{display:none;}
.nav-toggle-label{
  display:none; align-items:center; justify-content:center;
  cursor:pointer; color:var(--forest); margin-left:.5rem; padding:.6rem;
  min-width:44px; min-height:44px;
}
.nav-toggle-label .icon-close{display:none;}
.nav-toggle-checkbox:checked ~ .nav-toggle-label .icon-burger{display:none;}
.nav-toggle-checkbox:checked ~ .nav-toggle-label .icon-close{display:block;}

@media (max-width:880px){
  .brand img{height:42px;}
  .nav{flex-wrap:wrap; position:relative;}
  .nav-toggle-label{display:flex;}
  .nav-links, .nav-cta, .lang-switch--top{display:none;}

  .nav-toggle-checkbox:checked ~ .nav-links{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-top:1px solid var(--parchment-2);
    box-shadow:0 16px 32px rgba(32,38,29,.12);
    max-height:80vh; overflow-y:auto; padding:.5rem 0;
  }
  .nav-toggle-checkbox:checked ~ .nav-links > li{
    border-bottom:1px solid var(--parchment-2); width:100%;
    flex-direction:row; flex-wrap:wrap; justify-content:space-between;
  }
  .nav-toggle-checkbox:checked ~ .nav-links > li > a{display:block; padding:1.1rem 1.5rem; flex:1;}
  .nav-toggle-checkbox:checked ~ .nav-cta{
    display:flex; justify-content:center; margin:1rem 1.5rem;
  }
  .nav-toggle-checkbox:checked ~ .lang-switch--top{
    display:flex; justify-content:center; margin:0 0 1rem;
  }

  /* subpage dropdowns become inline accordions inside the mobile panel */
  .has-dropdown{width:100%;}
  .dropdown-caret{padding:1.1rem 1.5rem; width:auto; height:auto;}
  .dropdown{
    position:static; display:none; width:100%; margin:0; box-shadow:none; border:none;
    border-radius:0; background:var(--parchment); padding:.3rem 0;
  }
  .dropdown-checkbox:checked ~ .dropdown{display:block;}
  .dropdown a{padding:.7rem 1.5rem .7rem 2.5rem;}
}

.nav-toggle{display:none;}
.lang-switch{
  display:flex; gap:.4rem; font-family:var(--mono); font-size:.75rem;
  color:var(--bark);
}
.lang-switch a{text-decoration:none; padding:.15rem .35rem; border-radius:3px;}
.lang-switch a[aria-current="true"]{background:var(--forest); color:var(--paper);}

/* -------- buttons -------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:700; text-decoration:none; padding:.85em 1.5em;
  border-radius:var(--radius); font-size:.98rem; border:1px solid transparent;
  cursor:pointer;
}
.btn-primary{background:var(--gold); color:var(--ink);}
.btn-primary:hover{background:#B7893C;}
.btn-outline{border-color:currentColor; background:transparent;}
.btn-outline:hover{background:rgba(255,255,255,.08);}
.section--parchment .btn-outline, .section:not(.section--moss) .btn-outline{border-color:var(--forest); color:var(--forest);}

/* -------- hero -------- */
.hero{
  position:relative; min-height:86vh; display:flex; align-items:flex-end;
  color:var(--paper); overflow:hidden;
}
.hero-media{position:absolute; inset:0; z-index:0;}
.hero-media img{width:100%; height:100%; object-fit:cover;}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(32,38,29,.15) 0%, rgba(32,38,29,.78) 92%);
}
.hero-content{position:relative; z-index:1; padding:3.5rem 0 4.5rem;}
.hero h1{color:var(--paper); max-width:14ch;}
.hero p.lede{max-width:46ch; font-size:1.15rem; color:var(--parchment-2);}
.hero-actions{display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.6rem;}
.hero-facts{
  display:flex; gap:2.2rem; flex-wrap:wrap; margin-top:3rem;
  border-top:1px solid rgba(255,255,255,.25); padding-top:1.4rem;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.03em;
}
.hero-facts strong{display:block; font-family:var(--display); font-size:1.5rem; color:var(--gold); font-weight:600;}

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

.card{
  background:var(--paper); border:1px solid var(--parchment-2); border-radius:var(--radius);
  padding:1.8rem; height:100%;
}
.card h3{margin-bottom:.4rem;}
.card .tag{font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--moss);}

.photo{border-radius:var(--radius); overflow:hidden;}
.social-follow{
  display:flex; align-items:center; gap:.9rem; padding:1.3rem 1.6rem;
  background:var(--parchment); border:1px solid var(--parchment-2); border-radius:var(--radius);
}
.social-follow .icon{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:44px; height:44px; border-radius:50%; background:var(--forest); color:var(--paper);
}
.social-follow .text{flex:1; margin-right:1.5rem;}
.social-follow .text strong{display:block; font-family:var(--display); font-size:1.05rem; color:var(--forest);}
.social-follow .text span{font-family:var(--mono); font-size:.8rem; color:var(--bark);}
.social-follow .btn{flex:none;}
.contact-social{display:inline-flex; align-items:center; gap:.5rem;}
.contact-social svg{flex:none;}
.video-embed{position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:var(--ink);}
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.video-embed--vertical{aspect-ratio:9/16; max-width:320px; margin:0 auto;}
.map-embed{width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; border:1px solid var(--parchment-2);}
.map-embed iframe{width:100%; height:100%; border:0; display:block;}
.partner-card{
  background:var(--paper); border:1px solid var(--parchment-2); border-radius:var(--radius);
  padding:2rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.9rem;
}
.partner-logo{
  height:70px; width:100%; display:flex; align-items:center; justify-content:center;
}
.partner-logo img{max-height:70px; max-width:180px; object-fit:contain;}
.photo img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;}

/* -------- leaf divider -------- */
.leaf-divider{display:flex; justify-content:center; padding:.5rem 0;}
.leaf-divider svg{width:64px; height:20px; color:var(--moss);}

/* -------- tree-ring stage diagram -------- */
.rings{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; align-items:start;
}
@media (max-width:800px){.rings{grid-template-columns:1fr 1fr;}}
.ring-stage{text-align:center;}
.ring-stage svg{width:100%; max-width:150px; margin:0 auto 1rem;}
.ring-stage .ages{font-family:var(--mono); font-size:.78rem; color:var(--bark);}
.ring-stage h3{font-size:1.05rem; margin-bottom:.3rem;}

/* -------- quote -------- */
.quote{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.3rem,2.6vw,2rem); color:var(--forest); max-width:34ch;
  border-left:3px solid var(--gold); padding-left:1.2rem;
}
.quote cite{display:block; font-family:var(--mono); font-style:normal; font-size:.75rem; margin-top:.9rem; color:var(--bark);}

/* -------- footer -------- */
.site-footer{background:var(--forest); color:var(--parchment-2); padding:4rem 0 2rem; font-size:.92rem;}
.site-footer h3{color:var(--paper); font-size:1rem; font-family:var(--body); font-weight:700; margin-bottom:1rem;}
.site-footer a{text-decoration:none; opacity:.85;}
.site-footer a:hover{opacity:1; text-decoration:underline;}
.footer-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-bottom{
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.15);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-family:var(--mono); font-size:.75rem; opacity:.7;
}

/* -------- breadcrumb / page hero (inner pages) -------- */
.page-hero{padding:3.2rem 0 2.5rem; background:var(--parchment);}
.breadcrumb{font-family:var(--mono); font-size:.75rem; color:var(--bark); margin-bottom:1rem;}
.breadcrumb a{text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}

/* -------- manifesto (large cascading statement) -------- */
.manifesto{padding:6rem 0 5rem; text-align:center;}
.manifesto .eyebrow{justify-content:center;}
.manifesto p{
  font-family:var(--display); font-weight:400; font-style:italic;
  font-variation-settings:"SOFT" 30, "WONK" 1;
  line-height:1.18; margin:0 auto; max-width:16ch;
  font-size:clamp(1.9rem, 5vw, 3.6rem); color:var(--forest);
}
.manifesto p .dim{opacity:.4;}

/* -------- numbered story sections -------- */
.story{padding:2.5rem 0;}
.story-row{
  display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center;
  padding:4rem 0; border-top:1px solid var(--parchment-2);
}
.story-row:first-of-type{border-top:none;}
.story-row.reverse .story-media{order:2;}
.story-num{
  font-family:var(--mono); font-size:.78rem; color:var(--bark); letter-spacing:.05em;
  margin-bottom:1rem; display:block;
}
.story-media{border-radius:var(--radius); overflow:hidden;}
.story-media img{width:100%; aspect-ratio:5/4; object-fit:cover;}
@media (max-width:900px){
  .story-row, .story-row.reverse{grid-template-columns:1fr;}
  .story-row.reverse .story-media{order:0;}
}

/* -------- quote block w/ attribution -------- */
.quote-block{
  display:grid; grid-template-columns:auto 1fr; gap:2rem; align-items:center;
  padding:3rem; background:var(--parchment); border-radius:var(--radius);
}
.quote-avatar{
  width:304px; height:304px; border-radius:50%; background:var(--moss);
  display:flex; align-items:center; justify-content:center; flex:none;
  font-family:var(--display); color:var(--paper); font-size:1.6rem;
  overflow:hidden;
}
.quote-avatar img{width:100%; height:100%; object-fit:cover;}
.quote-block blockquote{margin:0 0 1rem; border:none; padding:0;}
.quote-block .quote-name{font-weight:700; font-size:.95rem;}
.quote-block .quote-role{font-family:var(--mono); font-size:.75rem; color:var(--bark);}
@media (max-width:700px){.quote-block{grid-template-columns:1fr; text-align:center;} .quote-avatar{margin:0 auto;}}

/* -------- closing CTA band -------- */
.cta-band{
  position:relative; padding:6rem 0; text-align:center; color:var(--paper);
  overflow:hidden;
}
.cta-band .hero-media{position:absolute; inset:0; z-index:0;}
.cta-band .hero-media::after{background:linear-gradient(180deg, rgba(32,38,29,.55), rgba(32,38,29,.85));}
.cta-band-content{position:relative; z-index:1;}
.cta-band h2{color:var(--paper); max-width:20ch; margin:0 auto .6rem;}
.cta-band .actions{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.8rem;}

/* -------- editorial cards (campus / pathway style) -------- */
.editorial-card{position:relative; border-radius:var(--radius); overflow:hidden; color:var(--paper); min-height:420px; display:flex; align-items:flex-end;}
.editorial-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.editorial-card::after{content:"";position:absolute; inset:0; background:linear-gradient(180deg, rgba(32,38,29,0) 40%, rgba(32,38,29,.88) 100%); z-index:0;}
.editorial-card-content{position:relative; z-index:1; padding:2.2rem;}
.editorial-card h3{color:var(--paper); margin-bottom:.4rem;}
.editorial-card a{color:var(--gold); font-weight:700; text-decoration:none; font-size:.9rem;}

/* -------- forms -------- */
.form-field{margin-bottom:1.3rem;}
.form-field label{
  display:block; font-family:var(--mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--bark); margin-bottom:.45rem;
}
.form-field input, .form-field textarea, .form-field select{
  width:100%; padding:.8rem .95rem; border:1px solid var(--parchment-2); border-radius:var(--radius);
  font-family:var(--body); font-size:.96rem; background:var(--paper); color:var(--ink);
}
.form-field textarea{min-height:130px; resize:vertical;}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold);
}
.form-note{font-family:var(--mono); font-size:.75rem; color:var(--bark); margin-top:1.2rem;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem;}
@media (max-width:600px){.form-row{grid-template-columns:1fr;}}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}