:root{
  /* Palette sampled from the Kutoa Advocates badge: sky-blue hand #59b8f1, navy hand #1d1e31 */
  --brand-light:#59b8f1;
  --brand:#1789ce;
  --brand-dark:#116da6;
  --blue:#1b7fb8;
  --blue-light:var(--brand-light);
  --ink:#1d1e31;
  /* warm newsprint rather than cool grey — reads as printed matter, not software */
  --paper:#f1eee7;
  --white:#ffffff;
  --muted:#6b6f7d;
  --border:rgba(29,30,49,0.16);
  --rule:rgba(29,30,49,0.85);
  --font-body:"Darker Grotesque","Darker Grotesque Fallback",sans-serif;
  --font-head:"Archivo","Archivo Fallback",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  font-size:19px;
  font-weight:500;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--font-head);font-weight:800;letter-spacing:-0.035em;margin:0;}
/* display type needs real air beneath it before small text starts, and the
   bigger the headline the bigger that gap has to be */
h1{font-size:clamp(42px,calc(56px + 3.6vw),132px);line-height:0.92;margin:0 0 clamp(22px,2.4vw,40px);}
h2{font-size:clamp(32px,4.4vw,84px);line-height:0.94;margin:0 0 clamp(20px,2vw,34px);}
h3{line-height:1.02;font-weight:700;letter-spacing:-0.025em;}
.wrap{max-width:1800px;margin:0 auto;padding:0 clamp(24px,3.5vw,60px);}
.wrap-narrow{max-width:900px;}
.pad{padding:clamp(64px,8vw,124px) 0;}
.paper{background:var(--paper);}
.note{background:var(--ink);color:var(--white);}
.center-text{text-align:center;}

/* Eyebrow */
/* These used to be blue monospace labels with a short rule leading in, sitting
   above almost every heading on the site. The rule read as a stray border and
   the blue pulled the eye away from the headline it was meant to introduce, so
   the labels that only restated their own heading are gone entirely. What is
   left are the ones carrying real information — which mission site, whether a
   chapter is active — and they are now quiet grey type with no rule. */
.eyebrow{
  display:block;
  font-family:var(--font-mono);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  margin:0 0 10px;
}
.eyebrow-light{color:rgba(255,255,255,0.72);}
.eyebrow-sm{margin-bottom:8px;}
.eyebrow-faded{color:var(--muted);opacity:.6;}
.lede{font-size:23.75px;font-weight:600;line-height:1.35;color:var(--muted);max-width:646px;margin:0 0 24px;}
.lede.light{color:#c9cfcd;}
.muted{color:var(--muted);}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 24px 14px;
  border-radius:2px;
  font-family:var(--font-mono);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-size:13px;
  border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:none;}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand);}
