/* 08 — FIRST ACRE / community gardens
   Butter yellow, deep green, poster black type. */

body.cause{
  --bg:#fff7dc; --ink:#14392c;
  --accent:#f35f39; --accent-ink:#fff;
  --line:rgba(20,57,44,.22);
  --soft:rgba(20,57,44,.68);
  --panel:#fdefc8;
  --inv-bg:#14392c; --inv-ink:#fff;
  --display:'Archivo Black',sans-serif;
  --nav-bg:#fff7dc;
  background:#fff7dc;color:#14392c;font-family:'DM Sans',sans-serif;
}

.cause .dh,.cause .cta h2,.cause .phero h1{text-transform:uppercase;letter-spacing:-.055em}
.cause .btn-solid{background:#f35f39;color:#fff;border-color:#f35f39}
.cause .sec-inv .stat strong,.cause .cta .stat strong{color:#ffc85a}

/* header */
.cause .nav{display:flex;justify-content:space-between;align-items:center;padding:18px 4vw;border-bottom:2px solid}
.cause .logo{font:28px 'Archivo Black';letter-spacing:-.05em}

/* hero */
.cause .hero{padding:6vh 4vw;display:grid;grid-template-columns:1.1fr .9fr;gap:5vw;align-items:center}
.cause .hero h1{font:clamp(75px,10vw,145px)/.83 'Archivo Black';letter-spacing:-.075em;text-transform:uppercase;margin:30px 0}
.cause .hero p{font-size:20px;max-width:570px;line-height:1.55;margin-bottom:34px}
.cause .hero-img{height:660px;border-radius:50% 50% 12px 12px;overflow:hidden}

/* impact numbers */
.cause .number{border-top:1px solid;padding-top:20px}
.cause .number strong{display:block;color:#ffc85a;font:clamp(52px,6vw,78px)/1 'Archivo Black';letter-spacing:-.05em}
.cause .number span{font-size:16px;display:block;margin-top:12px}

/* donation amounts */
.cause .amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cause .amt{border:2px solid;padding:22px;text-align:center;cursor:pointer;transition:.2s;font:26px 'Archivo Black';letter-spacing:-.04em;background:transparent;border-radius:4px}
.cause .amt small{display:block;font:12px 'DM Sans';letter-spacing:0;margin-top:8px;opacity:.7}
.cause .amt:hover,.cause .amt.on{background:#f35f39;color:#fff;border-color:#f35f39}

/* story cards */
.cause .story img{height:280px;border-radius:6px}
.cause .story h3{font:23px 'Archivo Black';text-transform:uppercase;letter-spacing:-.04em;margin:18px 0 8px}
.cause .story p{color:var(--soft);line-height:1.7}
.cause .story .when{font-size:12px;text-transform:uppercase;letter-spacing:.12em;opacity:.6}

/* map of gardens */
.cause .gardenlist{columns:2;column-gap:50px;line-height:2.2;font-size:17px}

@media(max-width:820px){
  .cause .hero{grid-template-columns:1fr;gap:34px}
  .cause .hero h1{font-size:clamp(44px,13vw,92px);margin:22px 0;overflow-wrap:anywhere}
  .cause .hero-img{height:min(440px,70vw);border-radius:50% 50% 10px 10px}
  .cause .amounts{grid-template-columns:1fr 1fr}
  .cause .amounts a,.cause .amounts button{min-height:48px}
  .cause .gardenlist{columns:1}
}