/* Shared primitives — tokens, reset, font, header chrome.
   Page-specific styles live inline in each HTML file. */

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space-grotesk-latin.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #FDFAF2;
  --ink: #111111;
  --red: #FF3500;
  --yellow: #FFE000;
  --cream: #F0E8D0;
  --border: 2.5px solid #111;
  --shadow: 5px 5px 0 #111;
  --shadow-sm: 3px 3px 0 #111;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Space Grotesk', sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; width: 100%; }

.logo { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }
.logo .no { color: var(--red); }
.logo a { color: inherit; text-decoration: none; }

.header-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: var(--border);
  padding: 5px 12px;
  background: var(--yellow);
  box-shadow: var(--shadow-sm);
}

.header-badge a { color: inherit; text-decoration: none; }

.header-inner { display: flex; align-items: center; justify-content: space-between; }