.btn-primary:hover{background:var(--ink);border-color:var(--ink);}
.btn-black{background:var(--ink);color:#fff;border-color:var(--ink);}
.btn-black:hover{background:var(--brand);border-color:var(--brand);}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:#fff;}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,0.55);}
.btn-outline-light:hover{background:#fff;color:var(--ink);border-color:#fff;}
.btn-sm{padding:11px 16px 10px;font-size:12px;}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.btn-row.center{justify-content:center;margin-top:44px;}

/* Arrow-fill button — circle on the right expands to fill on hover, arrows swap.
   Vanilla port of the React/Tailwind original so it runs in this static site. */
.btn-af{
  --af-h:56px; --af-icon:40px; --af-gap:7px; --af-padx:28px;
  /* the 2px border shrinks the positioning box, so subtract it or the resting
     "circle" comes out as an ellipse that misaligns with the arrow disc */
  --af-border:2px;
  --af-inset-y:calc((var(--af-h) - (var(--af-border) * 2) - var(--af-icon)) / 2);
  --af-ease:cubic-bezier(0.785,0.135,0.15,0.86);
  --af-bg:var(--brand); --af-text:#fff;
  --af-fill-bg:#fff; --af-fill-text:var(--brand); --af-arrow:var(--brand);

  position:relative;display:inline-flex;align-items:center;justify-content:flex-start;
  height:var(--af-h);border-radius:2px;overflow:hidden;white-space:nowrap;cursor:pointer;
  padding-left:var(--af-padx);
  padding-right:calc(var(--af-icon) + var(--af-gap) + 18px);
  background:var(--af-bg);color:var(--af-text);border:var(--af-border) solid var(--af-bg);
  font-family:var(--font-mono);font-weight:600;font-size:13px;
  text-transform:uppercase;letter-spacing:0.1em;line-height:1;
}
.btn-af .af-label{position:relative;z-index:1;}

/* the expanding disc */
.btn-af .af-fill{
  position:absolute;z-index:2;border-radius:999px;background:var(--af-fill-bg);
  inset:var(--af-inset-y) var(--af-gap) var(--af-inset-y)
        calc(100% - var(--af-gap) - var(--af-icon));
  transition:inset .45s var(--af-ease), background .45s var(--af-ease),
             border-radius .45s var(--af-ease);
}
/* the disc starts round and squares off as it fills, matching the button */
.btn-af:hover .af-fill,.btn-af:active .af-fill{inset:0;border-radius:2px;}

/* second label, clipped to the disc so it reveals as the disc grows */
.btn-af .af-label-fill{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;
  padding-left:var(--af-padx);padding-right:calc(var(--af-icon) + var(--af-gap) + 18px);
  color:var(--af-fill-text);
  clip-path:inset(var(--af-inset-y) var(--af-gap) var(--af-inset-y)
            calc(100% - var(--af-gap) - var(--af-icon)));
  transition:clip-path .45s var(--af-ease), color .45s var(--af-ease);
}
.btn-af:hover .af-label-fill,.btn-af:active .af-label-fill{clip-path:inset(0 0 0 0);}

/* arrow disc */
.btn-af .af-icon{
  position:absolute;right:var(--af-gap);top:50%;transform:translateY(-50%);z-index:3;
  width:var(--af-icon);height:var(--af-icon);border-radius:50%;overflow:hidden;
  background:var(--af-fill-bg);color:var(--af-arrow);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .45s var(--af-ease), color .45s var(--af-ease);
}
.btn-af .af-arrow{
  position:absolute;left:50%;top:50%;width:19px;height:19px;
  transition:transform .45s var(--af-ease);
}
.btn-af .af-arrow-in{transform:translate(-170%,-50%) scale(0);}
.btn-af .af-arrow-out{transform:translate(-50%,-50%) scale(1);}
.btn-af:hover .af-arrow-in,.btn-af:active .af-arrow-in{transform:translate(-50%,-50%) scale(1);}
.btn-af:hover .af-arrow-out,.btn-af:active .af-arrow-out{transform:translate(70%,-50%) scale(0);}

/* light variant for the dark hero */
.btn-af.af-light{
  --af-bg:transparent; --af-text:#fff;
  --af-fill-bg:#fff; --af-fill-text:var(--ink); --af-arrow:var(--ink);
  border-color:rgba(255,255,255,0.6);
}
@media (prefers-reduced-motion:reduce){
  .btn-af .af-fill,.btn-af .af-label-fill,.btn-af .af-icon,.btn-af .af-arrow{transition:none;}
}
@media (max-width:600px){
  .btn-af{--af-h:50px;--af-icon:34px;--af-padx:20px;font-size:15px;}
  .btn-af .af-arrow{width:16px;height:16px;}
}

/* Header */
.site-header{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 32px;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  transition:padding .28s ease, box-shadow .28s ease, background .28s ease;
}
/* Tightens once you start reading so the sticky bar gives back screen space —
   it matters most on a phone, where the header was eating 14% of the viewport. */
.site-header.is-scrolled{
  padding-top:8px;padding-bottom:8px;
  background:rgba(255,255,255,0.97);
  box-shadow:0 1px 18px rgba(29,30,49,0.09);
}
.site-header.is-scrolled .brand-mark{width:40px;height:40px;}

.brand-mark{transition:width .28s ease,height .28s ease;}
.brand{display:flex;align-items:center;gap:12px;}
.brand-mark{width:54px;height:54px;object-fit:contain;}
.brand-text{display:flex;flex-direction:column;line-height:1.05;font-family:var(--font-head);font-weight:700;font-size:20px;}
.brand-text small{font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:0.08em;font-size:10px;color:var(--muted);}
.main-nav{display:flex;gap:28px;font-weight:600;font-size:16px;}
.main-nav a:hover{color:var(--brand);}
.main-nav a.active{color:var(--brand);}
.header-actions{display:flex;gap:10px;align-items:center;}
.nav-toggle{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:8px;}
.nav-toggle span{width:22px;height:2px;background:var(--ink);}

/* Hero */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(0deg, rgba(0,0,0,0.85) 5%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.55) 100%);}
.hero-inner{position:relative;padding:60px clamp(24px,3.5vw,60px) 70px;max-width:1800px;margin:0 auto;width:100%;}
.hero h1{font-size:clamp(44px,calc(64px + 4vw),150px);line-height:0.96;margin-bottom:26px;}
.hero-copy{max-width:646px;font-size:23.75px;font-weight:600;line-height:1.35;color:#e9ece9;margin-bottom:30px;}

/* Marquee */
.marquee{background:var(--brand);color:#fff;overflow:hidden;padding:16px 0;white-space:nowrap;}
.marquee-track{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:17px;letter-spacing:0.03em;text-transform:uppercase;animation:marquee 32s linear infinite;}
.marquee-track span{margin-right:14px;}
.marquee .dot{color:rgba(255,255,255,0.6);}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* Mission cards */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7.6px;margin-top:44px;}
.mission-card{background:transparent;border-radius:0;padding-bottom:0;}
.mission-img{height:304px;background-size:cover;background-position:center;margin-bottom:22px;}
.mission-body{border-left:3px solid var(--ink);padding-left:22px;}
.mission-card h3{font-size:28.8px;margin:3.8px 0 8.55px;}
.mission-card p{color:var(--muted);font-size:19px;}

/* Steps */
.step-list{list-style:none;margin:48px 0 0;padding:24px 0 0;border-top:1px solid var(--border);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:26px;}
.step-list li{display:block;padding:0;border-bottom:none;}
.step-num{display:block;font-family:var(--font-mono);font-size:17.1px;font-weight:700;color:var(--brand);margin-bottom:10px;}
.step-list h3{font-size:28.8px;margin-bottom:8.55px;}
.step-list p{margin:0;color:var(--muted);font-size:19px;}

/* Get list */
.get-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 48px;}
.get-list li{display:flex;align-items:baseline;gap:16px;padding:20px 0;border-bottom:1px solid var(--border);font-size:22.8px;font-weight:700;}
.get-list li span{font-family:var(--font-mono);color:var(--brand);font-weight:700;font-size:17.1px;}

