/* ===========================================================
   FabLab Winam — Design Tokens
   Palette drawn from the lab's own materials: workshop sand,
   forest-charcoal ink, Lake Victoria teal, fabrication-spark
   amber, and Kisumu red-earth clay. Kept soft and low-glare —
   no pure white, no pure black — for long, comfortable reading.
   =========================================================== */
:root{

  /* ==================================================
     FABLAB WINAM DESIGN TOKENS
     Inspired by the logo colours
     ================================================== */

  /* Surfaces */
  --paper:        #F8F8F5;
  --paper-dim:    #F1F3F1;
  --card:         #FFFFFF;

  /* Typography */
  --ink:          #02416d;
  --ink-soft:     #4E5D68;
  --ink-faint:    #7B8792;

  --line:         #DCE4E8;

  /* Dark Surfaces */
  --dusk:         #0F1720;
  --dusk-card:    #17222C;
  --dusk-text:    #F5F7F8;
  --dusk-line:    #2E414D;

  /* ===========================
     Brand Colours
     =========================== */

  /* Logo Blue */
  --teal:         #1677C8;

  /* Dark Blue */
  --teal-deep:    #0F5D99;

  /* Logo Green */
  --green:        #2CA56A;

  /* Deep Green */
  --green-deep:   #1E844F;

  /* Signature Blue-Green Blend */
  --brand:        #148C91;
  --brand-deep:   #106C70;

  /* Logo Yellow */
  --amber:        #F3B228;

  --amber-deep:   #D08D0B;

  /* Logo Red */
  --clay:         #DD4B39;

  /* Soft Background Versions */
  --blue-soft:    #EAF4FD;
  --green-soft:   #EDF8F2;
  --amber-soft:   #FFF8E2;
  --red-soft:     #FDECEA;

  /* Premium Gradient */
  --brand-gradient:
      linear-gradient(
        135deg,
        #1677C8 0%,
        #148C91 40%,
        #2CA56A 75%,
        #F3B228 100%
      );

  /* Typography */
  --font-display: "Fraunces","Iowan Old Style",Georgia,serif;
  --font-body: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono: "IBM Plex Mono","SFMono-Regular",Menlo,monospace;

  /* Layout */
  --radius:6px;
  --container:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);

}


html, body{
  overflow-x:hidden;
  width:100%;
  max-width:100%;
  overscroll-behavior-x:none;   /* stops the iOS/Android rubber-band side-swipe */
}

/* nothing on the page is ever allowed to force horizontal scroll */
img, video, svg, iframe, canvas, table{
  max-width:100%;
  height:auto;
}

/* long words/links can't stretch a container past the viewport */
p, h1, h2, h3, h4, h5, a, span, li{
  overflow-wrap:break-word;
  word-break:break-word;
}


*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

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;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ margin:0; font-family:var(--font-display); font-weight:600; color:var(--ink); letter-spacing:-0.01em; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--brand);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--brand);
  display:inline-block;
}
.on-dark .eyebrow{ color:var(--green); }
.on-dark .eyebrow::before{ background:var(--amber); }

.section{ padding:112px 0; position:relative; }
.section-tight{ padding:72px 0; }
@media (max-width:780px){
  .section{ padding:72px 0; }
  .section-tight{ padding:48px 0; }
  .container{ padding:0 20px; }
}

.section-head{
  max-width:680px;
  margin-bottom:56px;
}
.section-head h2{
  font-size:clamp(28px,3.6vw,44px);
  line-height:1.08;
  margin-top:16px;
}
.section-head p{
  margin-top:18px;
  color:var(--ink-soft);
  font-size:17px;
  max-width:56ch;
}

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 26px;
  border-radius:var(--radius);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:0.01em;
  border:1px solid transparent;
  transition:transform .35s var(--ease), background .25s ease, border-color .25s ease, color .25s ease;
}
.btn-primary{
  background:var(--brand-gradient);
  color:white;
}

.btn-primary:hover{
  background:var(--brand-deep);
}
.btn-ghost{ border-color:var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }
.on-dark .btn-ghost{ border-color:var(--dusk-line); color:var(--dusk-text); }
.on-dark .btn-ghost:hover{ background:var(--dusk-text); color:var(--dusk); }
.btn svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translate(3px,-3px); }

.pill{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:20px;
  color:var(--ink-soft);
}

/* reveal-on-scroll */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
[data-reveal-stagger] > *{ transition-delay:calc(var(--i,0) * 90ms); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--line);
  border-radius:var(--radius);
  width:42px; height:42px;
  align-items:center; justify-content:center;
}
.nav-toggle svg{ width:18px; height:18px; }

@media (max-width:960px){
  .main-nav{
    position:fixed; inset:0 0 0 auto;
    width:min(360px,86vw); height:100vh;
    background:var(--paper);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:100px 32px 32px; gap:30px;
    transform:translateX(100%);
    transition:transform .45s var(--ease);
    border-left:1px solid var(--line);
    overflow-y:auto;
    z-index:250;
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; gap:22px; width:100%; }
  .main-nav a{ font-size:20px; font-family:var(--font-display); }
  .main-nav .nav-cta{ display:block; }   /* show the mobile Donate button */

  .header-cta-desktop{ display:none; }   /* hide the desktop Donate button */
  .nav-toggle{ display:flex; }

  body.nav-locked{ overflow:hidden; }
}