/* Lettertypen: zelf gehost, geen externe CDN.
   Newsreader is nog niet aangeleverd. Tot dan is Crimson Pro de serif (Latin-subset, woff).
   Newsreader toevoegen: zie docs/ARCHITECTURE.md › "Lettertypen". */
@font-face {
  font-family: 'Crimson Pro';
  src: url('../assets/fonts/crimsonpro-regular.woff') format('woff');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Crimson Pro';
  src: url('../assets/fonts/crimsonpro-bold.woff') format('woff');
  font-weight: 501 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Crimson Pro';
  src: url('../assets/fonts/crimsonpro-italic.woff') format('woff');
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('../assets/fonts/instrumentsans-regular.woff') format('woff');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('../assets/fonts/instrumentsans-bold.woff') format('woff');
  font-weight: 501 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display,
.h2,
.h3,
.statement {
  font-family: var(--font-serif);
  color: var(--color-ink);
  text-wrap: balance;
}

.display {
  font-weight: 400;
  font-size: var(--text-display);
  line-height: 0.98;
  letter-spacing: -0.026em;
}

.h2 {
  font-weight: 400;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.h3 {
  font-weight: 500;
  font-size: var(--text-h3);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.statement {
  font-weight: 400;
  font-size: var(--text-statement);
  line-height: 1.16;
  letter-spacing: -0.014em;
}

.display em,
.h2 em,
.statement em {
  font-style: italic;
}

.accent-stop {
  color: var(--color-red);
}

.lead {
  font-size: var(--text-lead);
  line-height: 1.6;
  max-width: 34em;
  text-wrap: pretty;
}

.body-sm {
  font-size: var(--text-small);
  line-height: 1.65;
  text-wrap: pretty;
}

.label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-label);
  line-height: 1.35;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

.label--ink {
  color: var(--color-ink);
}

.muted {
  color: var(--color-muted);
}

/* Lopende tekst (juridische pagina's, verdieping) */
.prose {
  max-width: var(--width-prose);
}

.prose > * + * {
  margin-top: 1em;
}

.prose h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  line-height: 1.2;
  color: var(--color-ink);
  margin-top: 2.25em;
}

.prose h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-ink);
  margin-top: 1.75em;
}

.prose h2:first-child,
.prose h3:first-child {
  margin-top: 0;
}

.prose ul {
  padding-left: 0;
  list-style: none;
}

.prose li {
  position: relative;
  padding-left: 1.5rem;
}

.prose li + li {
  margin-top: 0.5em;
}

.prose li::before {
  content: '';
  position: absolute;
  left: 0.2rem;
  top: 0.7em;
  width: 6px;
  height: 6px;
  background: var(--color-red-ink);
  transform: rotate(45deg);
}

.prose a {
  color: var(--color-red-ink);
  text-underline-offset: 0.18em;
}

.prose a:hover {
  color: var(--color-red-deep);
}

.prose strong {
  color: var(--color-ink);
  font-weight: 600;
}

.prose ol {
  padding-left: 1.25rem;
}

.prose ol li {
  padding-left: 0.25rem;
}

.prose ol li::before {
  display: none;
}

.u-link {
  color: var(--color-red-ink);
  text-underline-offset: 0.18em;
}

.u-link:hover {
  color: var(--color-red-deep);
}