/* Letter */
.letter p{font-size:19.95px;font-weight:600;line-height:1.45;margin:0 0 19.95px;color:#fff;max-width:722px;}
.letter p:first-child,.letter p.emph{font-size:clamp(23.75px,2.18vw,36px);font-weight:750;line-height:1.2;letter-spacing:-0.03em;margin-bottom:24px;}

/* Map */
.map-shell{margin-top:40px;border-radius:0;overflow:hidden;border:1px solid var(--border);}
#leafletMap{height:440px;width:100%;}
.chapter-card{background:#fff;border:1px solid var(--border);border-radius:0;padding:26px 28px;max-width:420px;margin:28px auto 0;}
.chapter-card h3{font-size:26px;margin:2px 0;}

/* Chapters page hero cards */
/* live chapters sit side by side; the "start one" card runs full width beneath */
.chapters-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px;}
.chapters-grid .your-city-card{grid-column:1 / -1;}
.chapter-highlight{display:grid;grid-template-columns:1fr 1.2fr;background:#dcedf8;border-radius:0;overflow:hidden;}
/* New chapters have no photo yet, so the card is a single column and carries
   a left rule instead, rather than leaving an empty image well. */
.chapter-highlight.no-photo{grid-template-columns:1fr;border-left:3px solid var(--brand);background:var(--paper);}
.chapter-highlight.no-photo .chapter-highlight-body{padding:28px 32px;}
.chapter-highlight-img{background-size:cover;background-position:center;min-height:280px;}
.chapter-highlight-body{padding:32px;}
.chapter-highlight-body h3{font-size:32px;margin:2px 0 4px;}
.chapter-highlight-body .muted{font-size:19px;}
.your-city-card{background:var(--paper);border-radius:0;padding:32px;display:flex;flex-direction:column;justify-content:center;}
.your-city-card h3{font-size:30px;color:#c7cbc9;margin-bottom:14px;}
.your-city-card p{color:var(--muted);font-size:18px;margin:0;}

/* Map tabs (chapters page) */
.map-panel{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border);border-radius:0;overflow:hidden;margin-top:40px;}
.map-panel #leafletMap{border-radius:0;height:480px;}
.map-panel-info{padding:36px;background:#fff;}
.map-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.map-tab{padding:10px 18px;border-radius:2px;border:2px solid var(--ink);font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:0.03em;background:#fff;cursor:pointer;}
.map-tab.active{background:var(--ink);color:#fff;}

/* Founder letter (home, about, leadership) */
.founder-hero{display:grid;grid-template-columns:41% 59%;align-items:start;}
.founder-photo{width:100%;height:820px;background-size:cover;background-position:center top;}
.founder-text{padding:clamp(32px,5.8vw,88px);}
.founder-text .eyebrow{color:var(--blue-light);}
.founder-text h2{color:#fff;margin-bottom:24px;}
.founder-close{font-size:19px;font-weight:600;color:#fff;margin:0;}
.founder-sign{font-family:var(--font-head);font-size:29.45px;font-weight:500;line-height:1.4;letter-spacing:-0.03em;color:#fff;margin:0 0 4px;}
.founder-role{font-size:13.68px;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;color:var(--brand-light);margin:0 0 14px;}
.founder-link{display:inline-block;font-size:13.68px;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;color:#fff;text-decoration:underline;text-underline-offset:5px;}
@media (max-width:800px){
  .founder-hero{grid-template-columns:1fr;}
  .founder-photo{height:320px;background-position:center 20%;}
}

/* Team grid */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);margin-top:44px;border:1px solid var(--border);}
.team-card{background:#fff;}
.team-avatar{aspect-ratio:1;background-size:cover;background-position:center top;background-color:var(--paper);}
.team-card h4{font-size:22px;margin:16px 20px 2px;}
.team-card p{font-size:16px;color:var(--muted);margin:0 20px 20px;}
@media (max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr);}}

/* Zigzag detail list (what you get page) */
.detail-list{margin-top:40px;}
.detail-item{display:grid;grid-template-columns:1.222fr 1fr;gap:38px;align-items:center;padding:41.8px 0;border-top:1px solid var(--border);}
.detail-item:first-child{border-top:none;}
.detail-item.flip{grid-template-columns:1fr 1.222fr;}
.detail-item.flip .detail-media{order:-1;}
.detail-media{overflow:hidden;height:342px;background-size:cover;background-position:center;}
.detail-text h3{font-size:clamp(30px,3.4vw,62px);line-height:0.96;margin:8px 0 14px;}
.detail-text p{color:var(--muted);font-size:20.52px;line-height:1.4;margin:0;max-width:646px;}
@media (max-width:800px){
  .detail-item,.detail-item.flip{grid-template-columns:1fr;}
  .detail-item.flip .detail-media{order:0;}
}

.category-list{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:10px;max-width:420px;}
.category-list li{font-size:20.52px;font-weight:600;padding-left:22px;position:relative;}
.category-list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--brand);}

/* Quote block */
.pull-quote{border-left:3px solid var(--brand);padding-left:18px;margin:18px 0 0;font-style:italic;font-size:19px;color:var(--ink);}
.pull-quote cite{display:block;font-style:normal;font-weight:700;color:var(--muted);margin-top:8px;font-size:15px;text-transform:uppercase;letter-spacing:0.06em;}

/* Calendar widget */
.cal-widget{border:1px solid var(--border);border-radius:0;overflow:hidden;margin-top:30px;}
.cal-head{display:flex;align-items:center;justify-content:space-between;padding:24px 32px;}
.cal-head h3{font-size:28px;}
.cal-nav-btn{width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;font-family:var(--font-head);font-weight:700;font-size:18px;}
.cal-nav-btn:hover{background:var(--ink);color:#fff;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:0 24px 24px;}
.cal-dow{padding:8px 0;text-align:center;font-family:var(--font-mono);font-weight:500;color:var(--blue);text-transform:uppercase;font-size:13px;letter-spacing:0.06em;}
.cal-cell{aspect-ratio:1;background:var(--paper);border-radius:0;padding:10px;font-family:var(--font-mono);font-weight:500;font-size:14px;}
.cal-cell.empty{background:transparent;}
.cal-empty-note{padding:0 32px 28px;color:var(--muted);font-size:18px;}

/* Calendar */
.calendar-card{background:var(--paper);border:1px solid var(--border);border-radius:0;padding:34px;margin:20px 0 8px;}
.calendar-card p{margin:6px 0 0;font-size:20px;color:var(--muted);}

/* Gallery */
.gallery-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:7.6px;margin-top:44px;}
.gallery-card{
  position:relative;height:304px;
  background-size:cover;background-position:center;
  display:flex;align-items:flex-end;
}
.gallery-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(0,0,0,0.65), rgba(0,0,0,0) 50%);}
.gallery-card span{position:relative;color:#fff;font-family:var(--font-head);font-weight:700;padding:16px;font-size:17px;}
@media (max-width:800px){.gallery-strip{grid-template-columns:repeat(2,1fr);}}

/* Application form */
.app-form{max-width:820px;margin-top:40px;}
.form-section{border:none;padding:0 0 12px;margin:0 0 44px;background:transparent;}
/* a filled blue bar reads like a form builder; a mono label over a heavy rule
   reads like a printed document */
.form-section legend{
  display:block;width:100%;
  font-family:var(--font-mono);font-weight:500;font-size:12.5px;
  text-transform:uppercase;letter-spacing:0.13em;color:var(--brand);
  padding:0 0 12px;margin-bottom:28px;border-bottom:2px solid var(--ink);
}
.field{padding:0;margin-bottom:28px;}
.field:last-child{margin-bottom:0;}
.field label,.q-label{display:block;font-size:19px;font-weight:600;margin-bottom:10px;line-height:1.35;}
.field .hint{display:block;font-size:17px;font-weight:500;color:var(--muted);margin-top:2px;}
.req{color:#d64545;}
.app-form input[type=text],.app-form input[type=email],.app-form input[type=tel],
.app-form input[type=password],.app-form textarea{
  width:100%;font-family:var(--font-body);font-size:19px;font-weight:500;color:var(--ink);
  background:#fff;border:1px solid var(--border);border-radius:2px;padding:12px 14px;
}
.app-form textarea{resize:vertical;line-height:1.45;}
.app-form input:focus,.app-form textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand);}
.opt{display:flex;align-items:flex-start;gap:12px;font-size:19px;font-weight:500;margin-bottom:12px;cursor:pointer;line-height:1.4;}
.opt input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--brand);flex:0 0 auto;}
.form-error{color:#b3261e;background:#fdecea;border:1px solid #f5c6c2;border-radius:2px;padding:14px 18px;font-size:18px;font-weight:600;margin:0 0 20px;}
.form-error a{text-decoration:underline;}
.form-ok{color:#14532d;background:#e7f5ec;border:1px solid #b6ddc4;border-radius:2px;padding:14px 18px;font-size:17px;font-weight:500;line-height:1.45;margin:0 0 20px;}
.form-note{font-size:17px;margin-top:14px;}
.form-success{max-width:820px;margin-top:40px;border:1px solid var(--border);border-left:4px solid var(--brand);border-radius:0;background:#fff;padding:34px 30px;}
.form-success h3{font-size:32px;margin-bottom:10px;}
@media (max-width:600px){
  .form-section legend{font-size:17px;padding:12px 18px;}
  .field{padding:0 18px;}
}

/* Auth + member portal */
.auth-wrap{max-width:640px;margin-top:36px;}
.auth-tabs{display:flex;gap:10px;margin-bottom:22px;}
.auth-tabs[hidden]{display:none;}   /* author display beats the UA hidden rule */
.auth-tab{
  font-family:var(--font-mono);font-weight:500;font-size:12.5px;text-transform:uppercase;
  letter-spacing:0.13em;padding:10px 2px;border-radius:0;cursor:pointer;
  background:transparent;color:var(--muted);border:none;border-bottom:2px solid transparent;
  margin-right:26px;
}
.auth-tab:hover{color:var(--ink);}
.auth-tab.active{color:var(--ink);border-bottom-color:var(--brand);}
.auth-form{margin-top:0;}

/* Password field with a reveal toggle sitting inside the box */
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:78px;}
.pw-toggle{
  position:absolute;top:50%;right:8px;transform:translateY(-50%);
  font-family:var(--font-mono);font-weight:500;font-size:11.5px;text-transform:uppercase;
  letter-spacing:0.13em;color:var(--muted);background:transparent;border:none;
  padding:6px 8px;cursor:pointer;min-height:40px;display:flex;align-items:center;justify-content:center;
}
.pw-toggle:hover{color:var(--brand);}
.pw-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:1px;}
.link-btn.pw-forgot{display:inline-block;margin-top:2px;padding:11px 0;font-size:15px;font-weight:500;}
.prototype-note{font-size:17px;margin-top:22px;border-left:3px solid var(--brand);padding-left:16px;}

.portal-head{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:34px;}
.portal-head h1{margin:0;}
.portal-score{margin-left:auto;text-align:right;}
.score-num{display:block;font-family:var(--font-mono);font-weight:750;font-size:56px;line-height:1;color:var(--brand);}
.score-label{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:0.18em;color:var(--muted);}

.avatar{
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  font-family:var(--font-head);font-weight:750;flex:0 0 auto;line-height:1;
}

.portal-tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:14px;}
/* underline tabs rather than filled chips */
.portal-tab{
  font-family:var(--font-mono);font-weight:500;font-size:12.5px;text-transform:uppercase;
  letter-spacing:0.13em;padding:10px 2px;border-radius:0;cursor:pointer;
  background:transparent;color:var(--muted);border:none;border-bottom:2px solid transparent;
  margin-right:26px;
}
.portal-tab:hover{color:var(--ink);}
.portal-tab.active{color:var(--ink);border-bottom-color:var(--brand);}
.portal-panel h2{font-size:clamp(30px,4vw,52px);}

