/* Eén typografisch systeem voor beide pagina's.
 * HTML-koppen krijgen automatisch hun rol. Gebruik type-* voor andere elementen.
 * Pas uitsluitend de schaal hieronder aan; geen regels per sectie of component.
 */
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Satoshi", var(--font-body);
  --type-hero: clamp(2rem, 2.25rem + 2.75vw, 5.5rem);
  --type-section: clamp(2rem, 1.5rem + 2vw, 4rem);
  --type-title: clamp(1.25rem, 1rem + .8vw, 1.875rem);
  --type-lead: clamp(1.2rem, 1rem + .9vw, 1.875rem);
  --type-body: 1.0625rem;
  --type-small: .9375rem;
  --type-label: .8125rem;
  --type-label-small: .75rem;
  --type-meta-size: clamp(.6875rem, .12vw + .65rem, .75rem);
}

body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.5;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:where(button, input, textarea, select) { font: inherit; }
:where(strong, b, dt) { font-weight: 600; }

/* Koppen: dezelfde familie, hetzelfde gewicht en dezelfde regelafstand. */
:where(h1, h2, h3, h4, h5, h6, dt),
:where(.type-hero, .type-section, .type-title) {
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.1;
}
:where(h1), .type-hero { font-size: var(--type-hero); }
:where(h2), .type-section { font-size: var(--type-section); }
:where(h3, h4, h5, h6, dt), .type-title { font-size: var(--type-title); }

/* Lopende tekst, met alleen een grotere en een kleinere variant. */
.type-body, .type-lead, .type-small, .type-meta, :where(small) {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
}
.type-body { font-size: var(--type-body); }
.type-lead { font-size: var(--type-lead); }
.type-small, :where(small) { font-size: var(--type-small); }

/* Alle labels, knoppen, tabs en compacte navigatie delen één stijl.
 * Het pseudo-element toont het sectielabel uit data-section.
 */
.type-label, .type-label-small, .section-intro::before {
  font-family: var(--font-display);
  font-weight: 510;
  line-height: 1.35;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.type-label, .section-intro::before { font-size: var(--type-label); }
.type-label-small { font-size: var(--type-label-small); }

/* Keep long ticker messages at the same size, including on mobile browsers. */
.ticker {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.ticker span { font: inherit; }

/* One text role for copyright, business registration and legal links. */
.type-meta { font-size: var(--type-meta-size); }