/* =========================================================
   CGALU — Visionary Fundraising website
   Design tokens
   ========================================================= */
:root{
  --ink:        #182338;   /* deep indigo — primary dark */
  --ink-soft:   #3c4a63;   /* lighter indigo for body text on cream */
  --charcoal:   #14171c;   /* near-black for the darkest sections */
  --cream:      #f7f2e7;   /* warm paper background */
  --cream-2:    #efe6d3;   /* slightly deeper paper, for cards */
  --clay:       #b1522f;   /* terracotta — from the brick photographs */
  --clay-dark:  #8f3f22;
  --gold:       #c69a3e;   /* gold sash — from graduation regalia */
  --gold-light: #e7c876;
  --line:       rgba(24,35,56,0.14);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:    "Space Mono", "SFMono-Regular", Menlo, monospace;

  --maxw: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3,h4{
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1em; }
.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}
.visually-hidden{
  position:absolute; width:1px;height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
:focus-visible{ outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom: 14px;
}
.eyebrow::before{
  content:"";
  width: 22px; height: 1px;
  background: var(--clay);
  display:inline-block;
}

/* ---------- header / nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(24,35,56,0.96);
  backdrop-filter: blur(6px);
  color: var(--cream);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
.brand{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--cream);
}
.brand-logo{ width:42px; height:42px; border-radius:6px; flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; }
.brand-mark{ font-family: var(--display); font-size:1.28rem; font-weight:600; letter-spacing:0.01em; }
.brand-sub{ font-family: var(--mono); font-size:0.62rem; letter-spacing:0.14em; color: var(--gold-light); text-transform:uppercase; }

.nav{
  display:flex; align-items:center; gap: 30px;
}
.nav a{
  text-decoration:none; font-size:0.92rem; color: rgba(247,242,231,0.82);
  position:relative; padding: 6px 0;
}
.nav a:hover, .nav a[aria-current="page"]{ color: var(--cream); }
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--gold);
}
.nav-cta{
  background: var(--clay); color: #fff !important; padding: 10px 20px !important;
  border-radius: 3px; font-weight:600;
}
.nav-cta:hover{ background: var(--clay-dark); }

.nav-toggle{
  display:none; background:none; border:0; color:var(--cream); cursor:pointer;
  padding:8px; margin: 0 -8px;
}
.nav-toggle svg{ width:26px; height:26px; }

@media (max-width: 880px){
  .nav-toggle{ display:block; }
  .nav{
    position:absolute; top:76px; left:0; right:0;
    background: var(--ink); flex-direction:column; align-items:flex-start;
    padding: 10px 28px 26px; gap: 4px;
    display:none;
  }
  .nav.open{ display:flex; }
  .nav a{ width:100%; padding: 12px 0; border-bottom:1px solid rgba(255,255,255,0.08); }
  .nav-cta{ margin-top:10px; text-align:center; }
}

/* ---------- the road (signature motif) ---------- */
/* A dashed route line with waypoint markers threads through the page,
   echoing the dirt paths our team walks to reach remote villages. */
.road{
  position:relative;
}
.road::before{
  content:"";
  position:absolute; left:50%; top:0; bottom:0;
  width:2px; transform: translateX(-50%);
  background-image: linear-gradient(var(--clay) 60%, transparent 0%);
  background-size: 2px 14px;
  opacity:0.35;
}
.waypoint{
  position:relative; z-index:2;
  width:64px; height:64px; border-radius:50%;
  background: var(--cream); border:2px solid var(--clay);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--mono); font-size:0.85rem; color:var(--clay);
  margin: 0 auto 18px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--body); font-weight:600; font-size:0.96rem;
  padding: 14px 26px; border-radius:3px; text-decoration:none;
  border: 1px solid transparent; cursor:pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--clay); color:#fff; }
.btn-primary:hover{ background: var(--clay-dark); }
.btn-gold{ background: var(--gold); color: var(--charcoal); }
.btn-gold:hover{ background: var(--gold-light); }
.btn-outline{ background:transparent; border-color: rgba(247,242,231,0.5); color:var(--cream); }
.btn-outline:hover{ border-color: var(--cream); }
.btn-outline-dark{ background:transparent; border-color: var(--ink); color:var(--ink); }
.btn-outline-dark:hover{ background: var(--ink); color:var(--cream); }

