:root {
  --forest-950: #032f20;
  --forest-900: #063c28;
  --forest-800: #0a4b30;
  --moss: #7da62d;
  --moss-light: #a9c84a;
  --paper: #efe5c9;
  --paper-light: #f7efd9;
  --ink: #2b1f16;
  --cream: #f1ead9;
  --danger: #ce5a48;
  --gold-line: rgba(151, 164, 56, .58);
  --shadow: 0 26px 60px rgba(0, 0, 0, .38);
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--cream);
  background: var(--forest-950);
  font-family: "Source Sans 3", system-ui, sans-serif;
}

h1, h2, h3, .forest-logo { font-family: "Cormorant Garamond", Georgia, serif; }
a { text-decoration: none; }
.section-pad { padding: clamp(5rem, 8vw, 8rem) 0; }

.forest-nav {
  padding: .8rem 0;
  background: linear-gradient(180deg, rgba(2, 35, 24, .96), rgba(2, 35, 24, .68), transparent);
  transition: background .25s ease, box-shadow .25s ease;
}
.forest-nav.scrolled {
  background: rgba(2, 35, 24, .95);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
  backdrop-filter: blur(10px);
}
.forest-logo {
  width: 148px;
  display: grid;
  line-height: .72;
  text-transform: uppercase;
  color: var(--cream);
}
.logo-small { font-size: .85rem; text-transform: none; color: var(--moss-light); padding-left: 2.2rem; }
.logo-main { font-size: 1.55rem; letter-spacing: .03em; }
.logo-forest { font-size: 1.9rem; color: var(--moss-light); }
.navbar-nav .nav-link {
  color: rgba(255,255,255,.92);
  font-family: "Oswald", sans-serif;
  font-size: .94rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { color: var(--moss-light); border-bottom-color: var(--moss-light); }

.btn {
  border-radius: .5rem;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: .035em;
}
.btn-forest {
  color: #fff;
  border: 1px solid #8aaf36;
  background: linear-gradient(180deg, #91b83c, #6f9328);
  box-shadow: 0 10px 25px rgba(51, 79, 5, .32);
}
.btn-forest:hover { color: #fff; background: linear-gradient(180deg, #a2c94b, #7da62d); }

.hero-section {
  min-height: 820px;
  position: relative;
  background:
    radial-gradient(circle at 17% 22%, rgba(181, 203, 53, .14), transparent 20%),
    radial-gradient(circle at 75% 30%, rgba(255, 218, 63, .08), transparent 18%),
    linear-gradient(90deg, rgba(2, 42, 27, .45), rgba(1, 31, 21, .1)),
    url('/images/hero-bg.jpg') center/cover;
}
.hero-section::after,
.teaching-section::after,
.cta-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 43%, rgba(1, 27, 18, .46) 100%);
}
.fireflies {
  position: absolute;
  inset: 0;
  opacity: .55;
  background-image:
    radial-gradient(circle, #e5d766 0 1px, transparent 2px),
    radial-gradient(circle, #ddca3b 0 1px, transparent 2px),
    radial-gradient(circle, #f2df64 0 1.5px, transparent 2.5px);
  background-size: 121px 133px, 177px 181px, 241px 229px;
  background-position: 8px 18px, 55px 79px, 90px 40px;
  filter: drop-shadow(0 0 7px #d8c52d);
}
.hero-copy { position: relative; z-index: 2; padding-top: 7rem !important; }
.hero-copy .eyebrow { color: var(--moss-light); text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; }
.hero-copy h1 {
  font-size: clamp(3.2rem, 5.5vw, 5.5rem);
  font-weight: 700;
  line-height: .87;
  text-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.hero-copy h1 span { color: var(--moss-light); }
.leaf-divider { color: var(--moss-light); font-size: 2.3rem; line-height: 1; margin: .8rem 0; }
.leaf-divider.dark { color: #52772b; }
.hero-copy h2 {
  font-family: "Oswald", sans-serif;
  font-size: 1.12rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.45;
}
.age-ribbon {
  display: inline-block;
  position: relative;
  margin: 1rem 0 1.35rem;
  padding: .5rem 2.5rem;
  color: #1f2c0b;
  background: linear-gradient(180deg, #a4c349, #718e29);
  font-family: "Oswald", sans-serif;
  font-size: 1.25rem;
  text-transform: uppercase;
  box-shadow: 0 7px 18px rgba(0,0,0,.22);
}
.age-ribbon::before,
.age-ribbon::after {
  content: "";
  position: absolute;
  top: .32rem;
  border-top: 1.05rem solid #647f24;
  border-bottom: 1.05rem solid #647f24;
}
.age-ribbon::before { left: -1.2rem; border-left: 1rem solid transparent; }
.age-ribbon::after { right: -1.2rem; border-right: 1rem solid transparent; }
.hero-description { max-width: 520px; font-size: 1.05rem; line-height: 1.55; color: rgba(255,255,255,.93); }
.hero-art { position: relative; z-index: 2; }
.book-glow { position: relative; display: inline-block; }
.book-glow::before {
  content: "";
  position: absolute;
  inset: 12% 6% 4%;
  background: rgba(181, 199, 44, .14);
  filter: blur(38px);
  border-radius: 50%;
}
.book-image {
  position: relative;
  width: min(100%, 570px);
  filter: drop-shadow(18px 25px 20px rgba(0,0,0,.48));
  -webkit-mask-image: radial-gradient(ellipse 76% 78% at center, #000 65%, transparent 100%);
  mask-image: radial-gradient(ellipse 76% 78% at center, #000 65%, transparent 100%);
}

.paper-section {
  color: var(--ink);
  background:
    linear-gradient(rgba(246, 237, 211, .86), rgba(246, 237, 211, .86)),
    url('/images/paper-bg.jpg') center/cover;
  box-shadow: inset 0 20px 35px rgba(1, 37, 24, .25), inset 0 -18px 30px rgba(1, 37, 24, .18);
}
.display-title { font-size: clamp(3.2rem, 6vw, 5.8rem); font-weight: 600; line-height: .75; }
.display-title span { color: #315e2e; }
.about-art { max-height: 340px; object-fit: contain; }
.faded-edge {
  -webkit-mask-image: radial-gradient(ellipse 74% 78% at center, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 74% 78% at center, #000 55%, transparent 100%);
}
.story-copy { font-size: 1.08rem; line-height: 1.55; }
.story-copy blockquote {
  margin: 1.6rem 0;
  color: #315e2e;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.65rem, 3vw, 2.45rem);
  font-weight: 600;
  font-style: italic;
  text-align: center;
  line-height: 1.2;
}

.teaching-section {
  background:
    linear-gradient(rgba(2, 50, 32, .82), rgba(1, 48, 30, .9)),
    url('/images/forest-bg.jpg') center/cover;
}
.teaching-heading { max-width: 900px; position: relative; z-index: 2; }
.teaching-heading h2 { font-size: clamp(2.8rem, 5vw, 4.8rem); font-weight: 600; }
.teaching-heading h2 span { color: var(--moss-light); }
.teaching-heading p { font-size: 1.05rem; }
.teaching-card {
  position: relative;
  z-index: 2;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--gold-line);
  background: rgba(2, 52, 33, .46);
  box-shadow: inset 0 0 35px rgba(0,0,0,.12);
}
.teaching-card h3 {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.5rem;
  font-family: "Oswald", sans-serif;
  font-size: clamp(1.2rem, 2.3vw, 1.65rem);
  text-transform: uppercase;
}
.teaching-card-stop h3 { color: #df6a56; }
.teaching-card-do h3 { color: var(--moss-light); }
.status-icon {
  width: 2.1rem;
  height: 2.1rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  border-radius: 50%;
  background: currentColor;
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.06);
}
.status-icon::first-letter { color: #fff; }
.teaching-card ol { list-style: none; padding: 0; margin: 0; counter-reset: item; }
.teaching-card li {
  counter-increment: item;
  position: relative;
  min-height: 2.2rem;
  padding-left: 2.75rem;
  margin-bottom: 1rem;
  line-height: 1.25;
}
.teaching-card li::before {
  content: counter(item);
  position: absolute;
  left: 0;
  top: .05rem;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
}
.teaching-card-stop li::before { background: var(--danger); }
.teaching-card-do li::before { background: #7fa733; }
.teaching-card li strong { display: block; font-weight: 600; }
.teaching-card li span { display: block; color: rgba(255,255,255,.88); }
.decor-image { position: absolute; z-index: 1; opacity: .95; pointer-events: none; }
.decor-pinecone { width: 145px; left: 0; bottom: 6%; -webkit-mask-image: radial-gradient(circle, #000 45%, transparent 85%); mask-image: radial-gradient(circle, #000 45%, transparent 85%); }
.decor-squirrel { width: 170px; right: 0; top: 18%; -webkit-mask-image: radial-gradient(circle, #000 48%, transparent 86%); mask-image: radial-gradient(circle, #000 48%, transparent 86%); }

.feature-strip { position: relative; z-index: 3; }
.feature-item { padding: 1rem 2rem; }
.feature-border { border-left: 1px solid rgba(69, 55, 31, .28); }
.feature-icon { color: #476e2c; font-size: 2.4rem; line-height: 1; }
.feature-item h3 { margin-top: .7rem; font-size: 1.45rem; font-weight: 700; }
.feature-item p { margin: 0; line-height: 1.3; }

.cta-section {
  background:
    linear-gradient(rgba(1, 48, 30, .84), rgba(1, 48, 30, .92)),
    url('/images/cta-bg.jpg') center/cover;
}
.cta-section .container { z-index: 2; max-width: 820px; }
.cta-section h2 { font-size: clamp(2.4rem, 4.5vw, 4.2rem); margin-bottom: 0; }
.cta-section h3 { color: var(--moss-light); font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 600; }
.scripture { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.25rem; font-style: italic; }
.cta-animal { position: absolute; z-index: 1; bottom: 0; max-height: 245px; -webkit-mask-image: radial-gradient(ellipse 68% 78% at center, #000 54%, transparent 100%); mask-image: radial-gradient(ellipse 68% 78% at center, #000 54%, transparent 100%); }
.cta-raccoon { left: 0; }
.cta-fox { right: 0; }
.site-footer { color: rgba(255,255,255,.72); background: #021f15; font-size: .9rem; }

@media (max-width: 1199.98px) {
  .navbar-nav .nav-link { font-size: .83rem; }
  .forest-logo { width: 130px; }
}

@media (max-width: 991.98px) {
  .forest-nav { background: rgba(2, 35, 24, .96); }
  .navbar-collapse { padding: 1rem 0 1.4rem; }
  .hero-section { min-height: auto; }
  .hero-copy { padding-top: 9rem !important; }
  .book-image { width: min(100%, 500px); }
  .feature-border:nth-child(3) { border-left: 0; }
  .feature-item { border-top: 1px solid rgba(69, 55, 31, .18); }
  .cta-animal { max-height: 190px; opacity: .6; }
}

@media (max-width: 767.98px) {
  .section-pad { padding: 4rem 0; }
  .hero-copy h1 { font-size: clamp(3rem, 13vw, 4.3rem); }
  .hero-copy h2 { font-size: .98rem; }
  .age-ribbon { font-size: 1.05rem; padding-inline: 1.8rem; }
  .display-title { font-size: clamp(3rem, 15vw, 4.7rem); }
  .feature-border { border-left: 0; }
  .decor-image { opacity: .35; }
  .cta-animal { max-height: 140px; opacity: .42; }
  .scripture { padding-inline: 1rem; font-size: 1.05rem; }
}

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