/* Gebruikelijk, systeemlettertype — past zich aan per apparaat */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
}

/* Responsieve header-afbeelding, klikbaar, volle breedte bovenaan */
.site-header {
  display: block;            /* de <a> vult de volle breedte */
  width: 100%;
  line-height: 0;            /* haalt de witte streep onder de afbeelding weg */
}
.site-header img {
  display: block;
  width: 100%;
  height: auto;
}

/* Op desktop: afbeelding op vaste breedte, gecentreerd.
   De content (main.max-w-3xl) heeft dezelfde breedte, dus alles
   valt binnen dezelfde marges. */
@media (min-width: 1024px) {
  .site-header {
    max-width: 768px;        /* = Tailwind max-w-3xl, de contentbreedte */
    margin: 0 auto;          /* centreren */
  }
  .site-header img {
    width: 100%;
    height: auto;            /* geen afsnijden, verhouding blijft */
  }
}