/* Collective Uplifting Initiative
   ---------------------------------------------------------------------------
   Design note. This organisation's real differentiator is SPECIFICITY: named
   schools, named donors, named objects ("three Igloo water dispensers"). Most
   small charities write in abstractions. So the page is built like a clear
   public record — precise labels, numbers set large, structured lists — rather
   than the soft pastel-and-icon-card template.

   There is no photography available. Rather than fake it with stock images of
   people who are not theirs, the page carries its weight typographically, and
   the single graphic motif is lifted from the logo: the arc, and the star.
   --------------------------------------------------------------------------- */

:root{
  /* Anchored on deep teal, not cream. Cream becomes the accent, which is what
     keeps it from reading as another pastel nonprofit template. */
  --ink:#0F2A36;
  --ink-2:#16394A;
  --deep:#0B2028;
  --cream:#FBF4E6;
  --paper:#FFFDF8;
  --body:#3E5661;
  --muted:#7C8F99;
  --line:#E3DACA;
  --line-d:rgba(255,253,248,.16);
  --sun:#F2C43C;
  --sun-d:#D9A91F;
  --leaf:#7FA84A;
  --sky:#5FA3C0;
  --sky-l:#8FC3D8;

  --sans:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --disp:"Fraunces","Playfair Display",Georgia,serif;

  --wrap:1160px;
  --gut:clamp(20px,4vw,40px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--cream);color:var(--body);font-family:var(--sans);
  font-size:17.5px;line-height:1.62;-webkit-font-smoothing:antialiased;font-optical-sizing:auto}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:760px}
.skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:13px 20px;z-index:200}
.skip:focus{left:0;top:0}

/* ---------- type ----------
   Display sizes are deliberately large. Timid headline sizing is the single
   biggest thing that makes a site read as amateur. */
h1,h2,h3,h4{font-family:var(--disp);color:var(--ink);font-weight:600;
  line-height:1.03;letter-spacing:-.022em;text-wrap:balance}
h1{font-size:clamp(44px,7.4vw,92px);line-height:.98;letter-spacing:-.032em}
h2{font-size:clamp(32px,4.6vw,58px)}
h3{font-size:clamp(21px,2.1vw,26px);line-height:1.18;letter-spacing:-.012em}
h4{font-size:19px;line-height:1.25}
p{max-width:64ch}
.lede{font-size:clamp(18px,1.75vw,22px);line-height:1.5}
.eyebrow{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sky);display:flex;align-items:center;gap:11px}
.eyebrow::before{content:"";width:26px;height:1.5px;background:currentColor;flex:0 0 auto}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:100;background:rgba(251,244,230,.86);
  backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line)}
.top.dark{background:rgba(11,32,40,.72);border-bottom-color:var(--line-d)}
.top .bar{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:40px;height:40px;border-radius:8px}
.brand b{font-family:var(--disp);font-weight:600;font-size:17px;color:var(--ink);
  line-height:1.05;letter-spacing:-.015em;max-width:8.5em;display:block}
.top.dark .brand b{color:#fff}
nav ul{list-style:none;display:flex;align-items:center;gap:2px}
nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 15px;text-decoration:none;
  color:var(--body);font-weight:600;font-size:15.5px;border-radius:7px;letter-spacing:-.005em}
nav a:hover{color:var(--ink);background:rgba(15,42,54,.055)}
nav a[aria-current="page"]{color:var(--ink);background:rgba(15,42,54,.06)}
.top.dark nav a{color:rgba(251,244,230,.72)}
.top.dark nav a:hover,.top.dark nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.09)}
nav a.give{background:var(--sun);color:var(--deep);margin-left:10px;padding:0 22px;font-weight:700}
nav a.give:hover{background:var(--sun-d);color:var(--deep)}
.burger{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:9px;
  background:none;cursor:pointer;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:1.7px;background:var(--ink)}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:28px}
.top.dark .burger{border-color:var(--line-d)}.top.dark .burger span{background:#fff}
@media (max-width:880px){
  .burger{display:block}
  nav{position:absolute;left:0;right:0;top:100%;background:var(--cream);
    border-bottom:1px solid var(--line);padding:10px var(--gut) 20px;display:none}
  .top.dark nav{background:var(--deep);border-bottom-color:var(--line-d)}
  nav.open{display:block}
  nav ul{flex-direction:column;align-items:stretch;gap:2px}
  nav a{min-height:54px;font-size:17px}
  nav a.give{margin:10px 0 0;justify-content:center}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--deep);color:var(--cream);overflow:hidden;
  padding:clamp(72px,11vw,150px) 0 clamp(64px,9vw,120px)}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 62% at 78% 6%,rgba(95,163,192,.24),transparent 62%),
             radial-gradient(64% 48% at 6% 96%,rgba(242,196,60,.13),transparent 66%)}
