/* ===== Honeybell Games type system ===== */

:root {
  --font-display: 'Syne', 'Big Shoulders Display', Impact, sans-serif;
  --font-body: 'Schibsted Grotesk', 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

body {
  font-family: var(--font-body);
  letter-spacing: -0.009em;
  text-rendering: optimizeLegibility;
}

/* Syne is wide and heavy, so it carries a heading at far smaller sizes
   than the condensed face it replaced. Tight tracking, tight leading. */
h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 0.98;
  text-wrap: balance;
}

/* Sub-headings stay in the text face: a wide display face is hard
   to read at sub-heading sizes and fights the body copy. */
h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.2;
  text-wrap: balance;
}

.mono, .font-mono { font-family: var(--font-mono); }

p { text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* Rotated stickers, polaroids and decorative SVGs sit a few pixels
   outside their cells by design. Contain them so the page itself
   never scrolls sideways. */
body[data-page="games"] main,
body[data-page="humans"] main,
body[data-page="suds"] main { overflow-x: clip; }