/* ==========================================================================
   KEL ELEJE FOUNDATION
   A quiet, single-world design: deep green ground, cream serif, and a list
   that lights gold under the cursor. No grid rules, no section numbers,
   no metric tiles — the goals are the page.
   ========================================================================== */

/* ---------- 1. Typefaces (self-hosted, SIL OFL 1.1 — see fonts/LICENSE) --- */
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:200 700; font-display:swap;
  src:url('fonts/newsreader-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:200 700; font-display:swap;
  src:url('fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/plexmono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/plexmono-400-latin-ext.woff2') format('woff2');
  /* Carries the naira sign, U+20A6. */
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/plexmono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/plexmono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- 2. Tokens ---------------------------------------------------- */
/* One committed visual world — a deep green room — so there is no light
   theme. Every colour is still painted explicitly, and the page never
   borrows the host's ground. */
:root{
  --green:       #05130D;   /* flat ground — no gradient anywhere */
  --green-lift:  #0B2117;

  --cream:       #F0E9D8;
  --cream-soft:  rgba(240,233,216,.74);
  --cream-dim:   rgba(240,233,216,.62);
  --cream-faint: rgba(240,233,216,.55);
  --rule:        rgba(240,233,216,.12);

  --gold:        #E3C583;
  --gold-deep:   #C9A55E;

  --serif:'Newsreader','Iowan Old Style',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --shell: 1180px;
  --pad:   clamp(1.5rem, 5vw, 5rem);
  --ease:  cubic-bezier(.22,.68,.24,1);
}

/* ---------- 3. Reset ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  min-height:100vh;
  background:var(--green);
  color:var(--cream);
  font-family:var(--serif);
  font-size:1.0625rem;
  font-weight:350;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* A whisper of grain so the deep green reads as a surface, not a flat fill. */
body::after{
  content:'';
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.32; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
h1,h2,h3,p,ul,ol,dl,dd,figure{ margin:0; }
ul,ol{ list-style:none; padding:0; }
a{ color:inherit; }
table{ border-collapse:collapse; width:100%; }
::selection{ background:rgba(227,197,131,.26); color:var(--cream); }

.mono{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.13em;
}
.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;
}
:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--green-lift); color:var(--cream);
  padding:.8rem 1.3rem; font-family:var(--mono); font-size:.72rem;
}
.skip:focus{ left:0; }

.shell{
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--pad);
  position:relative; z-index:2;
}

/* ---------- 4. Masthead -------------------------------------------------- */
.masthead{
  position:sticky; top:0; z-index:20;
  background:transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.masthead.is-scrolled{
  background:rgba(5,19,13,.92);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--rule);
}
.masthead-in{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem 2rem; flex-wrap:wrap;
  padding-block:clamp(1.4rem, 3vw, 2.1rem);
}
.mark{
  font-family:var(--serif);
  font-size:1.06rem; font-weight:400; letter-spacing:.005em;
  text-decoration:none; color:var(--cream);
  white-space:nowrap;
}
.tabs{ display:flex; flex-wrap:wrap; gap:.3rem clamp(1.1rem, 2.4vw, 2.2rem); }
.tabs a{
  font-family:var(--mono); font-size:.72rem; font-weight:400;
  letter-spacing:.14em; text-decoration:none;
  color:rgba(240,233,216,.62);
  padding-bottom:.3rem;
  border-bottom:1px solid transparent;
  transition:color .35s var(--ease), border-color .35s var(--ease);
  white-space:nowrap;
}
.tabs a:hover,
.tabs a:focus-visible{ color:var(--gold); }
.tabs a[aria-current="page"]{
  color:var(--cream);
  border-bottom-color:rgba(227,197,131,.55);
}

/* ---------- 5. The north stars ------------------------------------------ */
.north{
  padding-block:clamp(3.5rem, 11vh, 7.5rem) clamp(4rem, 10vh, 8rem);
}
/* Quiet section labels. Mono and lowercase so they read as labels rather than
   headlines, and never compete with the serif rows beneath them. */
.stack-label{
  font-family:var(--mono);
  font-size:.76rem;
  font-weight:400;
  letter-spacing:.18em;
  color:var(--cream-dim);
  margin-bottom:1.15rem;
}
.stack + .stack{ margin-top:clamp(3rem, 8vh, 5rem); }

.goals{ border-top:1px solid var(--rule); }

/* Title left, sub-copy right. The sub-copy is always in the layout and only
   its opacity changes, so revealing it cannot shift the row height. */
.goal{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.25rem, 4vw, 3.5rem);
  align-items:baseline;
  padding:clamp(1.35rem, 2.6vw, 1.9rem) 0 clamp(.7rem, 1.2vw, .95rem);
  border-bottom:1px solid var(--rule);
  transition:border-color .4s var(--ease);
}
.goal-title{
  font-family:var(--serif);
  font-size:clamp(1.28rem, 2.4vw, 2rem);
  font-weight:300;
  line-height:1.22;
  letter-spacing:-.012em;
  color:var(--cream);
  max-width:24ch;
  text-wrap:balance;
}
.goal-sub{
  font-family:var(--serif);
  font-size:clamp(.95rem, 1.15vw, 1.06rem);
  font-weight:300;
  line-height:1.58;
  color:var(--cream-dim);
  max-width:42ch;
  text-wrap:pretty;
}
/* Hover is the gold rule and nothing else — no halo, no bloom. */
.goal:hover,
.goal:focus-within{ border-bottom-color:var(--gold); }

