/* ============================================================
   GREEN TREE MINISTRIES — site styles
   Token contract v1.0 ("The Well on School Street")
   Source of truth: styleguide/index.html — keep :root in sync.
   ============================================================ */
:root{
  /* color roles */
  --ground:#F6F1E7;
  --ground-2:#EDE4D3;
  --roast:#211913;
  --ink:#2A211A;
  --ink-soft:rgba(42,33,26,.72);
  --cream:#F6F1E7;
  --cream-soft:rgba(246,241,231,.78);
  --oak:#C9A06B;
  --oak-soft:#E6D6BC;
  --leaf:#3F5C3A;
  --leaf-deep:#31482E;
  --signal:#DD8F2E;
  --signal-deep:#C57A1D;
  --line:rgba(42,33,26,.16);
  --line-dark:rgba(246,241,231,.18);
  --scrim:linear-gradient(180deg, rgba(33,25,19,.85) 0%, rgba(33,25,19,.6) 50%, rgba(33,25,19,.85) 100%);

  /* type */
  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Karla",-apple-system,Helvetica,sans-serif;
  --wonk:"SOFT" 55,"WONK" 1;
  --t-hero:clamp(42px,6vw,72px);
  --t-h2:clamp(32px,4.2vw,48px);
  --t-h3:clamp(22px,2.6vw,28px);
  --t-lead:clamp(18px,2vw,21px);
  --t-body:17px;
  --t-small:14.5px;
  --t-label:12px;
  --scale:1;                 /* tweaks bar multiplier */

  /* shape & space */
  --radius:0px;
  --sp-xs:8px; --sp-s:16px; --sp-m:24px; --sp-l:40px;
  --sp-xl:64px; --sp-2xl:96px; --sp-3xl:144px;
  --measure:62ch;

  /* motion */
  --dur-micro:200ms;
  --dur-reveal:450ms;
  --dur-hero:700ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --rise:14px;
}

*{margin:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ground);color:var(--ink);font-family:var(--font-body);font-size:calc(var(--t-body) * var(--scale));line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--leaf);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--leaf-deep)}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 28px}

.kicker{font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:var(--t-label);color:var(--leaf)}
.on-dark .kicker{color:var(--oak)}
h1,h2,h3{font-family:var(--font-display);font-weight:480;line-height:1.08;text-wrap:balance}
h1{font-size:calc(var(--t-hero) * var(--scale));font-variation-settings:var(--wonk);font-weight:440}
h2{font-size:calc(var(--t-h2) * var(--scale));font-variation-settings:var(--wonk)}
h3{font-size:calc(var(--t-h3) * var(--scale));font-weight:520}
h1 em,h2 em{font-style:italic}
.on-dark h1 em,.on-dark h2 em{color:var(--oak)}
.lead{font-size:calc(var(--t-lead) * var(--scale));max-width:var(--measure)}
p{max-width:var(--measure)}
.small{font-size:var(--t-small);color:var(--ink-soft)}

/* verses / testimony */
.verse{font-family:var(--font-display);font-style:italic;font-size:calc(var(--t-h3) * var(--scale));color:var(--leaf);line-height:1.4;max-width:34ch}
.verse-ref{font-family:var(--font-body);font-style:normal;font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-top:10px}
.on-dark .verse{color:var(--oak)}
.on-dark .verse-ref{color:var(--cream-soft)}

