/* ==========================================================================
   THE COOPERATIVE SOCIETY — design system
   Newsreader (editorial serif) / Inter (interface) / IBM Plex Mono (figures)
   ========================================================================== */

:root{
  /* palette */
  --forest:#1f3a2e;
  --forest-dark:#122019;
  --forest-tint:#e7ede7;
  --soil:#6b4226;
  --soil-dark:#4a2d19;
  --maize:#e2a331;
  --maize-dark:#b97f1f;
  --cream:#f4eedd;
  --paper:#eae1c6;
  --paper-dark:#ddd1ac;
  --charcoal:#241f1a;
  --charcoal-soft:#443c34;
  --line:#c9bb95;
  --line-soft:rgba(36,31,26,.14);
  --good:#2f6b3f;
  --warn:#a15b1f;
  --bad:#8c2f28;
  --white:#fffdf7;

  /* type */
  --serif:'Newsreader', Georgia, serif;
  --sans:'Inter', -apple-system, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', 'Courier New', monospace;

  /* layout */
  --max:1320px;
  --gutter:clamp(20px,4.5vw,64px);
  --pad-section:clamp(52px,8vw,120px);
  --radius:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

body{
  margin:0;
  background:var(--cream);
  color:var(--charcoal);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; background:none; border:0;}
ul{margin:0; padding:0; list-style:none;}
h1,h2,h3,h4,p,figure{margin:0;}
input,textarea,select{font-family:inherit; font-size:inherit;}

:focus-visible{outline:3px solid var(--maize-dark); outline-offset:2px;}

.wrap{max-width:var(--max); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);}
.section{padding-top:var(--pad-section); padding-bottom:var(--pad-section);}
.section-tight{padding-top:calc(var(--pad-section) * .55); padding-bottom:calc(var(--pad-section) * .55);}
.dark{background:var(--forest); color:var(--cream);}
.dark .muted{color:#cddccf;}
.charcoal-bg{background:var(--charcoal); color:var(--cream);}
.paper-bg{background:var(--paper);}
.soil-bg{background:var(--soil); color:var(--cream);}

.field-bg{position:relative; background-color:var(--cream);}
.field-bg::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 64px);
  opacity:.5;
  pointer-events:none;
}
.dark.field-bg::before, .charcoal-bg.field-bg::before{
  background-image:repeating-linear-gradient(90deg, rgba(244,238,221,.08) 0 1px, transparent 1px 64px);
}

/* ---------- type ---------- */
.display{font-family:var(--serif); font-weight:600; letter-spacing:-.01em; line-height:1.02;}
.display-xl{font-size:clamp(40px,7.2vw,96px);}
.display-l{font-size:clamp(32px,5vw,64px);}
.display-m{font-size:clamp(26px,3.4vw,40px);}
.display-s{font-size:clamp(21px,2.4vw,28px);}

.lede{font-size:clamp(17px,1.7vw,20px); line-height:1.65; color:var(--charcoal-soft); max-width:620px;}
.dark .lede{color:#d8e6da;}

.label{font-family:var(--sans); font-weight:600; letter-spacing:.03em; font-size:13px; color:var(--soil-dark);}
.dark .label{color:var(--maize);}

.figure{font-family:var(--mono); font-variant-numeric:tabular-nums;}
.figure-xl{font-size:clamp(34px,5vw,58px); font-weight:500;}
.figure-l{font-size:clamp(22px,2.6vw,30px); font-weight:500;}
.figure-m{font-size:18px; font-weight:500;}

.rule{height:1px; background:var(--line); border:0; margin:0;}
.dark .rule{background:rgba(244,238,221,.25);}

.pill{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:5px 12px; border:1px solid var(--line); border-radius:999px; color:var(--charcoal-soft); background:var(--white);}
.pill-dot{width:6px; height:6px; border-radius:50%; background:var(--good); flex:none;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-weight:600; font-size:14.5px;
  padding:13px 22px; border-radius:var(--radius); border:1.5px solid transparent;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
  min-height:44px; white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--maize); color:var(--forest-dark);}
