/* ============================================================
   DISCOVERY CO-OP · 20X · "CIRCUIT/22"
   A system derived from the co-op itself: patronage drawn as a
   circuit. One amber line leaves home, touches all 22 locations
   in 5 communities, and returns as equity and funding.
   WXZA house signature: near-black ground, single glowing amber
   path line, light text, amber sparingly.
   Tokens: every value defined once at :root, referenced by
   token everywhere else. Figures in tabular mono.
   ============================================================ */
:root{
  /* Ground and light */
  --ground:#09060A;
  --ground-2:#0E0A10;
  --panel:#14101A;
  --panel-2:#1A1424;
  --line:#2A2130;
  --text:#F5EFE8;
  --muted:#B7AB9E;
  --dim:#8A7D70;
  /* The one amber line, three intensities */
  --amber:#D89234;
  --amber-hot:#EF9E15;
  --amber-core:#FFD97A;
  --amber-ghost:rgba(216,146,52,.14);
  /* Type */
  --font:"Open Sans",-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-kicker:.7rem;
  --fs-small:.86rem;
  --fs-body:1rem;
  --fs-lede:1.18rem;
  --fs-h3:1.14rem;
  --fs-h2:1.9rem;
  --fs-h1:3rem;
  --fs-fig:1.65rem;
  --lh-body:1.65;
  --lh-tight:1.08;
  /* Spacing */
  --sp-1:.5rem;
  --sp-2:.85rem;
  --sp-3:1.25rem;
  --sp-4:2rem;
  --sp-5:3.5rem;
  --wrap:74rem;
  --pad-x:1.25rem;
  /* Radius, borders, motion */
  --r-card:.6rem;
  --r-btn:2rem;
  --bw:1px;
  --ease:cubic-bezier(.22,.8,.3,1);
  --dur:.3s;
  --tap:2.75rem; /* 44px minimum touch target */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--text);
  font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);
  font-weight:400;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--amber-core)}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber-hot);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
