/* Element-level defaults for the public site — type as a story, not UI.
   Deliberately NOT loaded in the signed-in area, where Bootstrap owns the
   element styling; the design tokens in colors_and_type.css are shared. */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Alleen op body, niet op html: `--fs-base` is een rem-waarde, dus op allebei
   zetten vermenigvuldigt hem met zichzelf (1,125 × 1,125 × 16px = 20,25px).
   De wortel blijft staan op wat de bezoeker in zijn browser heeft ingesteld,
   en daar zijn alle rem-waarden elders ook op gebaseerd. */
body { font-size: var(--fs-base); color: var(--fg-2); }

h1, .h1, h2, .h2, h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--creme);
  text-wrap: balance;
  margin: 0;
}

h1, .h1 { font-size: var(--fs-xxl); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
h2, .h2 {
  font-size: clamp(27px, 4.2vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
h3, .h3 { font-size: 21px; line-height: 1.2; margin: 0 0 8px; }

p, .p {
  font-family: var(--font-body);
  line-height: var(--lh-body);
  color: var(--creme-2);
  text-wrap: pretty;
  margin: 0 0 16px;
}
p:last-child { margin-bottom: 0; }
em { font-style: italic; }
strong { color: var(--creme); font-weight: 600; }

.lede {
  font-size: var(--fs-m);
  line-height: var(--lh-loose);
  font-style: italic;
  color: var(--creme);
  max-width: 48ch;
}

blockquote, .quote {
  font-family: var(--font-display);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--creme);
  border: 0;
  margin: 0;
}

/* Geen standaard onderstreping: op deze pagina zit elke link in iets dat zijn
   eigen affordance meebrengt — de balk, de footer, een knop, een beeldtegel.
   Een link in lopende tekst zet die van zichzelf terug. */
a { color: inherit; text-decoration: none; }

::selection { background: var(--goud); color: var(--grond); }