/* ============================================================================
   ATOMADIC — site.css · shared site chrome (load AFTER colors_and_type.css)
   One palette + one nav + one footer for every page on atomadic.tech.
   Tokens below are the reconciled Design System values (violet → cyan on pure
   black) that the flagship lattice homepage established — they override the
   older teal/navy foundation values so every page tracks the same brand.
   ============================================================================ */
:root{
  --bg:#000000; --fg-1:#e8eaf0; --fg-2:#9aa3b0; --fg-3:#7a8492; --fg-on-accent:#04060b;
  --teal:#22d3ee; --teal-bright:#67e8f9; --teal-deep:#0e9cb8;
  --violet:#7c3aed; --violet-bright:#9d5cf6; --violet-deep:#5b21b6;
  --spark:#F5A623; --spark-hi:#fbbf24; --spark-deep:#d97706;
  --surface-1:#080808; --surface-2:#0f0f0f; --surface-3:#161616;
  --hairline:#1a1a1a; --hairline-2:#222222;
  --grad-brand:linear-gradient(135deg,#7c3aed 0%,#22d3ee 100%);
  --grad-text:linear-gradient(100deg,#9d5cf6 0%,#22d3ee 100%);
  --glow-teal:0 0 24px rgba(34,211,238,.25);
  --glow-violet:0 0 24px rgba(124,58,237,.30);
  --glow-spark:0 0 24px rgba(245,166,35,.30);
}

/* ---------------- announcement bar (static, in-flow on content pages;
     the homepage overrides position in its own styles) ---------------- */
.announcement-bar{
  background:linear-gradient(90deg,#7c3aed,#22d3ee);color:#04060b;
  font-family:var(--font-mono);font-size:12px;font-weight:700;text-align:center;
  padding:7px 16px;letter-spacing:.02em;
}
.announcement-bar a{color:#04060b;text-decoration:underline;font-weight:800}

/* ---------------- canonical top nav (content pages) ---------------- */
.site-nav{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;
  padding:0 24px;height:60px;background:rgba(0,0,0,.82);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.site-nav .site-logo{display:flex;align-items:center;flex:none;text-decoration:none}
.site-nav .site-logo img{height:24px;display:block}
.site-links{display:flex;gap:16px;margin-left:10px;min-width:0;flex:1}
.site-links a{
  font-size:13px;color:var(--fg-2);text-decoration:none;white-space:nowrap;
  padding:4px 2px;transition:color .15s ease;
}
.site-links a:hover{color:var(--fg-1);text-decoration:none}
.site-links a.on{color:var(--teal-bright)}
.site-cta{display:flex;gap:10px;flex:none;margin-left:auto;align-items:center}

/* nav / footer buttons — namespaced so page-local .btn styles never collide */
.sbtn{
  font-weight:600;font-size:13.5px;border-radius:10px;padding:9px 16px;
  border:1px solid transparent;cursor:pointer;background:var(--teal);
  color:var(--fg-on-accent);text-decoration:none;display:inline-flex;gap:7px;
  align-items:center;transition:all .2s ease;white-space:nowrap;
}
.sbtn:hover{background:var(--teal-bright);box-shadow:var(--glow-teal);text-decoration:none}
.sbtn.ghost{background:transparent;color:var(--fg-1);border-color:var(--hairline-2)}
.sbtn.ghost:hover{border-color:var(--teal);color:var(--teal);box-shadow:none}

/* ---------------- mobile burger + dropdown menu ---------------- */
.site-burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px;color:var(--fg-1);line-height:0}
.site-mmenu{
  position:fixed;top:60px;left:0;right:0;z-index:49;background:rgba(5,6,10,.97);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);display:none;flex-direction:column;padding:6px 22px 20px;
}
.site-mmenu.open{display:flex}
.site-mmenu a:not(.sbtn){padding:14px 2px;font-size:16px;color:var(--fg-1);text-decoration:none;border-bottom:1px solid var(--hairline)}
.site-mmenu a.on{color:var(--teal-bright)}
.site-mmenu .sbtn{margin-top:16px;justify-content:center;font-size:15px;padding:12px 16px}

@media(max-width:880px){
  .site-links{display:none}
  .site-cta{display:none}
  .site-burger{display:inline-flex}
}

/* ---------------- canonical footer ---------------- */
.site-footer{
  border-top:1px solid var(--hairline);margin-top:64px;padding:36px 24px 44px;
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;
  background:var(--bg);
}
.site-footer .fbrand{display:flex;flex-direction:column;gap:8px}
.site-footer .fbrand img{height:22px;width:max-content}
.site-footer .ftag{font-family:var(--font-mono);font-size:11.5px;color:var(--fg-3);letter-spacing:.06em}
.site-footer .flinks{display:flex;flex-wrap:wrap;gap:16px}
.site-footer .flinks a{font-size:13px;color:var(--fg-2);text-decoration:none}
.site-footer .flinks a:hover{color:var(--fg-1)}
.site-footer .fcopy{width:100%;font-size:12px;color:var(--fg-3);font-family:var(--font-mono)}