.lb{list-style:none;margin:24px 0 0;padding:0;}
.lb-row{display:flex;align-items:center;gap:16px;padding:14px 16px;border-bottom:1px solid var(--border);border-radius:2px;}
.lb-row.is-me{background:#e8f4fc;}
.lb-rank{font-family:var(--font-mono);font-weight:750;font-size:20px;color:var(--muted);width:34px;}
.lb-name{display:flex;flex-direction:column;font-size:21px;font-weight:700;}
.lb-name small{font-size:16px;font-weight:500;color:var(--muted);}
.lb-pts{margin-left:auto;font-family:var(--font-head);font-weight:750;font-size:26px;color:var(--brand);}

.app-form select{
  width:100%;font-family:var(--font-body);font-size:19px;font-weight:500;color:var(--ink);
  background:#fff;border:1px solid var(--border);border-radius:2px;padding:12px 14px;
}
.log-list{list-style:none;margin:18px 0 0;padding:0;}
.log-list li{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--border);}
.log-pts{font-family:var(--font-mono);font-weight:750;font-size:21px;color:var(--brand);width:64px;}
.log-label{display:flex;flex-direction:column;font-size:19px;font-weight:600;}
.log-label small{font-size:16px;font-weight:500;color:var(--muted);}
.log-date{margin-left:auto;font-size:16px;}

