/* ───────────────────────────────────────────────────────────
   site-shell.css — shared nav, mobile menu, breadcrumb & footer
   Injected by site-shell.js into every subpage so navigation is
   consistent with the index. Mirrors the index.html design tokens.
   ─────────────────────────────────────────────────────────── */

:root{
  --bg:#030712; --bg2:#070B1F;
  --ink:#F8FAFC; --ink-dim:#94A3B8; --ink-faint:#475569;
  --purple:#7C3AED; --blue:#38BDF8;
  --hairline:rgba(148,163,184,.14);
  --hairline-soft:rgba(148,163,184,.08);
  --heading:'Space Grotesk',sans-serif;
  --body:'DM Sans',sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

body{background:var(--bg)}

.wrap{max-width:1440px;margin:0 auto;padding:0 clamp(1.5rem,5vw,6rem)}

a:focus-visible,button:focus-visible,input:focus-visible{outline:1px solid var(--blue);outline-offset:3px}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem clamp(1.5rem,5vw,6rem);
  transition:background .5s,border-color .5s,padding .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(3,7,18,.72);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--hairline-soft);
  padding-top:.9rem;padding-bottom:.9rem;
}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink)}
.brand-mark{width:22px;height:22px;flex:none}
.brand-word{font-family:var(--heading);font-weight:500;font-size:.82rem;letter-spacing:.18em}
.nav-center{display:flex;gap:2.5rem;list-style:none}
.nav-center a{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-faint);text-decoration:none;transition:color .3s;
}
.nav-center a:hover{color:var(--ink)}
.nav-center a.active{color:var(--ink)}
.nav-enter{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);background:none;border:1px solid var(--hairline);
  padding:.7rem 1.3rem;cursor:pointer;transition:border-color .3s,background .3s;text-decoration:none;
}
.nav-enter:hover{border-color:rgba(124,58,237,.6);background:rgba(124,58,237,.08)}
.nav-enter svg{width:13px;height:13px;transition:transform .3s var(--ease-out)}
.nav-enter:hover svg{transform:translateX(3px)}
.burger{display:none;background:none;border:none;cursor:pointer;padding:.5rem}
.burger span{display:block;width:22px;height:1px;background:var(--ink);margin:5px 0;transition:.3s}

.mobile-menu{
  position:fixed;inset:0;z-index:999;background:rgba(3,7,18,.97);
  display:flex;flex-direction:column;justify-content:center;padding:0 2rem;gap:2rem;
  opacity:0;pointer-events:none;transition:opacity .4s;
}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{
  font-family:var(--heading);font-size:2rem;font-weight:500;color:var(--ink);
  text-decoration:none;letter-spacing:-.01em;
}
.mobile-menu a span{font-family:var(--mono);font-size:.7rem;color:var(--purple);margin-right:1rem;vertical-align:middle}
.mobile-menu a[aria-current="page"]{color:var(--purple)}

/* ---------- breadcrumb ---------- */
.shell-crumb{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 1.5rem;
}
.shell-crumb a{color:var(--ink-faint);text-decoration:none;transition:color .3s}
.shell-crumb a:hover{color:var(--ink)}
.shell-back{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-dim);border:1px solid var(--hairline-soft);padding:.4rem .7rem;transition:border-color .3s,color .3s,background .3s}
.shell-back svg{width:13px;height:13px;transition:transform .3s var(--ease-out)}
.shell-back:hover{color:var(--ink);border-color:rgba(124,58,237,.5);background:rgba(124,58,237,.08)}
.shell-back:hover svg{transform:translateX(-3px)}
.shell-crumb [aria-current="page"]{color:var(--purple)}

/* ---------- footer (redesigned, multi-column) ---------- */
.shell-foot{position:relative;z-index:2;border-top:1px solid var(--hairline-soft);padding:3.4rem 0 2.2rem;margin-top:5rem}
.shell-foot-inner{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;align-items:start}
.shell-foot-brand .brand{margin-bottom:1rem}
.shell-foot-brand .brand-word{font-size:.82rem}
.shell-foot-tag{font-family:var(--body);font-size:.92rem;line-height:1.65;color:var(--ink-dim);max-width:32ch;margin:0}
.shell-foot-col h4{font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 1.1rem;font-weight:500}
.shell-foot-col a{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);text-decoration:none;padding:.42rem 0;transition:color .3s}
.shell-foot-col a:hover{color:var(--ink)}
.shell-foot-base{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--hairline-soft)}
.shell-foot-base span{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .nav-center{display:none}
  .burger{display:block}
}
@media(max-width:640px){
  .nav{padding:1rem 1.1rem}
  .brand-word{font-size:.7rem;letter-spacing:.12em}
  .mobile-menu{padding:0 1.5rem;gap:1.4rem}
  .mobile-menu a{font-size:1.6rem}
  .shell-foot-inner{grid-template-columns:1fr 1fr;gap:2rem 2.5rem}
  .shell-foot-brand{grid-column:1 / -1;margin-bottom:.4rem}
}
@media(max-width:480px){
  .nav-enter{display:none}
}
@media(max-width:520px){
  .shell-foot-inner{gap:1.6rem 1.5rem}
  .shell-foot-col a{min-height:44px;display:flex;align-items:center}
}
@media(prefers-reduced-motion:reduce){
  .nav,.nav *,.burger span,.mobile-menu{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
}