
:root{
  --bg:#ECEEE3; --ink:#2A231C; --muted:#6B5D4E; --moss:#4F6B3F; --plum:#6E2F5E;
  --spore:#C2AC6B; --panel:#E1E4D5; --line:#CCD0BE; --on-plum:#F6EEF3;
  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"]){
    --bg:#1C1915; --ink:#ECEEE3; --muted:#A99C8C; --moss:#9DB88A; --plum:#D39AC2;
    --spore:#8F7F4F; --panel:#26221C; --line:#3A342B; --on-plum:#1C1915;
  }
}
:root[data-theme="dark"]{
  --bg:#1C1915; --ink:#ECEEE3; --muted:#A99C8C; --moss:#9DB88A; --plum:#D39AC2;
  --spore:#8F7F4F; --panel:#26221C; --line:#3A342B; --on-plum:#1C1915;
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.125rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--plum);text-underline-offset:.2em}
a:focus-visible,button:focus-visible{outline:3px solid var(--plum);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;line-height:1.05;margin:0}
h2{font-size:clamp(2rem,5vw,3rem);font-weight:800;letter-spacing:-.02em;margin-bottom:1.25rem}
h3{font-size:1.4rem;font-weight:700;margin-bottom:.5rem}
p{margin:0 0 1rem}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.5rem}
.prose{max-width:40rem}

/* Hero */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden;
  border-bottom:1px solid var(--line)}
#mycelium{position:absolute;inset:0;width:100%;height:100%}
#mycelium path{fill:none;stroke:var(--spore);stroke-linecap:round}
#mycelium circle{fill:var(--plum)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70%;
  background:linear-gradient(to top,var(--bg) 45%,transparent);pointer-events:none}
.hero-inner{position:relative;z-index:1;padding:6rem 1.5rem 4rem;max-width:68rem;margin:0 auto;width:100%}
.hero .name{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.1rem;
  color:var(--moss);margin-bottom:1.5rem}
.hero h1{font-size:clamp(3rem,10vw,7.5rem);font-weight:800;letter-spacing:-.035em;max-width:11ch}
.hero .lede{font-size:clamp(1.15rem,2.2vw,1.4rem);max-width:34rem;margin:1.75rem 0 2rem}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}
.btn{display:inline-block;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.05rem;
  padding:.85rem 1.4rem;border-radius:999px;text-decoration:none;border:2px solid var(--plum);cursor:pointer}
.btn.primary{background:var(--plum);color:var(--on-plum)}
.btn.quiet{background:transparent;color:var(--plum)}
.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

section{padding:5.5rem 0;border-bottom:1px solid var(--line)}