/* buttons */
.btn{display:inline-block;cursor:pointer;font-family:var(--font-body);font-weight:700;font-size:15px;padding:16px 30px;border-radius:var(--radius);border:none;text-decoration:none;text-align:center;transition:background var(--dur-micro) var(--ease),color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease)}
.btn-give{background:var(--signal);color:#241A0D}
.btn-give:hover{background:var(--signal-deep);color:#241A0D}
.btn-leaf{background:var(--leaf);color:var(--cream)}
.btn-leaf:hover{background:var(--leaf-deep);color:var(--cream)}
.btn-quiet{background:transparent;color:var(--ink);border:1.5px solid rgba(42,33,26,.4)}
.btn-quiet:hover{border-color:var(--ink);color:var(--ink)}
.btn-quiet.on-dark,.on-dark .btn-quiet{color:var(--cream);border-color:rgba(246,241,231,.45)}
.btn-quiet.on-dark:hover,.on-dark .btn-quiet:hover{border-color:var(--cream);color:var(--cream)}

/* ============ nav ============ */
header.site{position:absolute;inset:0 0 auto 0;z-index:10}
header.site .bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0}
header.site .logo img{height:clamp(34px,4vw,42px);width:auto}
header.site nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)}
header.site nav a{font-weight:700;font-size:15px;text-decoration:none;color:var(--cream)}
header.site nav a:hover{color:var(--oak)}
header.site nav a.btn-give{color:#241A0D;padding:12px 22px}
header.site.on-light{position:static;background:var(--roast)}

/* mobile nav (toggle + menu injected by site.js) */
.nav-toggle{display:none;background:none;border:none;width:46px;height:42px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--signal);transition:transform var(--dur-micro) var(--ease),opacity var(--dur-micro) var(--ease)}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none}
@media(max-width:900px){
  header.site,header.site.on-light{position:fixed;inset:0 0 auto 0;background:var(--roast);z-index:70}
  header.site .bar{padding:14px 0}
  header.site nav a.nav-link,header.site nav a.btn-give{display:none}
  .nav-toggle{display:flex}
  .hero .content{padding-top:calc(var(--sp-2xl) + 70px)}
  .hero.slim .content{padding-top:calc(var(--sp-xl) + 96px)}
  .mobile-menu{display:flex;position:fixed;inset:0;background:var(--roast);z-index:60;flex-direction:column;justify-content:center;align-items:flex-start;padding:110px 36px 48px;gap:4px;opacity:0;pointer-events:none;transition:opacity var(--dur-micro) var(--ease)}
  body.nav-open .mobile-menu{opacity:1;pointer-events:auto}
  .mobile-menu a{font-family:var(--font-display);font-variation-settings:var(--wonk);font-weight:460;font-size:clamp(28px,7vw,36px);color:var(--cream);text-decoration:none;padding:10px 0}
  .mobile-menu a:hover{color:var(--oak)}
  .mobile-menu a.btn-give{font-family:var(--font-body);font-variation-settings:normal;font-weight:700;font-size:16px;margin-top:28px;padding:16px 30px;color:#241A0D;background:var(--signal)}
  body.nav-open{overflow:hidden}
}

/* ============ hero (full-bleed dark) ============ */
.hero{position:relative;background:var(--roast);color:var(--cream);min-height:min(92vh,860px);display:flex;align-items:center;overflow:hidden}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero .scrim{position:absolute;inset:0;background:var(--scrim)}
.hero .content{position:relative;padding:calc(var(--sp-3xl) + 40px) 0 var(--sp-2xl);max-width:760px;margin:0 auto;text-align:center}
.hero p.lead{color:var(--cream-soft);margin:var(--sp-s) auto 0;max-width:46ch}
.hero .ctas{display:flex;gap:var(--sp-s);margin-top:var(--sp-m);flex-wrap:wrap;justify-content:center}
.hero .est{margin-top:var(--sp-l);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:rgba(246,241,231,.55)}

/* hero page-top variant for inner pages */
.hero.slim{min-height:0}
.hero.slim .content{padding:calc(var(--sp-2xl) + 56px) 0 var(--sp-xl)}

/* ============ sections ============ */
section.block{padding:var(--sp-2xl) 0}
section.block.tight{padding:var(--sp-xl) 0}
section.latte{background:var(--ground-2)}
section.dark{background:var(--roast);color:var(--cream)}
section.dark p{color:var(--cream-soft)}
.section-head{max-width:var(--measure);margin-bottom:var(--sp-l)}
.section-head h2{margin:10px 0 14px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-xl);align-items:center}
.split .media{border-radius:var(--radius);overflow:hidden}
.split .media img{width:100%;height:100%;object-fit:cover}
@media(max-width:840px){.split{grid-template-columns:1fr;gap:var(--sp-l)}}

