/* /assets2/styles.css — compact + hamburger + Manifesto styles */
:root{
  --bg:#0A0F19;--ink:#E8ECF1;--muted:#9AA7B4;--brand:#7AA2FF;--accent:#9EDCFF;
  --card:#0F1626;--line:#1B2435;--radius:18px;--shadow:0 14px 48px rgba(0,0,0,.28);
  --nav:rgba(10,15,25,.94);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:20px}
.lock{overflow:hidden}

/* --- SheepRank specific --- */
pre, code {
  white-space: pre-wrap;
  word-break: break-word;
}

pre {
  overflow: auto;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
}

code {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  background: #0b1220;
  color: #e7edf7;
}

/* optional: tighten card padding on mobile */
@media (max-width: 420px) {
  .card { padding: 12px; }
}

/* A11y */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:12px;top:12px;width:auto;height:auto;background:#fff;color:#000;padding:8px 10px;border-radius:8px}

/* NAV */
.nav{position:sticky;top:0;z-index:100;background:var(--nav);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.nav-inner{max-width:1080px;margin:0 auto;padding:8px 12px;display:flex;align-items:center;gap:14px}

/* PATCH /assets/styles.css — add near the nav styles */

/* Header layout */
.nav{position:sticky;top:0;z-index:1000;background:#0A0F19}
.nav .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px}
.brand{font-weight:700}
.menu{display:flex;gap:16px;align-items:center}
.menu a{white-space:nowrap}

/* Hamburger button */
.menu-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #243245;border-radius:10px;background:#0F172A}
.menu-toggle .bar{display:block;width:18px;height:2px;background:#cbd5e1;margin:3px 0;border-radius:2px}

/* Mobile drawer */
@media (max-width:768px){
  .menu-toggle{display:inline-flex}
  .menu{
    position:fixed;left:0;right:0;top:56px;bottom:0;
    background:#0A0F19;padding:20px;
    flex-direction:column;gap:14px;
    transform:translateY(-110%);transition:transform .25s ease;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
    overflow:auto; /* menu scrolls, page locked */
  }
  .menu.open{transform:translateY(0)}
}

/* Lock background only, not the drawer */
body.lock{overflow:hidden;height:100%}
.brand{font-weight:800;font-size:18px;color:var(--ink);margin-right:auto}
.menu-toggle{display:inline-flex;flex-direction:column;gap:4px;padding:8px 6px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink)}
.menu-toggle .bar{width:20px;height:2px;background:var(--ink);border-radius:2px}
.menu{display:none}
.menu.open{display:flex}
.menu a{color:var(--ink);opacity:.92;padding:8px 0;font-weight:600}
.menu .nav-cta{margin-left:12px}
.btn{display:inline-block;padding:10px 14px;min-height:44px;border-radius:12px;background:var(--brand);color:#0A0F19;font-weight:800;box-shadow:var(--shadow);border:0}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.nav-cta{white-space:nowrap}
@media (min-width:900px){.menu-toggle{display:none}.menu{display:flex;align-items:center;gap:18px}}

/* HERO */
.hero{padding-top:64px;border-bottom:1px solid var(--line);background:radial-gradient(1000px 420px at 20% 10%,rgba(122,162,255,.18),transparent)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:center}
@media (min-width:880px){.hero-grid{grid-template-columns:minmax(260px,420px) 1fr;gap:28px}}
.hero-media img{border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow);max-height:68vh;object-fit:cover}
.hero-copy h1{margin:0 0 6px 0;font-size:34px;line-height:1.15}
@media (min-width:880px){.hero-copy h1{font-size:42px}}
.sub{margin:6px 0 12px 0;color:#E2EBFF}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.sig{margin-top:8px;color:var(--muted);font-size:14px}

/* CARDS & CONTENT */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin:22px 0}
.grid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:980px){.grid{grid-template-columns:1fr 1fr}}
.bullets{margin:0;padding-left:20px;list-style-position:outside}
.bullets li{margin:0 0 6px 0;line-height:1.6}
.steps{margin:0;padding-left:20px;list-style-position:outside}
.steps li{margin:0 0 6px 0;line-height:1.6}
.note{margin-top:10px;color:var(--muted);font-size:14px}

/* Manifesto specific */
.manifesto h2{margin-top:0}
.manifesto-points{margin:10px 0 10px 20px;line-height:1.6}
.signature{margin-top:8px;color:var(--muted);font-style:italic}

/* FOOTER */
.foot{border-top:1px solid var(--line);opacity:.95;text-align:center;padding:18px 0}

/* Anchor offset */
section[id]{scroll-margin-top:84px}

/* Motion */
@media (prefers-reduced-motion:no-preference){
  .btn{transition:transform .08s ease,filter .12s ease}
  .btn:hover{transform:translateY(-1px);filter:saturate(110%)}
}

/* PATCH /assets/styles.css — mobile nav fixes */

/* Make header always on top */
.nav{position:sticky;top:0;z-index:9999;background:#0A0F19}

/* Contrast for hamburger */
.menu-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;
  border:1px solid #274b70;border-radius:12px;background:#0F172A}
.menu-toggle .bar{display:block;width:20px;height:2.5px;background:#e6edf6;margin:4px 0;border-radius:2px}

/* Desktop menu unchanged */
.menu{display:flex;gap:16px;align-items:center}
.menu a{white-space:nowrap}

/* Mobile dropdown: visible, non-blocking, over content */
@media (max-width:768px){
  .menu-toggle{display:inline-flex}
  .menu{
    position:absolute; /* sit below header, not full screen */
    right:12px; top:56px;
    display:flex; flex-direction:column; gap:6px;
    background:rgba(10,15,25,.94); /* opaque enough over photo */
    -webkit-backdrop-filter:saturate(140%) blur(6px); backdrop-filter:saturate(140%) blur(6px);
    border:1px solid #1f2d44; border-radius:14px;
    padding:10px; width:min(86vw,320px);
    max-height:70vh; overflow:auto;
    box-shadow:0 16px 40px rgba(0,0,0,.45);
    opacity:0; pointer-events:none; transform:translateY(-8px); transition:opacity .18s ease,transform .18s ease;
  }
  .menu.open{opacity:1; pointer-events:auto; transform:translateY(0)}
  .menu a{display:block;padding:12px 10px;border-radius:10px}
  .menu a:active,.menu a:focus{outline:none;background:#0e1a2b}
}

/* Ensure CTA doesn’t clip under address bar */
.nav-cta{margin-left:4px}