/* ==========================================================================
   EDISAN TRUST — design tokens
   Signature: the "sunrise arc" — radiating rays + a horizon wave, echoing
   the trust's own emblem (sun / rising hands / people) and its water &
   dawn-themed community work.
   ========================================================================== */

:root{
  --ink:        #22262B;
  --ink-soft:   #5B5F66;
  --ink-faint:  #8B8E93;
  --paper:      #FAF6ED;
  --paper-alt:  #F0E8D6;
  --paper-deep: #E7DCC1;
  --line:       rgba(34,38,43,.14);
  --white:      #FFFFFF;

  --accent:      #E2601F;
  --accent-ink:  #FFF5EC;
  --accent-deep: #B94A16;

  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 28px;

  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Work Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  --maxw: 1180px;
}

/* per-page accent palettes -------------------------------------------- */
body.page-home     { --accent:#E2601F; --accent-deep:#B94A16; --accent-ink:#FFF5EC; }
body.page-about     { --accent:#1D6F93; --accent-deep:#134F6A; --accent-ink:#EAF6FC; }
body.page-programs  { --accent:#3E7D4C; --accent-deep:#2A5C36; --accent-ink:#EFF8F0; }
body.page-gallery   { --accent:#C98A18; --accent-deep:#9C6A0F; --accent-ink:#FFF6E4; }
body.page-contact   { --accent:#B8452E; --accent-deep:#8E331F; --accent-ink:#FDECE7; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0 0 .4em; font-weight:600; line-height:1.08; }
p{ margin:0 0 1em; color:var(--ink-soft); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-deep);
  display:inline-flex;
  align-items:center;
  gap:.55em;
  margin-bottom:.9em;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--accent);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,246,237,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; max-width:var(--maxw); margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:42px; height:42px; border-radius:50%; object-fit:cover; }
.brand .name{ font-family:var(--font-display); font-size:1.12rem; font-weight:700; line-height:1.1; }
.brand .tag{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; color:var(--ink-faint); text-transform:uppercase; }

.nav-links{ display:flex; gap:2px; align-items:center; }
.nav-links a{
  padding:9px 16px; border-radius:999px; font-size:.92rem; font-weight:500;
  color:var(--ink-soft);
  transition:background .18s ease, color .18s ease;
}
.nav-links a:hover{ background:var(--paper-alt); color:var(--ink); }
.nav-links a.active{ background:var(--accent); color:var(--accent-ink); }
.nav-cta{
  margin-left:8px; padding:9px 18px; border-radius:999px;
  background:var(--ink); color:var(--paper) !important; font-weight:600; font-size:.88rem;
}
.nav-toggle{ display:none; }

@media (max-width:880px){
  .nav-links{
    position:fixed; inset:64px 16px auto 16px; flex-direction:column; align-items:stretch;
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m);
    padding:10px; box-shadow:0 18px 40px rgba(34,38,43,.14);
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:all .22s ease;
  }
  .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-links a{ text-align:center; }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px;
  }
  .nav-toggle span{ width:22px; height:2px; background:var(--ink); border-radius:2px; }
}

/* ---------- sunrise arc signature ---------- */
.sunrise{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper-alt) 100%);
}
.sunrise .rays{
  position:absolute; left:50%; top:-6%; width:1400px; height:1400px;
  transform:translateX(-50%);
  background:
    repeating-conic-gradient(from 0deg,
      color-mix(in srgb, var(--accent) 16%, transparent) 0deg 4deg,
      transparent 4deg 16deg);
  border-radius:50%;
  -webkit-mask-image: radial-gradient(circle, black 30%, transparent 66%);
          mask-image: radial-gradient(circle, black 30%, transparent 66%);
  pointer-events:none;
}
.sunrise .arc{
  position:absolute; left:50%; bottom:-220px; width:1100px; height:1100px;
  transform:translateX(-50%);
  border-radius:50%;
  border:1px solid var(--line);
  pointer-events:none;
}
.sunrise .arc.a2{ width:900px; height:900px; bottom:-190px; border-color:color-mix(in srgb, var(--accent) 30%, var(--line)); }

.horizon-divider{
  width:100%; height:46px; display:block;
  background:var(--paper);
}
.horizon-divider path{ fill:var(--accent); opacity:.14; }

/* ---------- hero ---------- */
.hero{ position:relative; padding:96px 0 70px; }
.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;
  position:relative; z-index:2;
}
.hero h1{ font-size:clamp(2.3rem, 4.6vw, 3.6rem); letter-spacing:-.01em; }
.hero h1 em{ font-style:normal; color:var(--accent-deep); }
.hero .lede{ font-size:1.12rem; max-width:44ch; }
.hero-actions{ display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px; border-radius:999px; font-weight:600; font-size:.94rem;
  border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary{ background:var(--accent); color:var(--accent-ink); box-shadow:0 10px 24px -8px color-mix(in srgb, var(--accent) 60%, transparent); }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent-deep); }

.hero-figure{
  position:relative; border-radius:var(--radius-l); overflow:hidden;
  aspect-ratio:4/5; box-shadow:0 30px 60px -24px rgba(34,38,43,.35);
}
.hero-figure img{ width:100%; height:100%; object-fit:cover; }
.hero-figure::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(20,16,10,.55) 100%);
}
.hero-badge{
  position:absolute; left:18px; bottom:18px; z-index:2; color:#fff;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em;
}
.hero-badge strong{ display:block; font-family:var(--font-display); font-size:1.5rem; font-weight:700; }