/* image stand-in (awaiting real photography) */
.standin{background:linear-gradient(150deg,var(--oak) 0%,var(--oak-soft) 100%);position:relative;border-radius:var(--radius)}
.standin::after{content:attr(data-label);position:absolute;left:14px;bottom:12px;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(42,33,26,.6);max-width:30ch;line-height:1.7}
.r-32{aspect-ratio:3/2}.r-43{aspect-ratio:4/3}.r-34{aspect-ratio:3/4}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-m);margin-top:var(--sp-l)}
.stat{border-top:2px solid var(--ink);padding-top:var(--sp-s)}
.stat b{font-family:var(--font-display);font-weight:560;font-size:clamp(30px,4vw,44px);display:block;line-height:1.1}
.stat span{font-size:var(--t-small);color:var(--ink-soft)}
.dark .stat{border-top-color:var(--oak)}
.dark .stat span{color:var(--cream-soft)}
.stats.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.stats.four{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.stats,.stats.four{grid-template-columns:1fr}}

/* ============ give cards ============ */
.give-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-m);align-items:stretch}
.give-card{background:#FCFAF4;border:1px solid var(--line);border-radius:var(--radius);padding:34px;display:flex;flex-direction:column;gap:var(--sp-s)}
.give-card.featured{border:2px solid var(--signal);box-shadow:0 24px 48px -34px rgba(42,33,26,.5)}
.give-card .tagline{font-size:var(--t-small);color:var(--ink-soft)}
.give-card h3{font-variation-settings:normal}
.amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.amounts a{display:block;text-align:center;padding:14px 0;border-radius:var(--radius);border:1.5px solid var(--line);font-weight:700;text-decoration:none;color:var(--ink);transition:border-color var(--dur-micro) var(--ease),background var(--dur-micro) var(--ease)}
.amounts a:hover,.amounts a.on{border-color:var(--signal);background:#FAEFDC}
.trust{font-size:12.5px;color:var(--ink-soft);line-height:1.7}
.give-grid.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:960px){.give-grid.three{grid-template-columns:1fr}}
@media(max-width:840px){.give-grid{grid-template-columns:1fr}}

/* ============ forms ============ */
form.gtm label{display:block;font-weight:700;font-size:var(--t-small);margin:var(--sp-s) 0 6px}
form.gtm input,form.gtm textarea{width:100%;padding:14px 16px;font:inherit;color:var(--ink);background:#FCFAF4;border:1.5px solid var(--line);border-radius:var(--radius)}
form.gtm input:focus,form.gtm textarea:focus{outline:2px solid var(--leaf);outline-offset:1px;border-color:var(--leaf)}
form.gtm button{margin-top:var(--sp-m)}

/* ============ footer ============ */
footer.site{background:var(--roast);color:var(--cream-soft)}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--sp-l);padding:var(--sp-2xl) 0 var(--sp-l)}
footer.site img{height:38px;margin-bottom:var(--sp-s)}
footer.site h4{font-family:var(--font-body);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--oak);margin-bottom:var(--sp-s)}
footer.site a{color:var(--cream-soft)}
footer.site a:hover{color:var(--cream)}
footer.site ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:15px}
footer.site .legal{border-top:1px solid var(--line-dark);padding:var(--sp-m) 0;font-size:12.5px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:rgba(246,241,231,.55)}
@media(max-width:840px){footer.site .cols{grid-template-columns:1fr}}

/* ============ motion ============ */
.reveal{opacity:0;transform:translateY(var(--rise));transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease)}
.reveal.in{opacity:1;transform:none}
.hero .content>*{opacity:0;transform:translateY(var(--rise));animation:heroIn var(--dur-hero) var(--ease) forwards}
.hero .content>*:nth-child(2){animation-delay:120ms}
.hero .content>*:nth-child(3){animation-delay:240ms}
.hero .content>*:nth-child(4){animation-delay:360ms}
@keyframes heroIn{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.hero .content>*{opacity:1;transform:none;transition:none;animation:none}
}