/* ---------- section shells ---------- */
section{ padding: 96px 0; }
@media (max-width:720px){ section{ padding: 64px 0; } }
.section-dark{ background: var(--ink); color: var(--cream); }
.section-charcoal{ background: var(--charcoal); color: var(--cream); }
.section-cream2{ background: var(--cream-2); }
.section-clay{ background: var(--clay); color: #fff; }

.section-head{ max-width: 680px; margin-bottom: 56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(1.8rem, 3vw, 2.5rem); }
.section-head p{ font-size:1.08rem; color: var(--ink-soft); }
.section-dark .section-head p, .section-charcoal .section-head p{ color: rgba(247,242,231,0.75); }

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height: 88vh;
  display:flex; align-items:flex-end;
  color:#fff;
  background: var(--ink);
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
}
.hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position: center 30%;
  opacity:0.55;
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,23,28,0.35) 0%, rgba(20,23,28,0.55) 55%, var(--charcoal) 100%);
}
.hero-inner{
  position:relative; z-index:1;
  padding-bottom: 76px; padding-top: 160px;
  max-width: 760px;
}
.hero .eyebrow{ color: var(--gold-light); }
.hero .eyebrow::before{ background: var(--gold-light); }
.hero h1{
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  color:#fff;
}
.hero .lede{
  font-size: 1.2rem; color: rgba(255,255,255,0.86); max-width: 54ch;
}
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-top: 30px; }
.hero-stats{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top: 1px solid rgba(255,255,255,0.18);
}
.hero-stats div{
  padding: 22px 28px; border-right: 1px solid rgba(255,255,255,0.18);
}
.hero-stats div:last-child{ border-right:none; }
.hero-stats .num{ font-family: var(--display); font-size:1.9rem; color: var(--gold-light); }
.hero-stats .label{ font-size:0.82rem; color: rgba(255,255,255,0.7); }
@media (max-width:720px){
  .hero-stats{ grid-template-columns:1fr; }
  .hero-stats div{ border-right:none; border-bottom:1px solid rgba(255,255,255,0.18); }
}

/* ---------- page hero (interior pages) ---------- */
.page-hero{
  background: var(--ink); color:#fff; padding: 150px 0 70px;
  position:relative; overflow:hidden;
}
.page-hero h1{ color:#fff; font-size: clamp(2rem, 4.4vw, 3.1rem); max-width:720px; }
.page-hero p{ color: rgba(255,255,255,0.78); max-width: 60ch; font-size:1.08rem; }

/* ---------- cards ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .grid-3, .grid-2{ grid-template-columns:1fr; } }

.card{
  background:#fff; border:1px solid var(--line); border-radius:4px;
  overflow:hidden; display:flex; flex-direction:column;
}
.card img{ aspect-ratio: 4/3; object-fit:cover; width:100%; }
.card-body{ padding: 26px; flex:1; display:flex; flex-direction:column; }
.card-body h3{ font-size:1.2rem; }
.card-tag{
  font-family: var(--mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--clay); margin-bottom:10px;
}
.card-body p{ color: var(--ink-soft); font-size:0.96rem; flex:1; }
.card-link{ font-weight:600; font-size:0.9rem; color: var(--clay); text-decoration:none; margin-top:12px; display:inline-block; }
.card-link:hover{ text-decoration:underline; }
.card-body a:not(.card-link){ color: var(--clay); text-decoration:none; font-weight:500; }
.card-body a:not(.card-link):hover{ text-decoration:underline; }

/* ---------- stakes / stat blocks ---------- */
.stat-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background: var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden;
}
@media (max-width:720px){ .stat-row{ grid-template-columns:1fr; } }
.stat-block{ background:#fff; padding:34px 30px; }
.stat-block .big{ font-family: var(--display); font-size:2.6rem; color: var(--clay); line-height:1; }
.stat-block .desc{ color: var(--ink-soft); font-size:0.94rem; margin-top:10px; }

/* ---------- plan / three steps ---------- */
.steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:36px;
}
@media (max-width:900px){ .steps{ grid-template-columns:1fr; gap:56px; } }
.step{ text-align:center; }
.step h3{ font-size:1.15rem; margin-bottom:10px; }
.step p{ color: rgba(247,242,231,0.75); font-size:0.96rem; max-width:32ch; margin:0 auto; }