.hero .wrap{position:relative}
.hero h1{color:#fff;margin:22px 0 0}
.hero h1 em{font-style:normal;color:var(--sun)}
.hero .lede{margin-top:26px;max-width:32ch;color:rgba(251,244,230,.82)}
.hero .grid{display:grid;grid-template-columns:1.45fr .9fr;gap:clamp(32px,6vw,80px);align-items:end}
@media (max-width:940px){.hero .grid{grid-template-columns:1fr;gap:44px}}
.heroside{border-left:1px solid var(--line-d);padding-left:clamp(20px,3vw,34px)}
@media (max-width:940px){.heroside{border-left:0;border-top:1px solid var(--line-d);
  padding-left:0;padding-top:30px}}
.heroside dl{display:grid;gap:24px}
.heroside dt{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sky-l);margin-bottom:6px}
.heroside dd{font-family:var(--disp);font-size:20px;color:#fff;line-height:1.2;letter-spacing:-.012em}
.arcmark{position:absolute;right:-6%;top:-14%;width:min(560px,62vw);opacity:.16;color:var(--sky);
  pointer-events:none}
@media (max-width:940px){.arcmark{right:-18%;top:auto;bottom:-8%;width:70vw;opacity:.1}}

/* ---------- buttons ---------- */
.acts{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}
.b{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:58px;
  padding:0 30px;border-radius:9px;text-decoration:none;font-weight:700;font-size:17px;
  border:1.5px solid transparent;letter-spacing:-.005em;cursor:pointer;font-family:inherit}
.b:focus-visible,nav a:focus-visible,.burger:focus-visible,button:focus-visible,
summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2.5px solid var(--sun);outline-offset:2px}
.b-sun{background:var(--sun);color:var(--deep)}
.b-sun:hover{background:var(--sun-d)}
.b-ink{background:var(--ink);color:#fff}
.b-ink:hover{background:var(--ink-2);color:#fff}
.b-line{border-color:rgba(251,244,230,.32);color:#fff;background:transparent}
.b-line:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.b-out{border-color:var(--line);color:var(--ink);background:var(--paper)}
.b-out:hover{border-color:var(--ink)}

/* ---------- sections ---------- */
section{padding:clamp(64px,9vw,124px) 0;position:relative}
section.sm{padding:clamp(46px,6vw,80px) 0}
.bg-paper{background:var(--paper)}
.bg-deep{background:var(--deep);color:rgba(251,244,230,.78)}
.bg-deep h2,.bg-deep h3{color:#fff}
.bg-deep .lede{color:rgba(251,244,230,.8)}
.head{margin-bottom:clamp(38px,5vw,64px)}
.head h2{margin-top:16px}
.head .lede{margin-top:20px}

/* ---------- the ledger ----------
   A structured record rather than icon cards. The numbering is real: these are
   the four things the organisation actually funds. */
.ledger{border-top:1px solid var(--line)}
.bg-deep .ledger{border-top-color:var(--line-d)}
.lrow{display:grid;grid-template-columns:76px 1fr 1.15fr;gap:clamp(16px,3vw,44px);
  padding:clamp(26px,3.4vw,40px) 0;border-bottom:1px solid var(--line);align-items:start}
.bg-deep .lrow{border-bottom-color:var(--line-d)}
@media (max-width:820px){.lrow{grid-template-columns:52px 1fr;gap:18px}
  .lrow p{grid-column:2/-1;margin-top:-2px}}
.lnum{font-family:var(--disp);font-size:clamp(28px,3.2vw,42px);color:var(--sky);line-height:1;
  font-variant-numeric:lining-nums;letter-spacing:-.02em}
.bg-deep .lnum{color:var(--sun)}
.lrow p{font-size:16.5px;max-width:52ch}
.bg-deep .lrow p{color:rgba(251,244,230,.72)}

/* ---------- figures ---------- */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.bg-deep .figs{background:var(--line-d);border-color:var(--line-d)}
.fig{background:var(--paper);padding:clamp(24px,3vw,34px)}
.bg-deep .fig{background:var(--deep)}
.fig .n{font-family:var(--disp);font-size:clamp(36px,4.2vw,54px);color:var(--ink);line-height:.95;
  font-variant-numeric:lining-nums;letter-spacing:-.028em}
.bg-deep .fig .n{color:var(--sun)}
.fig .l{font-size:14.5px;color:var(--muted);margin-top:12px;line-height:1.45;max-width:26ch}
.bg-deep .fig .l{color:rgba(251,244,230,.64)}

/* ---------- credits ---------- */
.credits{border-top:1px solid var(--line)}
.credit{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(16px,3vw,40px);
  padding:clamp(22px,2.8vw,32px) 0;border-bottom:1px solid var(--line);align-items:baseline}
@media (max-width:720px){.credit{grid-template-columns:1fr;gap:8px}}
.credit h3{font-size:clamp(22px,2.4vw,30px)}
.credit .role{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sky);margin-bottom:10px}
.credit p{font-size:16.5px}

/* ---------- pull quote ---------- */
.pull{border-left:3px solid var(--sun);padding:8px 0 8px clamp(20px,3vw,32px);
  font-family:var(--disp);font-size:clamp(21px,2.5vw,30px);line-height:1.28;color:var(--ink);
  letter-spacing:-.015em;max-width:26ch}
.bg-deep .pull{color:#fff}

/* ---------- forms ---------- */
label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin:24px 0 8px}
label:first-of-type{margin-top:0}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;min-height:56px;border:1.5px solid var(--line);border-radius:8px;padding:15px 16px;
  font:inherit;font-size:16.5px;color:var(--ink);background:var(--paper)}
textarea{min-height:150px;resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{border-color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.b.full{width:100%;margin-top:28px}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:6px;
  padding:clamp(26px,4vw,40px)}

/* ---------- prose ---------- */
.prose h2{font-size:clamp(25px,2.7vw,32px);margin:44px 0 12px}
.prose h3{font-size:20px;margin:28px 0 8px}
.prose p,.prose li{font-size:17px;max-width:68ch}
.prose ul{margin:14px 0 14px 20px}
.prose li{margin-bottom:9px}
.prose a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- notices ---------- */
.flag{background:#FFF7E0;border:1px solid #E8D08A;border-left:3px solid var(--sun-d);
  border-radius:4px;padding:18px 20px;font-size:15.5px;color:#5C4708;margin:28px 0}
.flag b{color:#3D2F03}
.flag p{max-width:none;font-size:15.5px}
.note{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--sky);
  border-radius:4px;padding:22px 24px;margin-top:30px}
.note b{display:block;font-family:var(--disp);font-size:21px;color:var(--ink);margin-bottom:8px;
  letter-spacing:-.012em}
.note p{max-width:58ch}
.note a{font-weight:700;text-decoration:underline;text-underline-offset:3px;
  display:inline-block;padding:8px 0}

/* ---------- closing band ---------- */
.close{background:var(--ink);color:rgba(251,244,230,.8);position:relative;overflow:hidden;
  text-align:center}
.close::before{content:"";position:absolute;inset:0;
  background:radial-gradient(58% 78% at 50% 0%,rgba(242,196,60,.16),transparent 68%)}
.close .wrap{position:relative}
.close h2{color:#fff}
.close .acts{justify-content:center}
.close .lede{margin:22px auto 0;max-width:46ch;color:rgba(251,244,230,.8)}

/* ---------- footer ---------- */
.foot{background:var(--deep);color:rgba(251,244,230,.72);padding:clamp(56px,7vw,84px) 0 34px;
  font-size:15.5px}
.foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(28px,5vw,56px)}
@media (max-width:760px){.foot .cols{grid-template-columns:1fr 1fr;gap:32px}
  .foot .cols > :first-child{grid-column:1/-1}}
.foot h4{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--sky-l);margin-bottom:14px}
.foot ul{list-style:none;display:flex;flex-direction:column}
.foot a{color:rgba(251,244,230,.78);text-decoration:none}
.foot ul a{display:inline-flex;align-items:center;min-height:40px}
.foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot .brand b{color:#fff}
.foot p{max-width:34ch;margin-top:14px;color:rgba(251,244,230,.62);font-size:15px}
.soc{display:flex;gap:9px;margin-top:20px}
.soc a{width:42px;height:42px;border:1px solid var(--line-d);border-radius:7px;display:grid;
  place-items:center;font-size:12px;font-weight:700;letter-spacing:.06em}
.soc a:hover{border-color:var(--sun);color:var(--sun);text-decoration:none}
.rule{border-top:1px solid var(--line-d);margin-top:44px;padding-top:22px;display:flex;
  flex-wrap:wrap;gap:10px 26px;justify-content:space-between;font-size:13.5px;
  color:rgba(251,244,230,.5)}

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