/* ---------- RESET / BASE ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.6;
  color: #2d2d2d;
  background: #fbf3da;
}
img { max-width: 100%; height: auto; display: block; }
a { color: #5c6e3b; text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; color: #1f3a1f; }
h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); letter-spacing: 0.05em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1rem; color: #2d4a2b; }
h3 { font-size: 1.2rem; margin-bottom: 0.5rem; color: #3d5a3b; }
p { margin-bottom: 1rem; }

/* ---------- HERO ---------- */
.hero {
  background: linear-gradient(180deg, #1f3a1f 0%, #34522f 100%);
  color: #fbf3da;
  padding-bottom: 4rem;
  border-bottom: 6px solid #d4a93a;
}
.nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 24px; max-width: 1100px; margin: 0 auto;
  flex-wrap: wrap;
}
.nav-logo {
  display: flex; align-items: center; gap: 0.6rem;
  color: #fbf3da; font-weight: bold; letter-spacing: 0.08em;
}
.nav-logo:hover { text-decoration: none; color: #f4d04a; }
.nav-links { list-style: none; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.nav-links a { color: #e8d8a0; font-size: 0.95rem; }
.nav-links a:hover { color: #f4d04a; }

.hero-content {
  text-align: center;
  padding: 3rem 24px 1rem;
  max-width: 800px;
  margin: 0 auto;
}
.hero-content h1 {
  color: #fbf3da;
  font-weight: bold;
  margin-bottom: 1rem;
}
.tagline {
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: #f4d04a;
  margin-bottom: 2.5rem;
}

.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 0.85rem 1.8rem;
  border-radius: 6px;
  font-weight: bold;
  font-size: 1rem;
  border: 2px solid transparent;
  transition: all 0.15s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: #d4a93a; color: #1f3a1f; border-color: #b58020; }
.btn-primary:hover { background: #f4d04a; }
.btn-secondary { background: transparent; color: #fbf3da; border-color: #d4a93a; }
.btn-secondary:hover { background: rgba(212, 169, 58, 0.15); color: #f4d04a; }

/* ---------- SECTIONS ---------- */
section { padding: 4rem 0; }
section h2 { text-align: center; }
.section-intro {
  text-align: center; font-size: 1.1rem; color: #4a3a1b;
  max-width: 800px; margin: 0 auto 2.5rem;
}

/* ---------- LOCKS ---------- */
.locks { background: #f3e6bf; }
.locks-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2rem; max-width: 700px; margin: 2rem auto;
}
.lock { text-align: center; }
.lock-icon { display: flex; justify-content: center; margin-bottom: 1rem; }
.lock h3 { color: #2d4a2b; font-size: 1.4rem; }
.lock p { color: #4a3a1b; margin-bottom: 0.3rem; }
.lock-note { font-style: italic; font-size: 0.9rem; color: #6a4a2a; }
.locks-closer { text-align: center; font-size: 1.2rem; margin-top: 1rem; color: #2d4a2b; }

/* ---------- PROGRAM / FOUR PROJECTS ---------- */
.program { background: #fbf3da; }
.projects-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem; margin-top: 2rem;
}
.project {
  padding: 1.5rem; border-radius: 12px;
  color: #fbf3da; box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.project h3 { color: #fbf3da; }
.project-sub { font-style: italic; color: #f4d04a; font-size: 0.95rem; margin-bottom: 0.8rem; }
.project p { font-size: 0.97rem; }
.project-1 { background: linear-gradient(135deg, #7a8d4f, #5c6e3b); }
.project-2 { background: linear-gradient(135deg, #c6a64b, #a48330); }
.project-3 { background: linear-gradient(135deg, #a26a3a, #7a4c25); }
.project-4 {
  background: linear-gradient(135deg, #3d5a3b, #2d4a2b);
  border: 2px dashed #d4a93a;
}

/* ---------- INFOGRAPHIC ---------- */
.infographic-section { background: #f3e6bf; }
.infographic {
  max-width: 700px; margin: 1rem auto 0; display: block;
  border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ---------- METHOD ---------- */
.method { background: #fbf3da; }
.method .container { max-width: 800px; }
.method p { font-size: 1.02rem; }

/* ---------- WHY ---------- */
.why { background: #e8d8a0; }
.narratives {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem; margin-top: 1rem;
}
.narrative {
  background: #fbf3da; padding: 1.5rem; border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  border-left: 4px solid #5c6e3b;
}
.narrative h3 { color: #2d4a2b; font-size: 1.1rem; }
.narrative p { font-size: 0.97rem; color: #2d2d2d; margin-bottom: 0; }

/* ---------- STORY ---------- */
.story { background: linear-gradient(180deg, #fbf3da, #f3e6bf); }
.story .container { max-width: 800px; }
.story-quote {
  font-size: 1.1rem; margin-top: 1.5rem; padding: 1.2rem 1.5rem;
  border-left: 4px solid #d4a93a;
  background: rgba(212, 169, 58, 0.12);
  color: #2d4a2b;
}

/* ---------- SUPPORT ---------- */
.support { background: #fbf3da; }
.support .container { max-width: 900px; }
.support > .container > p:first-of-type {
  font-size: 1.02rem; margin-bottom: 2rem;
}
.support-channels {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem; margin: 2rem 0;
}
.channel {
  display: block; padding: 1.5rem;
  background: #d4a93a; color: #1f3a1f;
  border-radius: 10px; text-align: center;
  border: 2px solid #b58020;
  transition: all 0.15s;
}
.channel:hover {
  background: #f4d04a; text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.channel h3 { color: #1f3a1f; font-size: 1.3rem; margin-bottom: 0.5rem; }
.channel-url {
  font-family: 'Courier New', monospace; font-size: 1.05rem;
  font-weight: bold; margin-bottom: 0.4rem;
}
.channel-note { font-size: 0.9rem; color: #3a3026; margin: 0; }
.support-collab { font-size: 0.95rem; color: #4a3a1b; margin-top: 2rem; }

/* ---------- FOOTER ---------- */
.footer {
  background: #2d4a2b; color: #fbf3da;
  padding: 4rem 0 2rem;
}
.footer h2 { color: #d4a93a; }
.footer a { color: #f4d04a; }
.footer a:hover { color: #fbf3da; }
.footer p { margin-bottom: 0.6rem; }
.closer {
  margin: 2rem 0;
  padding: 1.2rem;
  border-top: 1px solid #d4a93a;
  border-bottom: 1px solid #d4a93a;
  font-size: 1.1rem;
  text-align: center;
  color: #e8d8a0;
}
.copyright {
  font-size: 0.85rem; color: #a8a08a;
  text-align: center; margin-top: 2rem;
}

/* ---------- MOBILE ---------- */
@media (max-width: 600px) {
  .nav { padding: 0.8rem 16px; }
  .nav-links { gap: 1rem; font-size: 0.85rem; }
  .container { padding: 0 16px; }
  section { padding: 3rem 0; }
  .locks-grid { grid-template-columns: 1fr; }
  .hero-cta { flex-direction: column; }
  .btn { width: 100%; text-align: center; }
}


/* Land donation invitation block */
.land-ask {
  margin: 2rem 0;
  padding: 1.5rem 1.8rem;
  background: linear-gradient(135deg, #f3e6bf, #e8d8a0);
  border: 2px dashed #5c6e3b;
  border-radius: 10px;
}
.land-ask h3 {
  color: #2d4a2b;
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
}
.land-ask p {
  font-size: 0.98rem;
  color: #2d2d2d;
  margin-bottom: 0;
}