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

body {
  margin: 0;
  background-color: var(--surface-page);
  background-image: var(--paper-tooth);
  color: var(--text-body);
  font: var(--type-body);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; color: var(--text-display); text-wrap: balance; }
h1 { font: var(--type-d1); letter-spacing: var(--track-poster); text-transform: uppercase; }
h2 { font: var(--type-d2); letter-spacing: var(--track-poster); text-transform: uppercase; }
h3 { font: var(--type-d3); }
h4 { font: var(--type-h1); }
p { margin: 0 0 var(--space-5); max-width: var(--measure-body); }

a { color: var(--text-link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--mustard-2); transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--text-link-hover); text-decoration-color: currentColor; }
a:active { color: var(--ink-1); }

::selection { background: var(--mustard-2); color: var(--ink-1); }

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--line-bold) solid var(--focus-ring);
  outline-offset: 2px;
}

/* Utility: mono label — used everywhere for metadata, kickers, credits */
.kj-label { font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); }

/* Utility: halftone overlay layer */
.kj-halftone { background-image: var(--halftone-medium); background-size: var(--halftone-medium-size); }
.kj-halftone-coarse { background-image: var(--halftone-coarse); background-size: var(--halftone-coarse-size); }
.kj-halftone-fine { background-image: var(--halftone-fine); background-size: var(--halftone-fine-size); }