/* Shared tokens + page chrome. Every page links this before its own styles. */
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('/fonts/cabinet-grotesk-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('/fonts/cabinet-grotesk-medium.woff2') format('woff2');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('/fonts/cabinet-grotesk-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('/fonts/cabinet-grotesk-extrabold.woff2') format('woff2');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #FFFFFF;
  --surface: #EEEEEE;
  --ink: #111111;
  --ink-soft: #2F2F2B;
  --ink-mute: #54534E;
  --accent: #3F5A46;
  --rule: #DDDDDD;
  --f-display: 'Cabinet Grotesk', system-ui, sans-serif;
  --f-serif: 'Instrument Serif', Georgia, serif;
  --f-body: 'Cabinet Grotesk', system-ui, sans-serif;
  --f-mono: 'Cabinet Grotesk', ui-sans-serif, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html, body {
  min-height: 100%;
  background: radial-gradient(circle at 35% 0%, rgba(63, 90, 70, 0.04), transparent 34rem), var(--paper);
  color: var(--ink);
}
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
body { margin: 0; font-family: var(--f-body); font-size: 16px; font-weight: 500; line-height: 1.6 }
::selection { background: var(--accent); color: #fff }
a { color: inherit; text-decoration: none }
img, svg { max-width: 100% }
.icon { width: 1em; height: 1em; display: inline-block; flex-shrink: 0; overflow: visible }

/* Film-grain paper texture. Dials: opacity = speck darkness; the "14 -8.7"
   pair in feColorMatrix = speck density (toward -10 sparser, -8 denser). */
.paper-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 14 -9'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 78% 14%, rgba(63, 90, 70, 0.03), transparent 30rem);
  background-repeat: repeat, no-repeat;
  background-size: 240px 240px, cover;
  background-position: 0 0, center;
  opacity: .3;
}

.site { position: relative; z-index: 1 }