/* ---------- success / failure ---------- */
.sf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); border-radius:4px; overflow:hidden; border:1px solid var(--line); }
@media (max-width:800px){ .sf-grid{ grid-template-columns:1fr; } }
.sf-panel{ padding:44px 40px; }
.sf-panel.bad{ background: #fff; }
.sf-panel.good{ background: var(--cream-2); }
.sf-tag{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; }
.sf-panel.bad .sf-tag{ color:#8a2f1f; }
.sf-panel.good .sf-tag{ color: var(--clay-dark); }
.sf-panel ul{ padding-left: 1.1em; color: var(--ink-soft); }
.sf-panel li{ margin-bottom:8px; }

/* ---------- quote / story teaser ---------- */
.story-teaser{
  display:grid; grid-template-columns: 1.1fr 1fr; gap:56px; align-items:center;
}
@media (max-width:860px){ .story-teaser{ grid-template-columns:1fr; } }
.story-teaser img{ border-radius:4px; }
.story-cliff{
  font-family: var(--display); font-style:italic; font-size:1.3rem; color: var(--ink);
  border-left: 3px solid var(--clay); padding-left:22px; margin: 22px 0;
}

/* ---------- giving tiers ---------- */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .tiers{ grid-template-columns:1fr; } }
.tier{
  background:#fff; border:1px solid var(--line); border-radius:6px; padding:32px 28px;
  display:flex; flex-direction:column;
}
.tier.featured, .tier.is-featured{ border:2px solid var(--gold); position:relative; }
.tier.featured::before, .tier.is-featured::before{
  content:"MOST NEEDED"; position:absolute; top:-13px; left:28px;
  background: var(--gold); color:var(--charcoal); font-family:var(--mono);
  font-size:0.65rem; letter-spacing:0.1em; padding:4px 10px; border-radius:2px;
}
.tier .amount{ font-family: var(--display); font-size:2.1rem; color: var(--clay); }
.tier .problem{ font-weight:600; margin: 8px 0 10px; }
.tier p.detail{ color: var(--ink-soft); font-size:0.94rem; flex:1; }

/* ---------- footer ---------- */
.site-footer{ background: var(--charcoal); color: rgba(247,242,231,0.75); padding: 64px 0 28px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom:48px; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h4{ color:#fff; font-family:var(--body); font-size:0.85rem; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:16px; }
.footer-grid a{ display:block; color: rgba(247,242,231,0.72); text-decoration:none; font-size:0.93rem; margin-bottom:10px; }
.footer-grid a:hover{ color:#fff; }
.footer-brand .brand-mark{ color:#fff; }
.footer-brand-row{ display:flex; align-items:center; gap:12px; margin-bottom:4px; }
.footer-brand-row .brand-logo{ width:38px; height:38px; border-radius:6px; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1); padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:0.82rem; color: rgba(247,242,231,0.5);
}

/* ---------- form ---------- */
.form-card{ background:#fff; border:1px solid var(--line); border-radius:6px; padding:36px; }
.form-row{ margin-bottom:18px; }
.form-row label{ display:block; font-size:0.85rem; font-weight:600; margin-bottom:6px; }
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:3px;
  font-family:var(--body); font-size:0.96rem; background:var(--cream);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline:2px solid var(--gold); border-color:var(--gold); }
.amount-choices{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.amount-choices input{ display:none; }
.amount-choices label{
  border:1px solid var(--line); border-radius:3px; padding:10px 18px; cursor:pointer;
  font-weight:600; font-size:0.92rem; background:var(--cream);
}
.amount-choices input:checked + label{ background: var(--clay); border-color:var(--clay); color:#fff; }

/* ---------- timeline (about page) ---------- */
.timeline{ position:relative; padding-left: 30px; border-left: 2px dashed var(--line); }
.timeline-item{ position:relative; padding-bottom:38px; }
.timeline-item::before{
  content:""; position:absolute; left:-37px; top:4px; width:12px; height:12px; border-radius:50%;
  background: var(--clay); border:2px solid var(--cream);
}
.timeline-item h4{ font-family: var(--body); font-weight:700; font-size:1rem; margin-bottom:4px; }
.timeline-item .yr{ font-family:var(--mono); font-size:0.75rem; color:var(--clay); }

/* ---------- board grid ---------- */
.people-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media (max-width:900px){ .people-grid{ grid-template-columns:repeat(2,1fr); } }
.person{ text-align:center; }
.person .avatar{
  width:96px; height:96px; border-radius:50%; margin:0 auto 14px;
  background: var(--cream-2); border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:1.4rem; color: var(--clay);
  overflow:hidden;
}
.person .avatar img{ width:100%; height:100%; object-fit:cover; }
.person h4{ font-size:0.98rem; margin-bottom:2px; }
.person .role{ font-size:0.82rem; color: var(--ink-soft); font-family:var(--mono); letter-spacing:0.03em; }

/* ---------- funding progress bar ---------- */
.progress-wrap{ margin: 28px 0; }
.progress-labels{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:0.85rem; color:var(--ink-soft); margin-bottom:8px; }
.progress-labels strong{ color:var(--clay); font-size:1rem; }
.progress-track{ width:100%; height:14px; background:var(--cream-2); border-radius:8px; overflow:hidden; border:1px solid var(--line); }
.progress-fill{ height:100%; background:linear-gradient(90deg, var(--clay), var(--gold)); border-radius:8px 0 0 8px; }
.progress-caption{ font-size:0.85rem; color:var(--ink-soft); margin-top:8px; }

/* ---------- article ---------- */
.article-body{ max-width: 680px; margin: 0 auto; }
.article-body h2{ font-size:1.5rem; margin-top:2.2em; }
.article-body p{ font-size:1.08rem; color:var(--ink-soft); line-height:1.75; }
.article-lede{ font-size:1.2rem; color:var(--ink); }
.article-pullquote{
  font-family: var(--display); font-style:italic; font-size:1.35rem; color:var(--ink);
  border-left:3px solid var(--clay); padding-left:24px; margin:2em 0;
}
.article-signoff{ margin-top:2.5em; padding-top:1.5em; border-top:1px solid var(--line); }
.article-signoff .name{ font-family:var(--display); font-weight:600; font-size:1.1rem; color:var(--ink); }
.article-signoff .role{ font-family:var(--mono); font-size:0.82rem; color:var(--clay); letter-spacing:0.03em; }

/* ---------- utility ---------- */
.mt-0{ margin-top:0; }
.center{ text-align:center; }
.narrow{ max-width: 720px; margin-left:auto; margin-right:auto; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}