:root{
  --ink:#1d241c;
  --muted:#5a6657;
  --paper:#f6f4ec;
  --paper-alt:#eceadd;
  --green:#3f5d3a;
  --green-deep:#2c4429;
  --line:#d8d6c6;
  --max:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.15;color:var(--green-deep)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
a{color:var(--green)}
a:hover{text-decoration:underline}
img{max-width:100%}

/* top nav bar */
.nav--bar{position:sticky;top:0;z-index:50;background:var(--green-deep);color:#fff}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px}
.brand{font-family:"Fraunces",serif;font-size:1.35rem;font-weight:600;color:#fff;text-decoration:none}
.brand:hover{text-decoration:none}
.nav--bar ul{display:flex;flex-wrap:wrap;gap:18px;list-style:none;margin:0;padding:0}
.nav--bar a{color:#dfe7d8;text-decoration:none;font-size:.93rem}
.nav--bar a:hover{color:#fff}
.nav--bar a.active{color:#fff;border-bottom:2px solid #9fc08f;padding-bottom:2px}
.navtoggle,.navburger{display:none}

/* hero */
.hero{color:#f3f5ef;display:flex;flex-direction:column;justify-content:center}
.hero--home{
  min-height:70vh;
  background:linear-gradient(rgba(20,32,18,.62),rgba(20,32,18,.78)),url("assets/hero.jpg") center/cover no-repeat;
}
.hero--page{min-height:34vh;background-size:cover;background-position:center;padding:48px 0}
.hero--page h1{color:#fff;font-size:clamp(2rem,4.5vw,3.2rem);margin:0}
.hero-inner{max-width:var(--max);margin:0 auto;width:100%;padding:0 24px}
.page-head{background:var(--paper-alt);border-bottom:1px solid var(--line);padding:38px 0 30px}
.page-head h1{margin:0;color:var(--green-deep);font-size:clamp(1.9rem,4vw,2.9rem)}
.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:.78rem;color:#bcd0b3;margin:0 0 14px}
.hero--home h1{color:#fff;font-size:clamp(2.3rem,5.5vw,3.9rem);margin:0 0 18px;max-width:15ch}
.lede{font-size:1.18rem;color:#34402f;max-width:60ch}
.hero .lede{color:#e9efe4;max-width:54ch}

.cta{display:inline-block;background:#dfe9d6;color:var(--green-deep);padding:12px 24px;border-radius:999px;font-weight:600;text-decoration:none;margin:6px 6px 0 0}
.cta:hover{background:#fff;text-decoration:none}
.cta--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6)}
.cta--ghost:hover{background:rgba(255,255,255,.12);color:#fff}

/* sections */
.section{padding:72px 0}
.section.alt{background:var(--paper-alt)}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin:0 0 16px}
.two-col{display:grid;grid-template-columns:1.6fr .9fr;gap:48px;align-items:start}

/* prose column */
.prose{max-width:70ch}
.prose h2{margin:36px 0 12px}
.prose p{margin:0 0 16px;color:#34402f}
.prose ul.loose li{margin:0 0 12px;color:#34402f}
.prose .lede{margin-bottom:24px}
.next{margin-top:28px;font-weight:600}

/* tiles grid */
.grid-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tile{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;text-decoration:none;color:inherit;transition:transform .12s,box-shadow .12s}
a.tile:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(44,68,41,.12);text-decoration:none}
.tile h3{margin:0 0 8px;font-size:1.2rem}
.tile p{margin:0;color:#3b4634;font-size:.95rem}
.tile.static{cursor:default}

/* species cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:8px}
.cards--species{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;height:170px;object-fit:cover;display:block}
.card-body{padding:16px 18px}
.card h3{margin:0 0 8px;font-size:1.05rem}
.card h3 span{display:block;font-style:italic;font-size:.9rem;color:var(--muted);font-family:"Inter",sans-serif;font-weight:500}
.card p{margin:0;font-size:.92rem;color:#3b4634}

/* facts box */
.facts{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 26px}
.section.alt .facts{background:var(--paper)}
.facts h3{margin:0 0 12px;font-size:1.15rem}
.facts h3.mt{margin-top:22px}
.facts dl{margin:0}
.facts dt{font-weight:600;color:var(--green-deep)}
.facts dd{margin:0 0 10px;color:var(--muted)}
.facts p{color:var(--muted);font-size:.95rem;margin:0}

/* uses grid */
.uses-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:32px}
.use h3{margin:0 0 8px;font-size:1.12rem}
.use p{margin:0;color:#3b4634}

/* footer */
.footer{background:var(--green-deep);color:#cdd8c4;padding:54px 0}
.footer a{color:#bcd0b3}
.foot-brand{font-family:"Fraunces",serif;color:#fff;font-size:1.3rem;margin:0 0 6px}
.footer p{max-width:72ch;margin:0 0 14px}
.foot-links{font-size:.9rem}
.credits{font-size:.8rem;color:#9fb094;line-height:1.6}
.copy{font-size:.8rem;color:#9fb094;margin:0}
.footer em{font-style:italic}

/* image credits table */
.credits-table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.93rem}
.credits-table th,.credits-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.credits-table th{font-family:"Inter",sans-serif;font-weight:600;color:var(--green-deep)}
.credits-table td:first-child{width:90px}

@media (max-width:860px){
  .two-col{grid-template-columns:1fr;gap:32px}
  .grid-cards{grid-template-columns:repeat(2,1fr)}
  .cards,.cards--species{grid-template-columns:repeat(2,1fr)}
  .uses-grid{grid-template-columns:1fr 1fr}
  /* mobile menu */
  .navburger{display:block;font-size:1.6rem;line-height:1;cursor:pointer;color:#fff;user-select:none}
  .nav--bar ul{display:none;flex-direction:column;width:100%;gap:10px;padding-top:12px}
  .navtoggle:checked ~ ul{display:flex}
}
@media (max-width:540px){
  .grid-cards,.cards,.cards--species,.uses-grid{grid-template-columns:1fr}
  .section{padding:52px 0}
}