:root{
  --paper:#F7F9F5; --paper-2:#EDF3EA; --rule:#D5E3D4; --margin:#F98300;
  --ink:#13211B; --ink-soft:#4A5A52; --green:#005218; --green-2:#0A6B26;
  --gold:#F98300; --on-green:#F6F8F3; --line:#C9D6C7;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#101A15; --paper-2:#16231C; --rule:#1F3128; --margin:#FF9A2E;
    --ink:#E6EEE8; --ink-soft:#A6B7AD; --green:#0A3D1A; --green-2:#3FAE5C;
    --gold:#FF9A2E; --on-green:#EEF4EF; --line:#2A4035;
  }
}
:root[data-theme="dark"]{
  --paper:#101A15; --paper-2:#16231C; --rule:#1F3128; --margin:#FF9A2E;
  --ink:#E6EEE8; --ink-soft:#A6B7AD; --green:#0A3D1A; --green-2:#3FAE5C;
  --gold:#FF9A2E; --on-green:#EEF4EF; --line:#2A4035;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--paper); color:var(--ink);
  font:400 1.0625rem/1.6 "Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:4px}
h1,h2,h3{font-family:"Young Serif",Georgia,"Times New Roman",serif; font-weight:400; margin:0; line-height:1.1}
p{margin:0}
.wrap{width:min(1120px,100% - 2.5rem); margin-inline:auto}

/* ---------- Header ---------- */
header{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; height:64px}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none}
.brand-mark{display:grid; place-items:center; flex:none; border-radius:8px}
.brand-mark img{display:block; width:54px; height:auto}
.brand-name{color:var(--green-2)}
.logo-tile{display:inline-block; border-radius:14px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand-mark,:root:not([data-theme="light"]) .logo-tile{background:#F7F9F5; padding:4px 6px}}
:root[data-theme="dark"] .brand-mark,:root[data-theme="dark"] .logo-tile{background:#F7F9F5; padding:4px 6px}
.brand-name{font-family:"Young Serif",Georgia,serif; font-size:1.15rem; line-height:1}
.brand-name small{display:block; font-family:"Figtree",sans-serif; font-size:.72rem; color:var(--ink-soft); margin-top:3px}
nav ul{list-style:none; margin:0; padding:0; display:flex; gap:1.6rem}
nav a{text-decoration:none; font-weight:500; font-size:.95rem; color:var(--ink-soft)}
nav a:hover{color:var(--ink)}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.15rem; border-radius:999px; font-weight:600;
  text-decoration:none; font-size:.95rem; border:2px solid transparent; transition:background .15s,color .15s}
.btn-solid{background:var(--green); color:var(--on-green)}
.btn-solid:hover{background:var(--green-2)}
.btn-line{border-color:var(--ink); color:var(--ink)}
.btn-line:hover{background:var(--ink); color:var(--paper)}
.menu-btn{display:none; background:none; border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:.45rem .7rem; font:inherit; font-size:.9rem}
@media (max-width:860px){
  nav{position:absolute; left:0; right:0; top:64px; background:var(--paper); border-bottom:1px solid var(--line); display:none}
  nav.open{display:block}
  nav ul{flex-direction:column; gap:0; padding:.5rem 1.25rem 1rem}
  nav a{display:block; padding:.7rem 0; font-size:1.05rem; color:var(--ink)}
  .menu-btn{display:inline-block}
  .bar .btn{display:none}
}

/* ---------- Hero: a ledger page ---------- */
.hero{position:relative; overflow:hidden;
  background:
    linear-gradient(90deg, transparent calc(2.2rem), var(--margin) calc(2.2rem), var(--margin) calc(2.2rem + 1px), transparent calc(2.2rem + 1px), transparent calc(2.2rem + 5px), var(--margin) calc(2.2rem + 5px), var(--margin) calc(2.2rem + 6px), transparent calc(2.2rem + 6px)),
    repeating-linear-gradient(180deg, transparent 0 39px, var(--rule) 39px 40px),
    var(--paper)}
.hero-grid{display:grid; grid-template-columns:1.35fr 1fr; gap:2rem; align-items:center; padding:5.5rem 0 5rem}
.hero .lede{font-size:1.05rem; color:var(--ink-soft); font-weight:500; margin-bottom:1.25rem; padding-left:.1rem}
.hero h1{font-size:clamp(3.2rem,9vw,6.6rem); line-height:.98; letter-spacing:-.015em}
.hero h1 span{display:block}
.hero h1 .second{padding-left:clamp(1.5rem,6vw,4.5rem); color:var(--green-2)}
.hero p.sub{max-width:34rem; margin-top:1.75rem; font-size:1.15rem; color:var(--ink-soft)}
.hero .actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}
.stamp-wrap{display:grid; place-items:center}
.stamp{width:min(340px,80vw); transform:rotate(-9deg); color:var(--green-2); animation:thunk .55s cubic-bezier(.2,1.4,.4,1) .35s both}
@keyframes thunk{from{opacity:0; transform:rotate(-9deg) scale(1.35)} to{opacity:1; transform:rotate(-9deg) scale(1)}}
@media (prefers-reduced-motion: reduce){.stamp{animation:none}}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; padding:3.5rem 0 3.5rem 1.4rem}
  .stamp{width:min(240px,62vw)}
  .stamp-wrap{justify-items:end}
}