.btn-primary:hover{background:var(--maize-dark);}
.btn-outline{border-color:var(--charcoal); color:var(--charcoal);}
.btn-outline:hover{background:var(--charcoal); color:var(--cream);}
.dark .btn-outline{border-color:var(--cream); color:var(--cream);}
.dark .btn-outline:hover{background:var(--cream); color:var(--forest-dark);}
.btn-ghost{color:var(--soil-dark); padding-left:4px; padding-right:4px; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line);}
.dark .btn-ghost{color:var(--maize);}
.btn-block{width:100%;}
.btn-sm{padding:9px 16px; font-size:13.5px; min-height:38px;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--cream); border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px;}
.wordmark{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:600; font-size:19px; letter-spacing:-.01em; flex:none;}
.wordmark .mark{width:30px; height:30px; flex:none;}
.wordmark small{display:block; font-family:var(--sans); font-weight:600; font-size:9.5px; letter-spacing:.14em; color:var(--soil-dark); text-transform:uppercase;}

.primary-nav{display:none;}
.primary-nav ul{display:flex; gap:2px;}
.primary-nav a{
  display:block; padding:10px 14px; font-size:14.5px; font-weight:500; color:var(--charcoal-soft);
  border-radius:var(--radius); transition:background .18s var(--ease), color .18s var(--ease);
}
.primary-nav a:hover, .primary-nav a[aria-current="page"]{background:var(--forest-tint); color:var(--forest);}
.primary-nav a[aria-current="page"]{font-weight:700;}

.header-actions{display:flex; align-items:center; gap:10px; flex:none;}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid var(--line); border-radius:var(--radius); color:var(--charcoal);
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.icon-btn:hover{background:var(--white); border-color:var(--charcoal);}
.calc-action{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border:1.5px solid var(--forest); border-radius:var(--radius);
  font-weight:700; font-size:14px; color:var(--forest); background:var(--forest-tint);
}
.calc-action:hover{background:var(--forest); color:var(--cream);}
.menu-toggle{display:inline-flex;}

@media (min-width:960px){
  .primary-nav{display:block;}
  .menu-toggle{display:none;}
}

/* ---------- mobile nav ---------- */
.mobile-nav{
  position:fixed; inset:0; z-index:100; background:var(--forest); color:var(--cream);
  transform:translateX(100%); transition:transform .32s var(--ease);
  display:flex; flex-direction:column; overflow-y:auto;
}
.mobile-nav.is-open{transform:translateX(0);}
.mobile-nav .wrap{padding-top:22px; padding-bottom:40px;}
.mobile-nav-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:28px;}
.mobile-nav a.mn-link{display:flex; align-items:center; justify-content:space-between; padding:16px 0; font-family:var(--serif); font-size:26px; border-bottom:1px solid rgba(244,238,221,.2);}
.mobile-nav a.mn-link[aria-current="page"]{color:var(--maize);}
.mobile-nav .mn-foot{margin-top:auto; padding-top:24px; display:flex; flex-direction:column; gap:12px;}
@media (min-width:960px){.mobile-nav{display:none;}}

