/* Shared site navigation — self-contained (works on the dark archive pages and the
   older watermeloncrimes pages). Plain links + prominent CTA buttons. */
.site-header{
  background:#111;border-bottom:2px solid #c0392b;
  display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;
  padding:11px 24px;position:sticky;top:0;z-index:900;
  font-family:'Inter',system-ui,Segoe UI,sans-serif;
}
.nav-brand-wrap{display:flex;align-items:baseline;gap:11px;margin-right:auto;min-width:0;}
.site-header .brand{color:#f5f5f5;font-weight:700;font-size:1.05rem;text-decoration:none;white-space:nowrap;}
.site-header .brand span{color:#e74c3c;}
.nav-stats{color:#9a9a9a;font-size:.76rem;white-space:nowrap;}

/* plain links */
.site-nav{display:flex;align-items:center;gap:4px;}
.site-nav a{color:#b8b8b8;text-decoration:none;font-size:.88rem;font-weight:500;padding:7px 11px;border-radius:6px;transition:background .15s,color .15s;white-space:nowrap;}
.site-nav a:hover{color:#fff;background:rgba(255,255,255,.07);}
.site-nav a.active{color:#fff;background:rgba(255,255,255,.12);}

/* prominent CTA buttons */
.nav-cta{display:flex;align-items:center;gap:8px;}
.nav-cta .cta{text-decoration:none;color:#fff;font-size:.85rem;font-weight:600;padding:8px 16px;border-radius:7px;white-space:nowrap;transition:filter .15s;}
.nav-cta .cta:hover{filter:brightness(1.13);}
.cta-red{background:#c0392b;}
.cta-grey{background:#4a4d52;border:1px solid #5c6066;}
.nav-cta .cta.active{outline:2px solid rgba(255,255,255,.55);outline-offset:1px;}

/* hamburger (mobile only) */
.nav-toggle{display:none;flex-direction:column;gap:4px;cursor:pointer;background:none;border:0;padding:8px;}
.nav-toggle span{display:block;width:24px;height:3px;background:#fff;border-radius:2px;}

@media (max-width:880px){
  .nav-stats{display:none;}
  .nav-cta{order:2;}
  .nav-toggle{display:flex;order:3;margin-left:auto;}
  /* plain links collapse into a clean full-width dropdown under the header */
  .site-nav{order:4;display:none;flex-direction:column;align-items:stretch;width:100%;gap:0;margin-top:8px;border-top:1px solid #2a2a2a;}
  .site-nav.open{display:flex;}
  .site-nav a{padding:13px 8px;border-bottom:1px solid #1f1f1f;border-radius:0;font-size:.98rem;}
  .nav-cta .cta{padding:7px 12px;font-size:.8rem;}
}
@media (max-width:470px){
  .site-header{padding:10px 14px;gap:6px 8px;}
  .site-header .brand{font-size:.9rem;white-space:normal;line-height:1.25;}
  .nav-cta{gap:6px;}
  .nav-cta .cta{padding:6px 9px;font-size:.74rem;}
}