/* ==========================================================================
   Logo.

   Er wordt hier niets ingekleurd. De aangeleverde SVG's dragen hun eigen
   kleuren en worden als bestand geplaatst; de gids laat maar twee
   kleurcombinaties toe voor het hoofdlogo en vier voor het icoon, en verbiedt
   uitdrukkelijk andere. Wat hier staat is dus alleen maat en witruimte.

   De vrije ruimte uit hoofdstuk 02 is gelijk aan "x", de helft van de hoogte
   van het icoon. In het staande lockup is het icoon ongeveer twee derde van
   de hoogte, dus komt x op ongeveer een derde daarvan uit. Boven en onder zit
   die lucht al in het bestand; links en rechts loopt het woordmerk tot tegen
   de rand, dus daar komt ze er als padding bij.
   ========================================================================== */

.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
}

.logo__lockup {
  height: var(--logo-h, 3.4rem);
  width: auto;
  box-sizing: content-box;
  padding-inline: calc(var(--logo-h, 3.4rem) / 3);
}

/* Het losse icoon, voor waar het hoofdlogo niet past. */
.mark {
  width: var(--logo-mark, 2.1rem);
  height: auto;
  flex: none;
}

/* Onderregel onder het logo, bijvoorbeeld de baseline. Staat buiten de vrije
   ruimte van het logo zelf: vandaar de gelijke inspringing. */
.logo__sub {
  margin-inline-start: calc(var(--logo-h, 3.4rem) / 3);
  font-size: var(--fs-micro, 0.75rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--kop-gewicht, 700);
  line-height: 1;
  color: var(--geel);
}