/* Het lettertype van de site wisselt op deze ene plek.
   Zolang er geen licentie is, gebruiken we het systeemlettertype.
   Zodra het definitieve lettertype gekocht is: zet de woff2-bestanden in
   /assets/fonts/, voeg hieronder de @font-face-regels toe (400 en 600)
   en vervang de twee variabelen door de naam van dat lettertype. */

:root {
  --font-brand: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Proefbestanden, alleen voor /_lettertest.html.
   Verwachte bestanden in /assets/fonts/test/:
   GTAmerica-Regular.woff2, GTAmerica-Medium.woff2,
   Soehne-Buch.woff2, Soehne-Kraeftig.woff2,
   ABCDiatype-Regular.woff2, ABCDiatype-Medium.woff2.
   Ontbreken ze, dan valt het blok terug op het systeemlettertype.
   De klassen .proef-* mogen nooit op de echte pagina's staan. */

@font-face {
  font-family: "Proef GT America";
  src: local("GT America"), local("GTAmerica-Regular"), url("/assets/fonts/test/GTAmerica-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proef GT America";
  src: local("GT America Medium"), local("GTAmerica-Medium"), url("/assets/fonts/test/GTAmerica-Medium.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Proef Soehne";
  src: local("Söhne Buch"), local("Soehne-Buch"), url("/assets/fonts/test/Soehne-Buch.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proef Soehne";
  src: local("Söhne Kräftig"), local("Soehne-Kraeftig"), url("/assets/fonts/test/Soehne-Kraeftig.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Proef ABC Diatype";
  src: local("ABC Diatype"), local("ABCDiatype-Regular"), url("/assets/fonts/test/ABCDiatype-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proef ABC Diatype";
  src: local("ABC Diatype Medium"), local("ABCDiatype-Medium"), url("/assets/fonts/test/ABCDiatype-Medium.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.proef-gt-america {
  --font-brand: "Proef GT America", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Proef GT America", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.proef-soehne {
  --font-brand: "Proef Soehne", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Proef Soehne", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.proef-diatype {
  --font-brand: "Proef ABC Diatype", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Proef ABC Diatype", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.proef { font-family: var(--font-brand); }
.proef__label {
  padding: 16px var(--gutter);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--fg-2);
}
.proef .hero { min-height: 72svh; }
.proef .proef__h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: balance;
}