h1,h2,h3{line-height:var(--lh-tight);margin:0 0 var(--sp-2);color:var(--text)}
h1{font-size:var(--fs-h1);font-weight:300;letter-spacing:-.02em}
h2{font-size:var(--fs-h2);font-weight:300;letter-spacing:-.015em}
h3{font-size:var(--fs-h3);font-weight:600}
p{margin:0 0 var(--sp-2)}
.kicker{
  font-family:var(--mono);font-size:var(--fs-kicker);letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber);margin:0 0 var(--sp-2);
}
.lede{font-size:var(--fs-lede);font-weight:300;color:var(--text);max-width:46rem}
.body-dim{color:var(--muted);max-width:46rem}
.fine{font-size:var(--fs-small);color:var(--dim)}
/* Header */
.site-head{background:var(--ground);border-bottom:var(--bw) solid var(--line);position:sticky;top:0;z-index:20}
.head-in{display:flex;align-items:center;gap:var(--sp-3);min-height:4.25rem}
.brand{display:flex;align-items:center;gap:var(--sp-2);text-decoration:none;color:var(--text);min-height:var(--tap)}
.brand-mark{
  width:.85rem;height:.85rem;border-radius:50%;flex:none;
  background:var(--amber-hot);box-shadow:0 0 .8rem var(--amber),0 0 2rem var(--amber-ghost);
}
.brand-word{font-family:var(--mono);font-size:.95rem;letter-spacing:.18em}
.brand-word em{font-style:normal;color:var(--amber)}
.main-nav{display:none;margin-left:auto;gap:.25rem}
.main-nav a{
  color:var(--muted);text-decoration:none;font-weight:600;padding:.55rem .8rem;border-radius:var(--r-btn);
  min-height:var(--tap);display:inline-flex;align-items:center;transition:color var(--dur) var(--ease);
}
.main-nav a:hover{color:var(--text)}
.main-nav a[aria-current="page"]{color:var(--amber-core);box-shadow:inset 0 -2px 0 var(--amber)}
.menu-btn{
  margin-left:auto;min-height:var(--tap);min-width:var(--tap);padding:.5rem 1.1rem;cursor:pointer;
  font-family:var(--mono);font-size:var(--fs-small);letter-spacing:.12em;text-transform:uppercase;
  background:transparent;color:var(--text);border:var(--bw) solid var(--line);border-radius:var(--r-btn);
}
.mobile-menu{background:var(--ground-2);border-top:var(--bw) solid var(--line);padding:var(--sp-2) var(--pad-x) var(--sp-3)}
.mobile-menu a{
  display:flex;align-items:center;min-height:var(--tap);padding:.35rem .25rem;
  color:var(--muted);text-decoration:none;font-weight:600;border-bottom:var(--bw) solid var(--line);
}
.mobile-menu a:last-child{border-bottom:0}
/* Breadcrumbs */
.crumbs{max-width:var(--wrap);margin:0 auto;padding:var(--sp-2) var(--pad-x) 0;font-family:var(--mono);font-size:var(--fs-small);color:var(--dim)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--amber-core)}
/* Hero and circuit */
.hero{padding-top:var(--sp-5);background:radial-gradient(60rem 30rem at 70% -10%,var(--amber-ghost),transparent 60%),var(--ground)}
.hero h1{max-width:14ch}
.circuit{width:100%;height:auto;margin-top:var(--sp-4)}
.circuit-path{
  stroke:var(--amber);stroke-width:2.5;
  filter:drop-shadow(0 0 6px var(--amber-hot)) drop-shadow(0 0 18px var(--amber-ghost));
  stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 3.2s var(--ease) forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.circuit-nodes circle{fill:var(--ground);stroke:var(--amber-core);stroke-width:2}
.circuit-labels text{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;fill:var(--muted)}
/* Telemetry */
.telemetry{border-top:var(--bw) solid var(--line);border-bottom:var(--bw) solid var(--line);margin-top:var(--sp-5);background:var(--ground-2)}
.tele-in{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
.tele{font-family:var(--mono);font-size:var(--fs-small);letter-spacing:.12em;color:var(--dim)}
.tele b{color:var(--amber-core);font-weight:500;font-variant-numeric:tabular-nums}
/* Loop */
.loop{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:var(--sp-3) 0}
.loop-node{
  font-family:var(--mono);font-size:var(--fs-small);letter-spacing:.1em;color:var(--text);
  border:var(--bw) solid var(--line);border-radius:var(--r-btn);padding:.55rem 1rem;background:var(--panel);
}
.loop-home{border-color:var(--amber);color:var(--amber-core);box-shadow:0 0 1.2rem var(--amber-ghost)}
.loop-arrow{width:2rem;height:2px;background:linear-gradient(90deg,var(--amber),var(--amber-core));flex:none;box-shadow:0 0 8px var(--amber-ghost)}
/* Sections */
.section{padding-top:var(--sp-5);padding-bottom:var(--sp-5)}
.page-head{padding:var(--sp-5) 0 var(--sp-4)}
.cards{display:grid;gap:var(--sp-3);margin-top:var(--sp-3)}
.card{
  display:block;background:var(--panel);border:var(--bw) solid var(--line);
  border-radius:var(--r-card);padding:var(--sp-3);text-decoration:none;color:var(--text);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
a.card:hover{border-color:var(--amber);transform:translateY(-2px)}
.card h3{margin-bottom:.35rem}
.card p{color:var(--muted);margin-bottom:.35rem}
.card-tag{font-family:var(--mono);font-size:var(--fs-kicker);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:var(--sp-1)}
.card-go{font-family:var(--mono);font-size:var(--fs-small);letter-spacing:.1em;color:var(--amber-core)}
.svc-grid{display:grid;gap:var(--sp-3)}
.svc{background:var(--panel);border:var(--bw) solid var(--line);border-radius:var(--r-card);padding:var(--sp-3)}
.svc-no{font-family:var(--mono);color:var(--amber);font-size:var(--fs-small);letter-spacing:.2em;margin-bottom:var(--sp-1)}
.svc h2{font-size:var(--fs-h3);font-weight:600}
.svc p{color:var(--muted);margin:0}
.svc p:last-child{margin:0}
/* Stat rows */
.stat-rows{border-top:var(--bw) solid var(--line);margin:var(--sp-4) 0}
.srow{display:grid;gap:.15rem;padding:var(--sp-2) 0;border-bottom:var(--bw) solid var(--line)}
.sfig{font-size:var(--fs-fig);font-weight:300;color:var(--amber-core);font-variant-numeric:tabular-nums lining-nums;line-height:1.1}
.slab{color:var(--muted)}
/* Photos */
.wide-photo{margin:0 0 var(--sp-4)}
.wide-photo img{border-radius:var(--r-card);border:var(--bw) solid var(--line);width:100%}
.wide-photo figcaption{font-size:var(--fs-small);color:var(--dim);margin-top:var(--sp-1)}
/* Job */
.job{background:var(--panel);border:var(--bw) solid var(--line);border-radius:var(--r-card);padding:var(--sp-3);margin-top:var(--sp-3)}
.job-meta{font-family:var(--mono);font-size:var(--fs-small);letter-spacing:.1em;color:var(--amber)}
.status-note{background:var(--amber-ghost);border:var(--bw) solid var(--amber);border-radius:var(--r-card);padding:var(--sp-2) var(--sp-3);color:var(--text)}
.ticks{list-style:none;margin:0 0 var(--sp-3);padding:0;max-width:46rem}
.ticks li{padding:.45rem 0 .45rem 1.6rem;position:relative;color:var(--muted);border-bottom:var(--bw) solid var(--line)}
.ticks li::before{content:"";position:absolute;left:.1rem;top:1rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--amber-hot);box-shadow:0 0 .6rem var(--amber-ghost)}
/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);
  padding:.65rem 1.5rem;border-radius:var(--r-btn);font-weight:700;text-decoration:none;
  background:var(--amber);color:var(--ground);transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn:hover{background:var(--amber-core)}
.btn:active{transform:translateY(1px)}
/* Next step */
.next-step{border-top:var(--bw) solid var(--line);background:var(--ground-2)}
.next-in{display:grid;gap:var(--sp-3);padding-top:var(--sp-4);padding-bottom:var(--sp-4);align-items:center}
.next-step p{color:var(--muted)}
/* Footer */
.site-foot{border-top:var(--bw) solid var(--line);background:var(--ground-2)}
.foot-grid{display:grid;gap:var(--sp-4);padding-top:var(--sp-5);padding-bottom:var(--sp-4)}
.foot-name{font-family:var(--mono);letter-spacing:.16em;font-size:1.05rem;color:var(--text);margin-bottom:var(--sp-1)}
.foot-h{font-family:var(--mono);font-size:var(--fs-kicker);letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:var(--sp-2)}
.foot-dim{color:var(--muted)}
.foot-nav ul{list-style:none;margin:0;padding:0}
.foot-nav a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:var(--tap);padding:.2rem 0}
.foot-nav a:hover{color:var(--amber-core)}
.mini-stats{list-style:none;margin:0;padding:0}
.mini-stats li{padding:.3rem 0;border-bottom:var(--bw) solid var(--line);color:var(--muted);font-variant-numeric:tabular-nums}
.mini-stats span{font-weight:700;color:var(--text);margin-right:.5rem}
.foot-base{border-top:var(--bw) solid var(--line);padding-top:var(--sp-3);padding-bottom:var(--sp-4);display:grid;gap:.25rem}
.foot-base p{margin:0}
.concept-chip{
  display:inline-block;margin-left:.5rem;padding:.08rem .5rem;border:var(--bw) solid var(--amber);
  border-radius:2rem;color:var(--amber-core);font-family:var(--mono);font-size:var(--fs-kicker);letter-spacing:.16em;vertical-align:middle;
}
/* Wider screens */
@media (min-width:46rem){
  :root{--fs-h1:4.2rem;--fs-fig:2rem}
  .main-nav{display:flex}
  .menu-btn,.mobile-menu{display:none}
  .cards{grid-template-columns:repeat(2,1fr)}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .srow{grid-template-columns:16rem 1fr;align-items:baseline;gap:var(--sp-3)}
  .next-in{grid-template-columns:1fr auto}
  .foot-grid{grid-template-columns:1.2fr .8fr .8fr}
}
@media (min-width:64rem){
  .cards{grid-template-columns:repeat(3,1fr)}
  .svc-grid{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none;animation:none}
  .circuit-path{stroke-dashoffset:0}
}