.chapter-block{border:1px solid var(--border);border-radius:0;padding:24px 26px;margin-top:20px;background:#fff;}
.chapter-block-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.chapter-block-head h3{font-size:28px;}
.member-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:18px;}
.member-row li{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;}
.member-row small{display:block;font-size:15px;font-weight:500;color:var(--muted);}

.avatar-builder{display:flex;gap:44px;align-items:flex-start;flex-wrap:wrap;margin-top:26px;}
.avatar-controls{flex:1;min-width:280px;}
.avatar-controls .q-label{margin-top:18px;}
.swatches{display:flex;gap:10px;flex-wrap:wrap;}
.sw{
  width:46px;height:46px;border-radius:50%;border:2px solid var(--border);cursor:pointer;
  font-family:var(--font-head);font-weight:750;font-size:18px;
}
.sw.on{border-color:var(--ink);box-shadow:0 0 0 3px rgba(23,137,206,0.28);}
@media (max-width:600px){
  .portal-score{margin-left:0;text-align:left;}
  .lb-name{font-size:19px;}
}

/* Portal: chapter standings + setup notice */
.setup-note{
  max-width:820px;margin:60px auto;padding:26px 28px;border:1px solid var(--border);
  border-left:4px solid var(--brand);border-radius:0;background:#fff;font-size:19px;
}
.setup-note code{background:var(--paper);padding:2px 7px;border-radius:5px;font-size:17px;}
.my-chapter{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin:24px 0 8px;
  padding:24px 28px;border-radius:0;background:#e8f4fc;
}
.my-chapter h3{font-size:30px;margin:2px 0 4px;}
.my-chapter .portal-score{margin-left:auto;}
.chapter-row{flex-wrap:wrap;cursor:pointer;}
.chapter-toggle{margin-left:14px;color:var(--muted);font-size:18px;}
.chapter-members{flex-basis:100%;margin-top:16px;padding-top:16px;border-top:1px solid var(--border);}
.link-btn{
  background:none;border:none;cursor:pointer;color:var(--muted);font-family:var(--font-body);
  font-size:16px;font-weight:700;text-decoration:underline;padding:0 0 0 14px;
}
.link-btn:hover{color:var(--brand);}

