/* ==========================================================================
   Bipolarist Theme — Extracted Styles from Inline HTML
   Generated: 2025-08-10 08:29 EDT (America/New_York)
   Drop-in: wp-content/themes/bipolarist/assets/css/main.css
   Notes:
   - This consolidates all inline styles from the provided markup.
   - It defines reusable tokens, utilities, components, and section layouts.
   - Replace inline onmouseover/onmouseout in markup with :hover states defined here.
   ========================================================================== */

/* Tokens */
:root{
  --ink:#111417;
  --ink-weak:#5A6066;
  --ink-weaker:#9AA2A9;
  --paper:#FFFFFF;
  --paper-2:#F1F3F6;
  --paper-3:#E3E6EA;
  --line:#D6DAE0;
  --line-dark:#1F252A;
  --bg-dark:#0C0C0C;
  --bg-darker:#0F1316;
  --card-dark:#12161B;
  --card-dark-line:#29313A;
  --acid:#D4FF00;
  --shadow-acid:0 6px 18px rgba(212,255,0,.25);
}

/* Base */
html, body{margin:0;padding:0}
body{
  background:var(--paper-3);
  color:var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}
.upper{text-transform:uppercase;letter-spacing:.08em}
.mono{font-family:'IBM Plex Mono',monospace}
.wrap, .container{width:min(1200px,92%);margin-inline:auto}

/* Header */
header.site-header, body>header{
  position:sticky; top:0; z-index:10;
  background:rgba(227,230,234,.9);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--line);
}
header .bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
}
header .brand{
  display:flex; align-items:center; gap:10px; font-weight:800;
}
header .brand img{height:28px; width:auto; vertical-align:middle}
header .brand .title{font-weight:900; letter-spacing:.02em}
header .brand .tag{margin-left:6px; padding-left:10px; border-left:1px solid rgba(17,20,23,.15); font-weight:700; color:var(--ink-weak)}

header nav.primary{
  display:flex; gap:18px; align-items:center; font-weight:600;
}
header nav.primary a{color:var(--ink)}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.25rem; border-radius:12px; font-weight:800;
  text-transform:uppercase; font-size:.85rem; text-decoration:none;
}
.btn--sm{padding:.7rem 1rem; border-radius:12px; font-weight:800; text-transform:uppercase; font-size:.85rem}
.btn--outline-dark{background:transparent; border:1.5px solid #C9CFD6; color:#fff}
.btn--outline-dark:hover{background:rgba(255,255,255,.08)}
.btn--outline-ink{background:transparent; border:1.5px solid var(--ink); color:var(--ink)}
.btn--outline-ink:hover{background:var(--ink); color:#fff}
.btn--acid{background:var(--acid); color:#222; border:1px solid var(--line); box-shadow:var(--shadow-acid)}
.btn--acid:hover{filter:brightness(0.95)}
.btn--ink-border{border:1.5px solid var(--ink); border-radius:10px; padding:.5rem .8rem; text-transform:uppercase; font-size:.85rem}
.badge--acid{background:var(--bg-dark); color:var(--acid); border-radius:999px; padding:.25rem .6rem; font-size:.8rem}

/* Hero */
section.hero{
  background:linear-gradient(180deg, var(--bg-dark) 0%, var(--ink) 100%);
  color:#fff; padding:72px 0;
}
.hero .grid{
  display:grid; grid-template-columns:1.2fr .8fr; gap:32px;
}
.hero .eyebrow{font-size:.9rem; letter-spacing:.08em; text-transform:uppercase; color:#B9BDC2; margin-bottom:10px}
.hero h1{
  font-family:'Space Grotesk', Inter, system-ui; font-weight:700;
  letter-spacing:-.01em; margin:0 0 .5rem; font-size:clamp(36px,5vw,60px); line-height:1.08;
}
.hero p{color:#DDE2E6; margin:10px 0 0; max-width:60ch}
.hero .cta{display:flex; gap:12px; margin-top:28px}
.hero .stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:28px}
.stat-card{background:#0F1316; border:1px solid var(--line-dark); border-radius:14px; padding:16px}
.stat-card b{display:block; font-size:28px; color:#fff}
.stat-card span{font-size:.9rem; color:#DDE2E6}
.stat-card span .hint{color:var(--ink-weaker)}
.hero .logo-panel{height:100%; border-radius:14px; padding:18px; display:flex; align-items:center; justify-content:center}

/* Sections */
section#about{
  padding:120px 0; background:var(--acid); color:#222; border:1px solid var(--line); box-shadow:var(--shadow-acid);
}
section#about .eyebrow{font-size:.85rem; color:var(--ink-weak); text-transform:uppercase; letter-spacing:.1em}
section#about h2{
  font-family:'Space Grotesk', Inter, system-ui; font-weight:700; letter-spacing:-.01em; margin:0 0 .5rem;
}
section#about p{color:#2B2F34; margin:0; max-width:80ch}

section#programs{padding:60px 0; background:var(--paper-2)}
#programs .head{display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:22px}
#programs h2{font-family:'Space Grotesk', Inter, system-ui; font-weight:700; letter-spacing:-.01em; margin:0 0 .5rem}
#programs .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch}
.card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:10px; height:100%}
.card h3{font-family:'Space Grotesk', Inter, system-ui; font-weight:700; letter-spacing:-.01em; margin:0 0 .5rem; font-size:22px}
.card .subtle{font-size:.9rem; color:#666; margin:0}

section#engage{
  background:#0F1316; color:#E6E9EC; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); padding:60px 0;
}
#engage h2{font-family:'Space Grotesk', Inter, system-ui; font-weight:700; letter-spacing:-.01em; margin:0 0 .5rem; color:#fff}
#engage .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch}
.engage-card{
  background:var(--card-dark); border:1px solid var(--card-dark-line); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:10px; height:100%;
  transition:background .2s ease, border-color .2s ease;
}
.engage-card:hover{background:#171B22; border-color:#3A4653}
.engage-card h3{font-family:'Space Grotesk', Inter, system-ui; font-weight:700; letter-spacing:-.01em; margin:0 0 .5rem; color:#fff}
.engage-card p{color:#D6DCE1; margin:0}

section#reports{padding:60px 0; background:var(--paper-2)}
#reports .grid{display:grid; grid-template-columns:2fr 1fr; gap:18px}
.post-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:18px}
.post-card h4{margin:.2rem 0}
.post-card p{color:#2B2F34; margin:0 0 .6rem}

aside .widget{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:18px}
aside .widget h4{margin:.2rem 0}
aside .widget p{color:#2B2F34; margin:0 0 .6rem}

/* Footer */
footer.site-footer, body>footer{
  border-top:1px solid var(--line); padding:28px 0; background:#fff; margin-top:0;
}
footer .grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:18px}
footer a{color:var(--ink)}

/* Utilities */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.grid-2-1{display:grid; grid-template-columns:2fr 1fr; gap:18px}
.center{display:flex; align-items:center; justify-content:center}

/* Responsive */
@media (max-width: 900px){
  .hero .grid{grid-template-columns:1fr; gap:20px}
  .hero .stats{grid-template-columns:1fr}
  #programs .grid, #engage .grid, footer .grid{grid-template-columns:1fr}
  #reports .grid{grid-template-columns:1fr}
  header .bar{flex-direction:column; gap:10px; align-items:flex-start}
}