/* ---------- Sections ---------- */
section{padding:6rem 0}
.section-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:2.5rem; align-items:end; margin-bottom:3rem}
.section-head h2{font-size:clamp(2.1rem,4.5vw,3.2rem)}
.section-head p{color:var(--ink-soft); max-width:36rem}
@media (max-width:760px){.section-head{grid-template-columns:1fr; gap:1rem} section{padding:4.25rem 0}}

/* About */
.about{background:var(--paper-2)}
.about-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:2.5rem}
.about blockquote{margin:0; font-family:"Young Serif",Georgia,serif; font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.2; border-left:4px solid var(--gold); padding-left:1.25rem}
.about-body{display:grid; gap:1.2rem; max-width:40rem; color:var(--ink-soft)}
.about-body strong{color:var(--ink); font-weight:600}
.creds{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.6rem}
.creds span{font-size:.9rem; padding:.4rem .8rem; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink)}
@media (max-width:760px){.about-grid{grid-template-columns:1fr}}

/* Loans as ledger rows */
.ledger{border-top:2px solid var(--ink); border-bottom:2px solid var(--ink)}
.row{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.6fr) auto; gap:1.5rem; align-items:baseline;
  padding:1.8rem 0; border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row.head{padding:.8rem 0; font-size:.85rem; font-weight:600; color:var(--ink-soft)}
.row h3{font-size:1.65rem}
.row .for{font-weight:600}
.row .what{color:var(--ink-soft)}
.row a.ask{font-weight:600; color:var(--green-2); text-underline-offset:4px; white-space:nowrap}
@media (max-width:760px){
  .row{grid-template-columns:1fr; gap:.4rem}
  .row.head{display:none}
  .row a.ask{margin-top:.5rem}
}

/* Mission / vision */
.mv{background:var(--green); color:var(--on-green)}
.mv-grid{display:grid; grid-template-columns:1fr 1fr; gap:0}
.mv-item{padding:1rem 3rem 1rem 0}
.mv-item + .mv-item{padding:1rem 0 1rem 3rem; border-left:1px solid color-mix(in srgb,var(--on-green) 25%,transparent)}
.mv h2{font-size:1.2rem; font-family:"Figtree",sans-serif; font-weight:600; color:var(--gold); margin-bottom:1rem}
.mv p{font-family:"Young Serif",Georgia,serif; font-size:clamp(1.45rem,2.6vw,2rem); line-height:1.3}
@media (max-width:760px){
  .mv-grid{grid-template-columns:1fr}
  .mv-item,.mv-item + .mv-item{padding:1.5rem 0; border-left:none}
  .mv-item + .mv-item{border-top:1px solid color-mix(in srgb,var(--on-green) 25%,transparent)}
}

/* Values */
.values-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--line)}
.values-list li{padding:1.6rem 1.2rem 1.6rem 0; border-right:1px solid var(--line)}
.values-list li + li{padding-left:1.2rem}
.values-list li:last-child{border-right:none}
.values-list h3{font-size:1.45rem; margin-bottom:.6rem}
.values-list p{color:var(--ink-soft); font-size:.97rem}
@media (max-width:960px){
  .values-list{grid-template-columns:1fr 1fr}
  .values-list li, .values-list li + li{padding:1.4rem 1rem 1.4rem 0; border-right:none; border-bottom:1px solid var(--line)}
}
@media (max-width:520px){.values-list{grid-template-columns:1fr}}

/* Contact */
.contact{background:var(--paper-2)}
.contact-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:3rem}
.contact h2{font-size:clamp(2.3rem,5vw,3.6rem)}
.contact .intro{color:var(--ink-soft); margin-top:1.2rem; max-width:30rem}
.contact .actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}
dl.details{margin:0; display:grid; gap:0; border-top:2px solid var(--ink)}
dl.details div{display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line)}
dl.details dt{font-weight:600; color:var(--ink-soft); font-size:.92rem}
dl.details dd{margin:0}
dl.details a{text-underline-offset:3px}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr} dl.details div{grid-template-columns:1fr; gap:.15rem}}

footer{padding:2.5rem 0; font-size:.88rem; color:var(--ink-soft); border-top:1px solid var(--line)}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.5rem}