/* Footer */
.site-footer{background:var(--ink);color:#c9cfcd;padding:70px 0 24px;font-size:16px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,0.12);}
.footer-logo{width:88px;height:88px;object-fit:contain;margin-bottom:18px;}
.foot-word{font-family:var(--font-head);font-weight:800;font-size:26px;color:#fff;display:block;}
.footer-brand p{margin-top:14px;max-width:320px;}
.footer-col h4{color:#fff;font-family:var(--font-head);font-size:15px;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:16px;}
.footer-col a{display:block;margin-bottom:10px;}
.footer-col a:hover{color:var(--brand);}
.addr{margin-top:16px;color:#8b928f;}
.footer-bottom{padding-top:22px;font-size:14px;color:#8b928f;}

/* Responsive */
/* Between ~960px and ~1200px the nav is still shown but the header runs out of
   room, and the brand wordmark overruns the first nav link. Scale the header
   type down through that band so the two never collide. */
@media (max-width:1200px){
  .site-header{padding:14px 22px;}
  .brand{gap:9px;}
  .brand-mark{width:42px;height:42px;}
  .brand-text{font-size:16px;}
  .brand-text small{font-size:9px;letter-spacing:0.06em;}
  .main-nav{gap:16px;font-size:15px;}
  .btn-sm{padding:9px 14px 10px;font-size:13.5px;}
}

/* The expanded header needs about 1240px: brand (183) + nav (518, now that
   Micro-grants is a sixth link) + the three action buttons (441) + padding and
   gaps. Scaling the type down above is not enough on its own — when the nav is
   squeezed, links wrap onto three lines and the header doubles in height. So
   it folds into the hamburger at the width where it actually stops fitting.
   Re-measure this if another nav item is ever added. */
@media (max-width:1240px){
  .site-header{flex-wrap:wrap;}
  .main-nav{display:none;}
  .main-nav.open{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--border);padding:8px 32px 16px;
    max-height:calc(100vh - 100%);overflow-y:auto;
  }
  .main-nav.open a{padding:14px 0;border-top:1px solid var(--border);}
  .nav-toggle{display:flex;padding:11px;}
}
/* A nav link should shrink the header, never wrap inside it. */
.main-nav a{white-space:nowrap;}

@media (max-width:960px){
  .header-actions .btn-sm:nth-child(2){display:none;}
  .card-grid{grid-template-columns:1fr;}
  .get-list{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .pad{padding:70px 0;}
  .chapters-grid{grid-template-columns:1fr;}
  .chapter-highlight{grid-template-columns:1fr;}
  .map-panel{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .step-list{grid-auto-flow:row;gap:32px;}
}

/* ==========================================================================
   Mobile
   The layout already collapsed to one column, but a phone needs more than
   that: the type was sized for a 1440px canvas, the sticky header ate a
   seventh of the screen, and several controls were under 30px tall.
   ========================================================================== */

/* iOS zooms the page when a focused input is under 16px. Everything here is
   at or above that, so tapping a field never yanks the layout sideways. */
.app-form input[type=text],.app-form input[type=email],.app-form input[type=tel],
.app-form input[type=password],.app-form textarea,.app-form select{font-size:16px;}

/* Was :invalid:not(:placeholder-shown), which matched every empty required
   field — so an untouched form greeted you with a wall of red boxes.
   :user-invalid waits until someone has actually typed or submitted. */
.app-form input:user-invalid,.app-form textarea:user-invalid{border-color:#d64545;}

@media (max-width:760px){
  /* Display type: 132px headlines do not belong on a 390px screen. */
  h1{font-size:clamp(34px,10.5vw,52px);line-height:0.98;margin-bottom:18px;}
  h2{font-size:clamp(28px,8.2vw,40px);line-height:1.02;margin-bottom:16px;}
  h3{font-size:clamp(21px,5.6vw,27px);line-height:1.18;}
  .hero h1{font-size:clamp(36px,11.5vw,58px);line-height:1.0;margin-bottom:18px;}
  .hero-copy,.lede{font-size:18px;line-height:1.45;}
  body{font-size:16.5px;}

  /* Vertical rhythm: a 124px gap between sections is a lot of thumb travel. */
  .pad{padding:52px 0;}
  .pad-xl{padding:64px 0;}
  .pad-tight{padding:30px 0;}
  .wrap{padding-left:20px;padding-right:20px;}

  .hero{min-height:84vh;}
  .hero-inner{padding:40px 20px 48px;}

  /* Buttons stack and go full width instead of wrapping into ragged rows. */
  .btn-row{flex-direction:column;align-items:stretch;gap:10px;}
  .btn-row .btn,.btn-row .btn-af{width:100%;justify-content:center;text-align:center;}

  .mission-img{height:220px;}
  .detail-media{min-height:230px;}
  .team-card{width:100%;}
  .marquee{font-size:15px;}
}

@media (max-width:420px){
  .wrap{padding-left:16px;padding-right:16px;}
  .site-header{padding:12px 16px;}
  .brand-mark{width:38px;height:38px;}
  .brand-text{font-size:15px;}
  .hero-inner{padding:32px 16px 40px;}
}

/* Touch targets. These were 17–27px tall, which is fiddly to hit with a thumb;
   padding grows the tap area without moving anything visually. Desktop keeps
   its tighter rhythm, where a cursor is precise enough. */
@media (max-width:1120px){
  .footer-col a{padding:9px 0;margin-bottom:0;}
}
.founder-link{display:inline-block;padding:10px 0;}

/* Footer column headings are h2 in the markup now (they were h4 directly under
   the page h1, which skips two heading levels for a screen reader). */
.footer-col h2{color:#fff;font-family:var(--font-head);font-weight:700;font-size:15px;
  text-transform:uppercase;letter-spacing:0.08em;line-height:1.3;margin:0 0 16px;}

/* The hairline dividers live on the cards, not on the container. The container
   used to carry the grey background and let it show through 1px grid gaps,
   which only works when the cards fill every cell — with the team trimmed to
   one person, three empty cells rendered as one large grey slab. */
.team-grid{display:flex;flex-wrap:wrap;margin-top:44px;background:none;border:0;gap:0;}
.team-card{background:#fff;width:274px;border:1px solid var(--border);margin:-1px 0 0 -1px;}
.team-card h3{font-size:22px;line-height:1.25;margin:16px 20px 2px;}
@media (max-width:900px){.team-card{width:50%;}}
@media (max-width:480px){.team-card{width:100%;}}

/* Password strength meter */
.pw-meter{margin-top:10px;}
.pw-bar{height:4px;background:rgba(29,30,49,0.12);border-radius:2px;overflow:hidden;}
.pw-bar span{display:block;height:100%;width:0;border-radius:2px;transition:width .25s ease,background .25s ease;}
.pw-bar span.lv0,.pw-bar span.lv1{background:#d64545;}
.pw-bar span.lv2{background:#d89a28;}
.pw-bar span.lv3{background:#3f9f63;}
.pw-bar span.lv4{background:#1f7a46;}
.pw-hint{font-size:14px;color:var(--muted);margin:6px 0 0;line-height:1.4;}

/* Idle warning — the portal signs you out on a shared machine */
.idle-warn{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:300;
  background:var(--ink);color:#fff;border-radius:3px;padding:14px 20px;
  font-size:16px;font-weight:600;box-shadow:0 10px 40px rgba(0,0,0,0.3);
  display:flex;align-items:center;gap:16px;max-width:calc(100vw - 32px);
}
.idle-warn button{
  font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:0.12em;
  background:var(--brand);color:#fff;border:none;border-radius:2px;padding:10px 14px;cursor:pointer;
}
.idle-warn button:hover{background:var(--brand-light);}

/* Two-factor panel in the portal */
.mfa-box{border:1px solid var(--border);background:#fff;padding:24px;margin-top:24px;max-width:640px;}
.mfa-qr{width:190px;height:190px;display:block;margin:18px 0;background:#fff;}
.mfa-secret{font-family:var(--font-mono);font-size:14px;word-break:break-all;background:var(--paper);padding:10px 12px;border:1px solid var(--border);}
.mfa-on{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#1f7a46;}
.mfa-off{color:var(--muted);}

/* Calendar: the next Zoom night, and the day it falls on */
.cal-next{
  display:flex;flex-direction:column;gap:4px;
  border-left:3px solid var(--brand);background:#fff;
  padding:18px 22px;margin:28px 0 8px;max-width:640px;
}
.cal-next strong{font-family:var(--font-head);font-size:22px;line-height:1.2;}
.cal-next span{color:var(--muted);font-size:17px;}
.cal-cell.has-event{position:relative;font-weight:700;color:var(--brand);}
.cal-dot{
  position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--brand);
}

/* Centred text in the single-line fields. Textareas stay left-aligned —
   centring a paragraph of writing makes it genuinely hard to read, and the
   grant questions are paragraphs. */
.app-form input[type=text],.app-form input[type=email],.app-form input[type=tel],
.app-form input[type=password],.app-form select{text-align:center;}
.app-form input::placeholder{text-align:center;}
/* The reveal toggle sits inside the password box, so the centred text has to
   clear it on both sides or it reads as off-centre. Needs to out-rank
   .app-form input[type=password], whose padding shorthand would win otherwise. */
.app-form .pw-wrap input{padding-left:78px;padding-right:78px;}

/* Legal pages — long-form reading, so a narrower measure and looser leading */
.legal{max-width:760px;}
.legal h2{font-size:clamp(24px,2.6vw,34px);line-height:1.15;margin:44px 0 12px;}
.legal h2:first-child{margin-top:0;}
.legal h3{font-size:clamp(18px,1.7vw,21px);line-height:1.25;margin:26px 0 8px;}
.legal p{font-size:17.5px;line-height:1.65;margin:0 0 16px;color:var(--ink);}
.legal p a{text-decoration:underline;}
.legal .category-list{margin:4px 0 18px;}
.legal .category-list li{font-size:17.5px;line-height:1.5;padding:7px 0;}

/* Privacy / Terms links under the footer rule */
.footer-bottom{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;justify-content:space-between;}
.footer-legal{margin:0;}
.footer-legal a{text-decoration:underline;}
.footer-legal a:hover{color:var(--brand);}
.footer-legal span{opacity:.5;margin:0 4px;}
@media (max-width:600px){ .footer-bottom{justify-content:flex-start;} }