/* ---------- footer ---------- */
.site-footer{background:var(--forest-dark); color:var(--cream);}
.footer-grid{display:grid; gap:36px; grid-template-columns:1fr; padding:var(--pad-section) 0 40px;}
.footer-brand p{color:#c9dccc; max-width:340px; margin-top:14px;}
.footer-col h4{font-size:13px; letter-spacing:.05em; color:var(--maize); margin-bottom:14px;}
.footer-col ul{display:flex; flex-direction:column; gap:10px;}
.footer-col a{color:#dce9de; font-size:14.5px;}
.footer-col a:hover{color:var(--maize);}
.footer-status{display:flex; align-items:center; gap:8px; font-size:13px; color:#bcd3bf; padding:18px 0; border-top:1px solid rgba(244,238,221,.15);}
.footer-bottom{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; padding:18px 0; border-top:1px solid rgba(244,238,221,.15); font-size:13px; color:#a9c2ac;}
.footer-bottom a:hover{color:var(--maize);}
.footer-disclaimer{font-size:12.5px; color:#93ab96; padding-top:16px; max-width:820px;}
@media (min-width:720px){.footer-grid{grid-template-columns:1.4fr repeat(3,1fr);}}

/* accordion footer on mobile handled via <details> native element, styled */
.footer-col details summary{cursor:pointer; list-style:none;}
.footer-col details summary::-webkit-details-marker{display:none;}
@media (min-width:720px){
  .footer-col details summary{pointer-events:none;}
}
.footer-col details[open] summary h4::after{content:"–";}
.footer-col summary h4::after{content:"+"; float:right;}
@media (min-width:720px){.footer-col summary h4::after{content:none;}}

/* ---------- grid helpers ---------- */
.grid{display:grid; gap:24px;}
.grid-2{grid-template-columns:1fr;}
.grid-3{grid-template-columns:1fr;}
.grid-4{grid-template-columns:1fr;}
@media (min-width:640px){ .grid-2{grid-template-columns:1fr 1fr;} .grid-4{grid-template-columns:1fr 1fr;} }
@media (min-width:960px){ .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} }

/* ---------- panels / cards (flat, hairline, no shadow) ---------- */
.panel{background:var(--white); border:1px solid var(--line); padding:26px;}
.panel-accent{border-top:3px solid var(--forest);}
.panel-accent-maize{border-top:3px solid var(--maize);}
.stat-strip{display:grid; gap:0; grid-template-columns:1fr; border:1px solid var(--line); background:var(--white);}
.stat-strip .stat{padding:22px 24px; border-bottom:1px solid var(--line);}
.stat-strip .stat:last-child{border-bottom:0;}
@media (min-width:720px){
  .stat-strip{grid-template-columns:repeat(4,1fr);}
  .stat-strip .stat{border-bottom:0; border-right:1px solid var(--line);}
  .stat-strip .stat:last-child{border-right:0;}
}
.stat .figure{color:var(--forest); display:block;}
.stat .label{display:block; margin-top:6px;}

/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:18px;}
.field label{font-size:13.5px; font-weight:600; color:var(--charcoal);}
.field .hint{font-size:12.5px; color:var(--charcoal-soft);}
.field input, .field select, .field textarea{
  border:1.5px solid var(--line); background:var(--white); padding:12px 14px; border-radius:var(--radius); font-size:15px; min-height:46px;
}
.field textarea{min-height:110px; resize:vertical;}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--forest);}
.field.has-error input, .field.has-error select, .field.has-error textarea{border-color:var(--bad);}
.field .error-msg{font-size:12.5px; color:var(--bad); font-weight:600;}
.field-row{display:grid; gap:18px; grid-template-columns:1fr;}
@media (min-width:640px){.field-row-2{grid-template-columns:1fr 1fr;}}
.checkbox-row{display:flex; align-items:flex-start; gap:10px; font-size:14px;}
.checkbox-row input{width:20px; height:20px; margin-top:2px; flex:none;}
fieldset{border:0; padding:0; margin:0;}
legend{padding:0; font-size:13.5px; font-weight:600; margin-bottom:8px;}
.radio-cards{display:grid; gap:10px; grid-template-columns:1fr;}
@media (min-width:640px){.radio-cards{grid-template-columns:repeat(3,1fr);}}
.radio-card{border:1.5px solid var(--line); padding:12px 14px; border-radius:var(--radius); cursor:pointer; font-size:14px; display:flex; align-items:center; gap:10px; min-height:44px;}
.radio-card input{width:18px; height:18px;}
.radio-card:has(input:checked){border-color:var(--forest); background:var(--forest-tint);}

/* ---------- badges / status ---------- */
.badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px;}
.badge-active{background:#e2ede4; color:var(--good);}
.badge-upcoming{background:#eae2f0; color:#5c3d8c;}
.badge-completed{background:#dfe9ea; color:#245258;}
.badge-delayed{background:#f3ded0; color:var(--warn);}
.badge-progress{background:var(--forest-tint); color:var(--forest);}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto; border:1px solid var(--line); -webkit-overflow-scrolling:touch;}
table{border-collapse:collapse; width:100%; min-width:560px;}
th,td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--line-soft); font-size:14.5px; white-space:nowrap;}
thead th{background:var(--paper); font-size:12.5px; letter-spacing:.03em; color:var(--charcoal-soft); font-weight:700;}
td.figure{color:var(--forest);}
tbody tr:last-child td{border-bottom:0;}
.mobile-cards{display:none;}
@media (max-width:639px){
  .table-scroll.responsive-cards{display:none;}
  .mobile-cards{display:block;}
  .mobile-card{border:1px solid var(--line); background:var(--white); padding:16px; margin-bottom:12px;}
  .mobile-card dl{display:grid; grid-template-columns:1fr auto; gap:6px 12px; margin:0;}
  .mobile-card dt{font-size:12.5px; color:var(--charcoal-soft);}
  .mobile-card dd{margin:0; font-weight:600; text-align:right;}
}

/* ---------- accordion / faq ---------- */
.acc-item{border-bottom:1px solid var(--line);}
.acc-trigger{width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 4px; text-align:left; font-weight:600; font-size:15.5px; min-height:44px;}
.acc-trigger .plus{flex:none; font-family:var(--mono); font-size:18px; transition:transform .2s var(--ease);}
.acc-trigger[aria-expanded="true"] .plus{transform:rotate(45deg);}
.acc-panel{max-height:0; overflow:hidden; transition:max-height .28s var(--ease);}
.acc-panel-inner{padding:0 4px 18px; color:var(--charcoal-soft); font-size:14.5px; line-height:1.65;}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); overflow-x:auto;}
.tab{padding:12px 16px; font-size:14px; font-weight:600; color:var(--charcoal-soft); border-bottom:2px solid transparent; white-space:nowrap; min-height:44px;}
.tab[aria-selected="true"]{color:var(--forest); border-color:var(--forest);}

