/* ============================================
   CompressAll — shared.css
   Design system: dark base, gold accent
   Font: Cabinet Grotesk + JetBrains Mono
   ============================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cabinet+Grotesk:wght@400;500;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ── Tokens ── */
:root {
  --bg:       #0d0d0f;
  --s1:       #131316;
  --s2:       #18181c;
  --s3:       #222228;
  --s4:       #2a2a32;
  --border:   rgba(255,255,255,.07);
  --border2:  rgba(255,255,255,.12);
  --text:     #f0f0f2;
  --muted:    #888894;
  --muted2:   #555560;
  --gold:     #fbbf24;
  --gold-bg:  rgba(251,191,36,.08);
  --gold-glow:rgba(251,191,36,.15);
  --red:      #ef4444;
  --green:    #22c55e;
  --radius:   14px;
  --font:     'Cabinet Grotesk', system-ui, sans-serif;
  --mono:     'JetBrains Mono', 'Fira Code', monospace;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: var(--font); }
input, select, textarea { font-family: var(--font); }

/* ── Utility ── */
.hidden { display: none !important; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* ── Ad strip ── */
.ad-strip {
  max-width: 900px;
  margin: 0 auto 1.5rem;
  padding: 0 1.5rem;
}
.ad-label {
  font-size: .62rem;
  font-family: var(--mono);
  color: var(--muted2);
  letter-spacing: .1em;
  text-align: center;
  margin-bottom: 4px;
}
.ad-box {
  border-radius: 8px;
  overflow: hidden;
  background: var(--s1);
  border: 1px solid var(--border);
}

/* ── Nav logo size ── */
#site-nav .logo img {
  height: 42px;
  width: auto;
  display: block;
}