/* ---------- stat strip ---------- */
.stat-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden;
  margin-top:64px;
}
.stat{ background:var(--white); padding:26px 20px; text-align:left; }
.stat b{ display:block; font-family:var(--font-display); font-size:2rem; color:var(--accent-deep); }
.stat span{ font-size:.82rem; color:var(--ink-faint); }
@media (max-width:760px){ .stat-strip{ grid-template-columns:repeat(2,1fr);} }

/* ---------- generic section ---------- */
section{ padding:78px 0; }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head h2{ font-size:clamp(1.7rem,3vw,2.3rem); }
.alt{ background:var(--paper-alt); }

/* ---------- program / card grid ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@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:var(--white); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:26px 24px; position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; top:-30px; right:-30px; width:80px; height:80px;
  border-radius:50%; background:color-mix(in srgb, var(--accent) 16%, transparent);
}
.card .num{ font-family:var(--font-mono); font-size:.72rem; color:var(--accent-deep); letter-spacing:.08em; }
.card h3{ font-size:1.12rem; margin-top:.5em; }
.card p{ font-size:.94rem; margin-bottom:0; }

/* ---------- mission / vision panels ---------- */
.panel{
  border-radius:var(--radius-l); padding:40px 36px; position:relative;
  border:1px solid var(--line); background:var(--white);
}
.panel .quote-mark{ font-family:var(--font-display); font-size:3.4rem; color:var(--accent); line-height:.5; display:block; margin-bottom:18px; }
.panel h3{ font-size:1.3rem; }
.panel p{ font-size:1.02rem; color:var(--ink); }

/* ---------- timeline (programs page) ---------- */
.timeline{ position:relative; padding-left:34px; }
.timeline::before{ content:""; position:absolute; left:6px; top:6px; bottom:6px; width:1px; background:var(--line); }
.t-item{ position:relative; padding-bottom:38px; }
.t-item:last-child{ padding-bottom:0; }
.t-item::before{
  content:""; position:absolute; left:-34px; top:4px; width:13px; height:13px; border-radius:50%;
  background:var(--paper); border:2px solid var(--accent);
}
.t-item h3{ font-size:1.14rem; margin-bottom:.3em; }
.t-item .meta{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-faint); letter-spacing:.05em; text-transform:uppercase; margin-bottom:.6em; display:block; }

/* ---------- gallery ---------- */
.masonry{ column-count:3; column-gap:16px; }
.masonry figure{ break-inside:avoid; margin:0 0 16px; border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--line); background:var(--white); }
.masonry img{ width:100%; display:block; transition:transform .35s ease; }
.masonry a:hover img{ transform:scale(1.045); }
.masonry figcaption{ padding:12px 14px 14px; font-size:.82rem; color:var(--ink-soft); }
.masonry figcaption b{ display:block; color:var(--ink); font-size:.88rem; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
@media (max-width:900px){ .masonry{ column-count:2; } }
@media (max-width:560px){ .masonry{ column-count:1; } }

.filter-bar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:30px; }
.filter-bar button{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em; text-transform:uppercase;
  padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:var(--white); cursor:pointer;
  color:var(--ink-soft);
}
.filter-bar button.active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

/* lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(20,16,10,.86); display:none; align-items:center; justify-content:center;
  z-index:100; padding:30px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(900px,92vw); max-height:86vh; border-radius:10px; }
.lightbox .close{ position:absolute; top:22px; right:28px; color:#fff; font-size:1.6rem; cursor:pointer; font-family:var(--font-mono); }

/* ---------- profile / info table ---------- */
.info-table{ width:100%; border-collapse:collapse; }
.info-table tr{ border-bottom:1px solid var(--line); }
.info-table td{ padding:13px 6px; font-size:.92rem; vertical-align:top; }
.info-table td:first-child{ width:38%; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint); }
.info-table td:last-child{ color:var(--ink); font-weight:500; }

.tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.tag{ font-size:.8rem; padding:6px 13px; border-radius:999px; background:var(--paper-alt); border:1px solid var(--line); }

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--ink); color:var(--paper); border-radius:var(--radius-l);
  padding:52px 44px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.cta-band h2{ color:var(--paper); font-size:1.9rem; max-width:20ch; }
.cta-band p{ color:#C9C6BE; max-width:40ch; }

/* ---------- contact page ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-item{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.contact-item .ic{
  width:40px; height:40px; border-radius:50%; background:var(--paper-alt); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:var(--font-mono); font-size:.8rem; color:var(--accent-deep);
}
.map-frame{ border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--line); height:340px; }

form.donate-form{ display:grid; gap:14px; }
form.donate-form input, form.donate-form select, form.donate-form textarea{
  width:100%; padding:13px 15px; border-radius:10px; border:1px solid var(--line); font-family:var(--font-body); font-size:.95rem; background:var(--white);
}
form.donate-form label{ font-size:.78rem; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); display:block; margin-bottom:5px; }

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:#C9C6BE; padding:56px 0 26px; margin-top:60px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:40px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer h4{ color:var(--paper); font-size:.98rem; margin-bottom:14px; }
.site-footer a{ color:#C9C6BE; }
.site-footer a:hover{ color:var(--paper); }
.footer-links{ display:flex; flex-direction:column; gap:9px; font-size:.92rem; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:20px; font-size:.8rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:#8B8880; }

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }