/* GenShift™ — unified stylesheet
   Eve-Space aesthetic: deep void, heraldic gradients, monospace kickers,
   per-session accent rotation set by site.js via --accent / --accent-2. */

:root{
  --bg:#0B0F14;
  --bg-deep:#06090D;
  --panel:#0F141B;
  --panel-2:#0C1218;
  --ink:#E8EDF4;
  --muted:#99A7BD;
  --rule:#1c2533;
  --rule-2:#243040;

  /* Defaults — overridden per session by site.js */
  --accent:#3DD1A7;
  --accent-2:#8AB4F8;

  --radius:14px;
  --radius-sm:8px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --shadow-lg:0 24px 80px rgba(0,0,0,.55);
  --grid:1120px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(138,180,248,.10), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(61,209,167,.08), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Starfield canvas sits behind everything */
#starfield{
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.55;
}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--grid); margin:0 auto; padding:28px}

/* ---- Topbar ---- */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px) saturate(140%);
  background:linear-gradient(180deg, rgba(11,15,20,.92), rgba(11,15,20,.70));
  border-bottom:1px solid rgba(28,37,51,.7);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; width:100%; max-width:var(--grid); margin:0 auto;
  padding:14px 24px;
}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0}
.logo .mark{
  width:28px; height:28px; display:inline-block;
  background:url('mark.svg') center/contain no-repeat;
  filter: drop-shadow(0 0 8px color-mix(in oklab, var(--accent) 60%, transparent));
}
.logo span{font-weight:800; letter-spacing:.6px; color:var(--ink)}
.logo small{
  font-family:var(--mono); font-size:10px; color:var(--muted);
  letter-spacing:.18em; text-transform:uppercase; margin-left:4px;
}

/* Desktop nav */
.topnav{display:flex; gap:8px; flex-wrap:wrap}
.topnav a{
  color:#9FB2D0; font-size:13px;
  border:1px solid var(--rule-2);
  padding:6px 12px; border-radius:999px;
  text-decoration:none; transition:border-color .15s, color .15s, background .15s;
}
.topnav a:hover{color:var(--ink); border-color:var(--accent); text-decoration:none}
.topnav a.is-active{
  color:#071013; background:linear-gradient(90deg, var(--accent), var(--accent-2));
  border-color:transparent; font-weight:700;
}

/* Hamburger button (hidden on desktop) */
.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:36px; height:36px; padding:6px;
  background:transparent; border:1px solid var(--rule-2);
  border-radius:10px; cursor:pointer; flex-shrink:0;
}
.nav-toggle span{
  display:block; height:1.5px; border-radius:2px;
  background:var(--ink); transition:transform .2s, opacity .2s, width .2s;
  transform-origin:center;
}
.nav-toggle.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0; width:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Mobile drawer */
.nav-drawer{
  display:none; /* shown by JS when open */
  flex-direction:column; gap:6px;
  padding:12px 24px 16px;
  border-top:1px solid var(--rule);
  background:rgba(11,15,20,.97);
}
.nav-drawer a{
  color:#9FB2D0; font-size:15px;
  border:1px solid var(--rule-2);
  padding:10px 16px; border-radius:12px;
  text-decoration:none;
  transition:border-color .15s, color .15s, background .15s;
}
.nav-drawer a:hover{color:var(--ink); border-color:var(--accent); text-decoration:none}
.nav-drawer a.is-active{
  color:#071013; background:linear-gradient(90deg, var(--accent), var(--accent-2));
  border-color:transparent; font-weight:700;
}

@media (max-width:700px){
  .topnav{display:none}          /* hide pill row */
  .nav-toggle{display:flex}      /* show hamburger */
  .topbar-inner{padding:12px 18px}
  .logo small{display:none}      /* declutter logo on small screens */
}

/* ---- Hero ---- */
.hero{padding:48px 0 24px; position:relative}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-2);
}
.eyebrow::before{
  content:""; width:24px; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent-2));
}
.h1{
  font-size:clamp(34px, 5vw, 56px);
  line-height:1.05; margin:14px 0 16px;
  font-weight:800; letter-spacing:-.5px;
  background:linear-gradient(180deg, #FFFFFF 0%, #BFD0E8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.h1 em{
  font-style:normal;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{font-size:18px; color:var(--muted); max-width:64ch}

/* ---- Buttons ---- */
.btn{
  appearance:none; border:0; cursor:pointer;
  padding:12px 18px; border-radius:12px;
  font-weight:700; font-size:14px; letter-spacing:.2px;
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px); text-decoration:none}
.btn-primary{
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#071013;
  box-shadow:0 10px 30px color-mix(in oklab, var(--accent) 25%, transparent);
}
.btn-ghost{
  background:transparent; border:1px solid var(--rule-2); color:var(--ink);
}
.btn-ghost:hover{border-color:var(--accent)}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}

/* ---- Badges & kickers ---- */
.badge{
  display:inline-block;
  background:linear-gradient(90deg,#10222E,#142030);
  padding:6px 12px; border:1px solid #1e2a3a; border-radius:999px;
  color:#B4C5E0; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
}
.kicker{
  color:var(--accent-2); font-family:var(--mono);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  margin-bottom:6px;
}
.note{font-size:14px; color:var(--muted)}
.small{font-size:13px; color:#9FB2D0}

/* ---- Panels & cards ---- */
.panel{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--rule);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.panel::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 50%, transparent), transparent);
  opacity:.7;
}
.card{padding:20px}
.card h3{margin:0 0 8px; font-size:18px; letter-spacing:.1px}
.card p{margin:0; color:#CBD6EA}

.grid{display:grid; gap:18px}
.two{grid-template-columns:1.3fr .7fr}
.three{grid-template-columns:repeat(3, 1fr)}
.four{grid-template-columns:repeat(4, 1fr)}
@media (max-width:980px){
  .two, .three, .four{grid-template-columns:1fr}
}

.hr{
  height:1px; border:0; margin:28px 0;
  background:linear-gradient(90deg, transparent, var(--rule-2), transparent);
}

/* ---- Lists ---- */
.list{list-style:none; padding:0; margin:0}
.list li{padding:12px 0; border-bottom:1px solid var(--rule)}
.list li:last-child{border-bottom:0}
.ord{list-style:decimal inside; padding:0; margin:0; color:#CBD6EA}
.ord li{padding:8px 0; border-bottom:1px solid var(--rule)}
.ord li:last-child{border-bottom:0}
.ord li strong{color:var(--ink)}

/* ---- Quote / pull ---- */
.quote{
  font-size:18px; color:#CBE3FF;
  border-left:3px solid var(--accent-2);
  padding:10px 16px; border-radius:8px;
  background:linear-gradient(90deg, rgba(138,180,248,.06), transparent);
}

/* ---- Article (manifesto/charter/blog post) ---- */
.article{max-width:72ch; margin:0 auto}
.article h2{
  font-size:26px; margin:32px 0 10px; letter-spacing:.1px;
  display:flex; align-items:center; gap:12px;
}
.article h2::before{
  content:""; display:inline-block; width:8px; height:8px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  transform:rotate(45deg); border-radius:1px;
}
.article p{color:#D2DCEE}
.article .lede{font-size:19px}

/* ---- Stat row ---- */
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:760px){.stat-row{grid-template-columns:1fr}}
.stat{padding:18px; border:1px solid var(--rule); border-radius:var(--radius);
  background:linear-gradient(180deg, var(--panel), var(--panel-2));}
.stat .n{
  font-family:var(--mono); font-size:34px; font-weight:700;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat .l{color:var(--muted); font-size:13px; margin-top:4px; letter-spacing:.06em}

/* ---- Sigil divider (Heptagram glyph) ---- */
.sigil{
  display:flex; justify-content:center; align-items:center;
  gap:14px; margin:32px 0; color:var(--muted);
  font-family:var(--mono); font-size:11px; letter-spacing:.4em; text-transform:uppercase;
}
.sigil::before, .sigil::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--rule-2), transparent);
}

/* ---- Tags ---- */
.tag{
  display:inline-block; font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-2);
  border:1px solid color-mix(in oklab, var(--accent-2) 35%, transparent);
  padding:3px 8px; border-radius:6px; margin-right:6px;
}

/* ---- Footer ---- */
footer.site-footer{
  margin-top:40px; padding:28px 0;
  color:#7F95B1; border-top:1px solid var(--rule); font-size:13px;
}
footer.site-footer .row{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  max-width:var(--grid); margin:0 auto; padding:0 28px;
}
footer.site-footer a{color:#B4C5E0}

/* ---- Code & inline ---- */
code{
  font-family:var(--mono); font-size:.92em;
  background:#0E1722; border:1px solid var(--rule);
  padding:1px 6px; border-radius:6px; color:#CBE3FF;
}

/* ---- Form (contact) ---- */
.form-shell{padding:6px}
.form-shell input, .form-shell textarea{
  width:100%; padding:12px 14px;
  background:#0B121A; color:var(--ink);
  border:1px solid var(--rule-2); border-radius:10px;
  font-family:var(--sans); font-size:14px;
  margin:6px 0 12px;
}
.form-shell label{font-size:13px; color:var(--muted); letter-spacing:.04em}
.form-shell input:focus, .form-shell textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
}

/* Scrollbar */
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#1a2332; border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:#243040}