.values-title{margin-top:3rem}
.values{display:grid;gap:1.75rem 2.5rem;grid-template-columns:1fr;margin:1.5rem 0 0}
@media(min-width:800px){.values{grid-template-columns:1fr 1fr}}
.values div{border-top:4px solid var(--plum);padding-top:1rem}
.values dt{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.3rem;margin-bottom:.35rem}
.values dd{margin:0}
.beliefs{display:grid;gap:1.5rem 2.5rem;grid-template-columns:1fr;margin-top:1.5rem}
@media(min-width:850px){.beliefs{grid-template-columns:repeat(2,1fr)}}
.beliefs p{font-size:1.2rem;border-top:4px solid var(--spore);padding-top:1rem;margin:0}
.vision{margin-top:3rem}
.vision p{font-size:1.25rem}
.lineage{margin-top:3.5rem}
.access{margin-top:3rem;background:var(--panel);border-radius:22px;padding:2rem}
.access dl{display:grid;gap:1.25rem 2.5rem;grid-template-columns:1fr;margin:1.5rem 0 0}
@media(min-width:800px){.access dl{grid-template-columns:1fr 1fr}}
.access dt{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;color:var(--moss);margin-bottom:.2rem}
.access dd{margin:0}
.skip{position:absolute;left:1rem;top:-4rem;z-index:10;background:var(--plum);color:var(--on-plum);padding:.6rem 1rem;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 1rem)}
main:focus{outline:none}
.village-grid{display:grid;gap:2.5rem;grid-template-columns:1fr;margin-top:2.5rem}
@media(min-width:850px){.village-grid{grid-template-columns:1fr 1fr}}
.village-grid > div{border-top:4px solid var(--moss);padding-top:1rem}
.a11y{max-width:44rem}
.power-title{margin-top:2.5rem}
.topics-intro{margin-top:2rem;margin-bottom:0;color:var(--muted);font-size:1rem}
.beginning{background:var(--panel)}
/* Who */
.who-grid{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media(min-width:800px){.who-grid{grid-template-columns:1.1fr .9fr}}
.welcome{background:var(--panel);border-radius:18px;padding:1.75rem}
.welcome ul{margin:0;padding-left:1.2rem}
.welcome li{margin-bottom:.5rem}

/* What we do */
.threads{display:grid;gap:2rem;grid-template-columns:1fr;margin-top:2rem}
@media(min-width:700px){.threads{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.threads{grid-template-columns:repeat(4,1fr)}}
.thread{border-top:4px solid var(--moss);padding-top:1rem}
.topics{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem;padding:0;list-style:none}
.topics li{border:1.5px solid var(--moss);color:var(--ink);border-radius:999px;padding:.3rem .9rem;font-size:1rem}

/* Events */
.events{display:grid;gap:2rem;grid-template-columns:1fr;margin-top:2rem}
@media(min-width:900px){.events{grid-template-columns:1.25fr 1fr}}
.event{background:var(--panel);border-radius:22px;padding:2rem}
.event .when{color:var(--muted);font-size:1rem;margin-bottom:.75rem}
.event h3{font-size:clamp(1.6rem,3vw,2.1rem);font-weight:800;letter-spacing:-.01em}
.programme{list-style:none;padding:0;margin:1.25rem 0 0}
.programme li{padding:.75rem 0;border-top:1px solid var(--line)}
.programme strong{font-family:"Bricolage Grotesque",sans-serif;font-weight:700}
.programme span{display:block;color:var(--muted);font-size:1rem}
.note{font-size:1rem;color:var(--muted);margin-top:1.25rem}

/* Pricing */
.tiers{display:grid;gap:0;grid-template-columns:1fr;margin:2rem 0;border-top:1px solid var(--line)}
.tier{display:grid;grid-template-columns:7rem 1fr;gap:1.25rem;padding:1.5rem 0;border-bottom:1px solid var(--line)}
.price{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:2.4rem;line-height:1;color:var(--plum)}
.price small{display:block;font-size:.95rem;font-weight:500;color:var(--muted);margin-top:.35rem}
.tier h3{font-size:1.25rem}
@media(max-width:520px){.tier{grid-template-columns:1fr;gap:.5rem}}
.consider{margin-top:1rem}
.consider h3{margin-top:1rem}
.relational{margin-top:3rem}
.reflect{margin-top:3rem;background:var(--panel);border-radius:22px;padding:2rem}
.reflect dl{display:grid;gap:1.5rem 2.5rem;grid-template-columns:1fr;margin:1.5rem 0}
@media(min-width:800px){.reflect dl{grid-template-columns:1fr 1fr}}
.reflect dt{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.1rem;color:var(--moss);margin-bottom:.25rem}
.reflect dd{margin:0}
.supporters{margin-top:3rem;border-left:4px solid var(--plum);padding-left:1.5rem}
#collaborate .btn{margin-top:1.5rem}

/* Money */
.money-grid{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media(min-width:850px){.money-grid{grid-template-columns:1fr 1fr}}
.flows{list-style:none;padding:0;margin:0}
.flows li{padding:.9rem 0 .9rem 1.5rem;border-left:4px solid var(--spore);margin-bottom:.75rem}
.flows strong{display:block;font-family:"Bricolage Grotesque",sans-serif}

/* Coop path */
.path{list-style:none;padding:0;margin:2rem 0 0;counter-reset:step;max-width:44rem}
.path li{position:relative;padding:0 0 2rem 3.5rem;counter-increment:step}
.path li::before{content:counter(step);position:absolute;left:0;top:0;width:2.25rem;height:2.25rem;border-radius:50%;
  background:var(--moss);color:var(--bg);font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.path li::after{content:"";position:absolute;left:1.08rem;top:2.5rem;bottom:.25rem;width:2px;background:var(--line)}
.path li:last-child::after{display:none}
.path .when{color:var(--muted);font-size:1rem}

/* Pledge */
.pledge{background:var(--plum);color:var(--on-plum);border-bottom:none}
.pledge h2{color:var(--on-plum)}
.pledge .prose p{color:var(--on-plum)}
.pledge-tiers{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 2rem}
.pledge-tiers span{border:2px solid var(--on-plum);border-radius:999px;padding:.4rem 1rem;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700}
.pledge .btn{background:var(--on-plum);color:var(--plum);border-color:var(--on-plum)}
.pledge small{display:block;margin-top:1rem;opacity:.85;font-size:.95rem;max-width:40rem}
.pledge .gets{margin:0 0 1rem;padding-left:1.2rem}
.pledge .gets li{margin-bottom:.4rem}
.pledge .circle-title{color:var(--on-plum);margin-top:2.5rem}
.pledge .builders{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--on-plum);max-width:40rem}
.pledge .builders h3{color:var(--on-plum)}

footer{padding:3rem 0;color:var(--muted);font-size:1rem}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}


.site-nav{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.site-nav .wrap{display:flex;align-items:center;gap:1.5rem;min-height:3.5rem;flex-wrap:wrap}
.site-nav .brand{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;color:var(--ink);text-decoration:none;white-space:nowrap}
.site-nav ul{display:flex;gap:.25rem 1.1rem;list-style:none;margin:0;padding:.5rem 0;flex-wrap:wrap}
.site-nav a{color:var(--ink);text-decoration:none;font-size:1rem}
.site-nav ul a:hover,.site-nav ul a[aria-current="page"]{color:var(--plum);text-decoration:underline;text-underline-offset:.3em}
.page-head{padding:4rem 0 1rem;border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(2.5rem,7vw,4.5rem);font-weight:800;letter-spacing:-.03em}
.next{padding:4rem 0}
.next .cards{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.5rem}
@media(min-width:800px){.next .cards{grid-template-columns:repeat(3,1fr)}}
.next .cards a{display:block;background:var(--panel);border-radius:18px;padding:1.5rem;text-decoration:none;color:var(--ink);border-top:4px solid var(--plum)}
.next .cards a strong{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:1.3rem;margin-bottom:.35rem;color:var(--plum)}
.hero{min-height:80vh}

@media(max-width:700px){.site-nav{position:static}.page-head{padding:2.5rem 0 .5rem}}