/* ---------- modal ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(18,32,25,.6); z-index:200; display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity .2s var(--ease);}
.modal-overlay.is-open{opacity:1; pointer-events:auto;}
.modal{background:var(--cream); width:100%; max-width:560px; max-height:88vh; overflow-y:auto; padding:28px; border-top:4px solid var(--forest); transform:translateY(24px); transition:transform .24s var(--ease);}
.modal-overlay.is-open .modal{transform:translateY(0);}
.modal-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:16px;}
@media (min-width:720px){.modal-overlay{align-items:center;} .modal{border-top:0; border-left:4px solid var(--forest);}}

/* ---------- toast ---------- */
.toast-stack{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:300; display:flex; flex-direction:column; gap:8px; width:min(92vw,420px);}
.toast{background:var(--charcoal); color:var(--cream); padding:14px 18px; border-radius:var(--radius); font-size:14px; display:flex; align-items:center; gap:10px; border-left:4px solid var(--maize); animation:toast-in .22s var(--ease);}
.toast.toast-error{border-left-color:var(--bad);}
@keyframes toast-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

/* ---------- command palette ---------- */
.cmdk-overlay{position:fixed; inset:0; background:rgba(18,32,25,.55); z-index:400; display:flex; align-items:flex-start; justify-content:center; padding-top:10vh; opacity:0; pointer-events:none; transition:opacity .18s var(--ease);}
.cmdk-overlay.is-open{opacity:1; pointer-events:auto;}
.cmdk{width:min(94vw,560px); background:var(--white); border:1px solid var(--line); max-height:70vh; display:flex; flex-direction:column;}
.cmdk input{border:0; border-bottom:1px solid var(--line); padding:18px 20px; font-size:17px; width:100%;}
.cmdk-list{overflow-y:auto; padding:8px;}
.cmdk-item{display:flex; justify-content:space-between; padding:12px 12px; font-size:14.5px; border-radius:var(--radius); min-height:44px; align-items:center;}
.cmdk-item[data-active="true"]{background:var(--forest-tint);}
.cmdk-item .k-cat{font-size:11px; color:var(--charcoal-soft); font-family:var(--mono);}

/* ---------- flow diagram bits ---------- */
.flow-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px;}
.flow-node{border:1.5px solid var(--forest); background:var(--forest-tint); color:var(--forest); padding:10px 16px; font-weight:700; font-size:13.5px; border-radius:var(--radius);}
.flow-arrow{color:var(--soil-dark); font-size:18px;}

/* ---------- misc ---------- */
.skip-link{position:absolute; left:-999px; top:auto; background:var(--forest); color:var(--cream); padding:12px 18px; z-index:1000;}
.skip-link:focus{left:16px; top:16px;}
.eyebrow-plain{font-size:13px; font-weight:700; color:var(--soil-dark); text-transform:none;}
.two-col{display:grid; gap:40px; grid-template-columns:1fr;}
@media (min-width:960px){.two-col{grid-template-columns:1.1fr .9fr; align-items:center;}}
.center-col{max-width:720px;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.skeleton{background:linear-gradient(90deg, var(--paper) 25%, var(--paper-dark) 37%, var(--paper) 63%); background-size:400% 100%; animation:sk 1.4s ease infinite;}
@media (prefers-reduced-motion: reduce){.skeleton{animation:none;}}
@keyframes sk{0%{background-position:100% 0;} 100%{background-position:0 0;}}
.empty-state{text-align:center; padding:56px 20px; border:1px dashed var(--line);}
.slide-track{overflow-x:auto; display:flex; gap:16px; padding-bottom:8px; scroll-snap-type:x proximity;}
.slide-track > *{scroll-snap-align:start;}

/* section divider seed motif */
.seed-divider{display:flex; align-items:center; gap:14px; margin:8px 0 28px;}
.seed-divider .rule{flex:1;}