/* Wide, pointer-driven screens only: the sub-copy waits for the cursor.
   Everywhere else it is simply present, because there is no hover to give. */
@media (min-width:861px) and (hover:hover){
  .goal-sub{ opacity:0; transition:opacity .4s var(--ease); }
  .goal:hover .goal-sub,
  .goal:focus-within .goal-sub{ opacity:1; }
}
/* On the community page the notes are the substance, not a reveal. */
.goals--open .goal-sub{ opacity:1; }

/* ---------- 6. Commitment line ------------------------------------------ */
.commitment{
  margin-top:clamp(3.5rem, 9vh, 6rem);
  padding-top:1.4rem;
  border-top:1px solid var(--rule);
  display:flex; align-items:baseline;
  gap:.9rem; flex-wrap:wrap;
  font-family:var(--mono);
}
.commitment .k{
  font-size:.72rem; letter-spacing:.14em; color:var(--cream-dim);
}
.commitment .v{
  font-size:.95rem; font-weight:500; letter-spacing:.02em;
  color:var(--cream); font-variant-numeric:tabular-nums;
}

/* ---------- 7. Interior pages ------------------------------------------- */
.page{ padding-block:clamp(3.5rem, 11vh, 8rem) clamp(4rem, 10vh, 8rem); }
.page-title{
  font-family:var(--serif);
  font-size:clamp(2rem, 5vw, 3.6rem);
  font-weight:300; line-height:1.1; letter-spacing:-.018em;
  max-width:18ch; text-wrap:balance;
}
.page-lede{
  margin-top:clamp(1.5rem, 3vw, 2.25rem);
  font-size:clamp(1.05rem, 1.6vw, 1.28rem);
  font-weight:300; line-height:1.6;
  color:var(--cream-soft);
  max-width:52ch; text-wrap:pretty;
}
.page-note{
  margin-top:clamp(2.5rem, 6vh, 4rem);
  padding-top:1.4rem;
  border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em;
  color:var(--cream-dim);
  max-width:60ch; line-height:2;
}

/* Contact routes, reusing the list's glow language. */
.routes{ margin-top:clamp(3rem, 8vh, 5rem); border-top:1px solid var(--rule); }
.route{
  position:relative;
  border-bottom:1px solid var(--rule);
  transition:border-color .55s var(--ease);
}
.route a{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:.75rem 2rem; flex-wrap:wrap;
  padding:clamp(1.2rem, 2.6vw, 1.7rem) 0 clamp(.7rem, 1.2vw, .95rem);
  text-decoration:none; position:relative;
}
.route-name{
  font-family:var(--serif);
  font-size:clamp(1.3rem, 2.6vw, 2rem);
  font-weight:300; line-height:1.2; letter-spacing:-.012em;
  color:var(--cream);
  transition:color .55s var(--ease), text-shadow .55s var(--ease);
}
.route-meta{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.09em;
  color:var(--cream-dim);
  transition:color .55s var(--ease);
}
.route:hover,.route:focus-within{ border-bottom-color:var(--gold); }
.route:hover .route-name,.route:focus-within .route-name{ color:var(--gold); }
.route:hover .route-meta,.route:focus-within .route-meta{ color:var(--gold-deep); }

.offices{
  margin-top:clamp(3rem, 7vh, 4.5rem);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap:2.5rem;
}
.office h2{
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.16em; color:var(--cream-dim);
  padding-bottom:.85rem; margin-bottom:1.1rem;
  border-bottom:1px solid var(--rule);
}
.office address{
  font-style:normal; font-family:var(--mono);
  font-size:.76rem; letter-spacing:.05em; line-height:2.1;
  color:var(--cream-soft);
}

/* ---------- 8. Footer ---------------------------------------------------- */
.footer{
  margin-top:auto;
  padding-block:clamp(3rem, 7vh, 4.5rem);
}
.footer-in{
  border-top:1px solid var(--rule);
  padding-top:1.5rem;
  display:flex; justify-content:space-between; align-items:baseline;
  gap:.75rem 2rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  color:var(--cream-faint);
}
.footer-in a{ text-decoration:none; transition:color .35s var(--ease); }
.footer-in a:hover{ color:var(--gold); }

/* ---------- 9. Entrance -------------------------------------------------- */
/* A slow settle on load. Gated behind .js so nothing is hidden without it. */
.js [data-enter]{ opacity:0; transform:translateY(12px); }
.js [data-enter].is-in{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:var(--d,0ms);
}
@media (prefers-reduced-motion:reduce){
  .js [data-enter]{ opacity:1; transform:none; transition:none; }
  .goal,.goal-sub,.route,.route-name,.route-meta,.tabs a{ transition:none; }
}
@media print{ .js [data-enter]{ opacity:1; transform:none; } }

/* ---------- 10. Responsive ---------------------------------------------- */
@media (max-width:860px){
  .goal{ grid-template-columns:1fr; gap:.85rem; align-items:start; }
}
@media (max-width:720px){
  .masthead-in{ flex-direction:column; align-items:flex-start; gap:.9rem; }
  .tabs{ gap:1.4rem; }
  .goal-title,.goal-sub{ max-width:none; }
  .commitment{ flex-direction:column; gap:.4rem; }
}