/*
  stijl.css
  Alle stijlen voor de nieuwe site in één bestand:
  1. Tekststijlen, overgenomen van het thema Twenty Seventeen
     (het thema van de oude site olivierkil.com).
  2. Indeling van de pagina (achtergrond, kop, tekstblok).

  Overgenomen van de oude site: lettertype, groottes, gewichten,
  regelhoogtes, kleuren en breekpunten (30em en 48em) van body, koppen,
  alinea's, citaten, lijsten, code en titels.

  Bewust anders dan de oude site:
  - Maten staan in rem in plaats van px, zodat tekst meegroeit met de
    browserinstelling (WCAG 1.4.4 Tekst vergroten).
  - Links in lopende tekst zijn onderstreept, zodat ze niet alleen op kleur
    te herkennen zijn (1.4.1 Gebruik van kleur).
  - De focusmarkering is een duidelijke, ononderbroken rand in plaats van een
    dunne stippellijn (2.4.7 Focus zichtbaar).
  - Alle koppen staan in hoofdletters en zijn vet.

  Lettertype: Libre Franklin, zelf gehost. De bestanden staan in de map
  libre-franklin/ naast dit bestand (zie @font-face hieronder). Beschikbaar
  zijn de gewichten 300, 400, 600 en 800, normaal en cursief. Gebruik in
  deze stijlen alleen die vier gewichten: koppen 800, vette tekst 600.
  Zonder het lettertype valt de tekst terug op Helvetica Neue, Helvetica
  of Arial.

  Achtergrond: een vaste foto die het hele scherm vult. De blokken schuiven
  eroverheen. Op een liggend scherm wordt achtergrond-liggend.webp getoond,
  op een staand scherm (telefoon, tablet rechtop) achtergrond-staand.webp.
  Beide bestanden staan naast dit bestand. De browser laadt alleen de foto
  die bij het scherm past.
*/

/*
  Libre Franklin
  Copyright 2020 The LibreFranklin Project Authors
  (https://github.com/impallari/Libre-Franklin)
  SIL Open Font License, Version 1.1 (https://opensource.org/licenses/OFL-1.1)
*/

/* libre-franklin-vietnamese-300-normal */
@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-display: fallback;
	font-weight: 300;
	src:
		url('./libre-franklin/libre-franklin-vietnamese-300-normal.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-300-normal.woff') format('woff');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* libre-franklin-latin-ext-300-normal */
@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-display: fallback;
	font-weight: 300;
	src:
		url('./libre-franklin/libre-franklin-latin-ext-300-normal.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-300-normal.woff') format('woff');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* libre-franklin-latin-300-normal */
@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-display: fallback;
	font-weight: 300;
	src:
		url('./libre-franklin/libre-franklin-latin-300-normal.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-300-normal.woff') format('woff');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* libre-franklin-vietnamese-300-italic */
@font-face {
	font-family: 'Libre Franklin';
	font-style: italic;
	font-display: fallback;
	font-weight: 300;
	src:
		url('./libre-franklin/libre-franklin-vietnamese-300-italic.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-300-italic.woff') format('woff');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* libre-franklin-latin-ext-300-italic */
@font-face {
	font-family: 'Libre Franklin';
	font-style: italic;
	font-display: fallback;
	font-weight: 300;
	src:
		url('./libre-franklin/libre-franklin-latin-ext-300-italic.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-300-italic.woff') format('woff');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* libre-franklin-latin-300-italic */
@font-face {
	font-family: 'Libre Franklin';
	font-style: italic;
	font-display: fallback;
	font-weight: 300;
	src:
		url('./libre-franklin/libre-franklin-latin-300-italic.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-300-italic.woff') format('woff');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* libre-franklin-vietnamese-400-normal */
@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-display: fallback;
	font-weight: 400;
	src:
		url('./libre-franklin/libre-franklin-vietnamese-400-normal.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-400-normal.woff') format('woff');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* libre-franklin-latin-ext-400-normal */
@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-display: fallback;
	font-weight: 400;
	src:
		url('./libre-franklin/libre-franklin-latin-ext-400-normal.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-400-normal.woff') format('woff');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* libre-franklin-latin-400-normal */
@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-display: fallback;
	font-weight: 400;
	src:
		url('./libre-franklin/libre-franklin-latin-400-normal.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-400-normal.woff') format('woff');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* libre-franklin-vietnamese-400-italic */
@font-face {
	font-family: 'Libre Franklin';
	font-style: italic;
	font-display: fallback;
	font-weight: 400;
	src:
		url('./libre-franklin/libre-franklin-vietnamese-400-italic.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-400-italic.woff') format('woff');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* libre-franklin-latin-ext-400-italic */
@font-face {
	font-family: 'Libre Franklin';
	font-style: italic;
	font-display: fallback;
	font-weight: 400;
	src:
		url('./libre-franklin/libre-franklin-latin-ext-400-italic.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-400-italic.woff') format('woff');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* libre-franklin-latin-400-italic */
@font-face {
	font-family: 'Libre Franklin';
	font-style: italic;
	font-display: fallback;
	font-weight: 400;
	src:
		url('./libre-franklin/libre-franklin-latin-400-italic.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-400-italic.woff') format('woff');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* libre-franklin-vietnamese-600-normal */
@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-display: fallback;
	font-weight: 600;
	src:
		url('./libre-franklin/libre-franklin-vietnamese-600-normal.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-600-normal.woff') format('woff');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* libre-franklin-latin-ext-600-normal */
@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-display: fallback;
	font-weight: 600;
	src:
		url('./libre-franklin/libre-franklin-latin-ext-600-normal.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-600-normal.woff') format('woff');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* libre-franklin-latin-600-normal */
@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-display: fallback;
	font-weight: 600;
	src:
		url('./libre-franklin/libre-franklin-latin-600-normal.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-600-normal.woff') format('woff');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* libre-franklin-vietnamese-600-italic */
@font-face {
	font-family: 'Libre Franklin';
	font-style: italic;
	font-display: fallback;
	font-weight: 600;
	src:
		url('./libre-franklin/libre-franklin-vietnamese-600-italic.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-600-italic.woff') format('woff');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* libre-franklin-latin-ext-600-italic */
@font-face {
	font-family: 'Libre Franklin';
	font-style: italic;
	font-display: fallback;
	font-weight: 600;
	src:
		url('./libre-franklin/libre-franklin-latin-ext-600-italic.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-600-italic.woff') format('woff');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* libre-franklin-latin-600-italic */
@font-face {
	font-family: 'Libre Franklin';
	font-style: italic;
	font-display: fallback;
	font-weight: 600;
	src:
		url('./libre-franklin/libre-franklin-latin-600-italic.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-600-italic.woff') format('woff');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* libre-franklin-vietnamese-800-normal */
@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-display: fallback;
	font-weight: 800;
	src:
		url('./libre-franklin/libre-franklin-vietnamese-800-normal.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-800-normal.woff') format('woff');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* libre-franklin-latin-ext-800-normal */
@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-display: fallback;
	font-weight: 800;
	src:
		url('./libre-franklin/libre-franklin-latin-ext-800-normal.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-800-normal.woff') format('woff');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* libre-franklin-latin-800-normal */
@font-face {
	font-family: 'Libre Franklin';
	font-style: normal;
	font-display: fallback;
	font-weight: 800;
	src:
		url('./libre-franklin/libre-franklin-latin-800-normal.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-800-normal.woff') format('woff');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* libre-franklin-vietnamese-800-italic */
@font-face {
	font-family: 'Libre Franklin';
	font-style: italic;
	font-display: fallback;
	font-weight: 800;
	src:
		url('./libre-franklin/libre-franklin-vietnamese-800-italic.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-800-italic.woff') format('woff');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* libre-franklin-latin-ext-800-italic */
@font-face {
	font-family: 'Libre Franklin';
	font-style: italic;
	font-display: fallback;
	font-weight: 800;
	src:
		url('./libre-franklin/libre-franklin-latin-ext-800-italic.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-800-italic.woff') format('woff');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* libre-franklin-latin-800-italic */
@font-face {
	font-family: 'Libre Franklin';
	font-style: italic;
	font-display: fallback;
	font-weight: 800;
	src:
		url('./libre-franklin/libre-franklin-latin-800-italic.woff2') format('woff2'),
		url('./libre-franklin/libre-franklin-all-800-italic.woff') format('woff');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-tekst: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-code: Menlo, Consolas, Monaco, monospace;
  --font-pre: "Courier 10 Pitch", Courier, monospace;

  --kleur-tekst: #333;
  --kleur-donker: #222;
  --kleur-gedempt: #666;
  --kleur-meta: #767676;
  --kleur-achtergrond: #fff;
  --kleur-code-achtergrond: #eee;
  --kleur-link: #222;
  --kleur-link-hover: #000;
  --kleur-focus: #0b57d0;

  --marge: clamp(1.25rem, 5vw, 4rem);
  --hoogte-kop: 11rem;
  --hoogte-menu: 3.5rem;
  --ruimte-foto: clamp(8rem, 30svh, 20rem); /* stuk foto tussen en onder de witte blokken */
}

/* ==========================================================
   1. Tekststijlen
   ========================================================== */

/* Basis */

* {
  box-sizing: border-box;
}

html {
  scroll-padding-top: var(--hoogte-menu); /* sprongen en focus verdwijnen niet achter het menu */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-tekst);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.66;
  color: var(--kleur-tekst);
}

body {
  margin: 0;
  background: #5b7a99; /* terugval als de foto niet laadt */
}

@media (min-width: 30em) {
  body,
  button,
  input,
  select,
  textarea {
    font-size: 1.125rem;
  }
}

@media (min-width: 48em) {
  body,
  button,
  input,
  select,
  textarea {
    font-size: 1rem;
    line-height: 1.5;
  }
}

/* Koppen: altijd hoofdletters en vet (gewicht 800 of 600, zie lettertype) */

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  line-height: 1.4;
  margin: 0 0 0.75em;
  padding: 1.5em 0 0;
  text-transform: uppercase;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  padding-top: 0;
}

/* Koppen: klein, vet (800) en donker. Hoofdletters staan bij de basisregel hierboven. */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--kleur-donker);
  font-weight: 800;
}

h1 { font-size: 1.125rem; }
h2 { font-size: 1rem; }
h3 { font-size: 0.9375rem; }
h4 { font-size: 0.875rem; }
h5 { font-size: 0.75rem; letter-spacing: 0.15em; }
h6 { font-size: 0.8125rem; }

@media (min-width: 30em) {
  h1 { font-size: 1.375rem; }
  h2 { font-size: 1.1875rem; }
  h3 { font-size: 1.0625rem; }
  h4 { font-size: 0.9375rem; }
  h6 { font-size: 0.875rem; }
}

/* Alinea's en inline tekst */

p {
  margin: 0 0 1.5em;
  padding: 0;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

strong,
b {
  font-weight: 600;
}

big {
  font-size: 125%;
}

abbr,
acronym {
  border-bottom: 1px dotted var(--kleur-gedempt);
  cursor: help;
  text-decoration: none;
}

mark,
ins {
  background: var(--kleur-code-achtergrond);
  text-decoration: none;
}

address {
  margin: 0 0 1.5em;
}

/* Citaten */

blockquote {
  color: var(--kleur-gedempt);
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.7;
  margin: 0;
}

blockquote cite {
  font-style: normal;
  font-weight: 600;
}

/* Lijsten */

ul,
ol {
  margin: 0 0 1.5em;
  padding: 0;
}

ul ul,
ul ol,
ol ul,
ol ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt {
  font-weight: 600;
}

dd {
  margin: 0 1.5em 1.5em;
}

/* Code */

pre {
  background: var(--kleur-code-achtergrond);
  font-family: var(--font-pre);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0 0 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code,
kbd,
tt,
var {
  font-family: var(--font-code);
  font-size: 0.9375rem;
}

/* Links */

a {
  color: var(--kleur-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover,
a:active {
  color: var(--kleur-link-hover);
}

/* Links in navigatie en titels zijn herkenbaar door hun plek, dus zonder streep. */
nav a,
.site-title a,
.entry-title a {
  text-decoration: none;
}

nav a:hover,
.site-title a:hover,
.entry-title a:hover {
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--kleur-focus);
  outline-offset: 2px;
}

/* Site- en paginatitels */

.site-title {
  color: var(--kleur-donker);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.25;
  margin: 0;
  overflow-wrap: anywhere; /* breekt alleen af op heel smalle schermen */
  padding: 0;
  text-transform: uppercase;
}

.site-title a {
  color: var(--kleur-donker);
}

.site-description {
  color: var(--kleur-gedempt);
  font-size: 0.8125rem;
  margin: 0;
}

@media (min-width: 48em) {
  .site-title { font-size: clamp(1.75rem, 4vw, 2.75rem); }
  .site-description { font-size: 1rem; }
}

/* Kleine titel boven een pagina of lijst */
.page-title {
  color: var(--kleur-donker);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Titel van een bericht of pagina; groter vanaf 48em (controleer tegen de oude site). */
.entry-title a {
  color: var(--kleur-tekst);
}

@media (min-width: 48em) {
  .entry-title { font-size: 1.625rem; }
}

/* Berichtinfo (datum, categorie) */
.entry-meta {
  color: var(--kleur-meta);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1818em;
  text-transform: uppercase;
}

.entry-meta a {
  color: inherit;
}

.widget-title {
  color: var(--kleur-donker);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1818em;
  text-transform: uppercase;
}

/* ==========================================================
   2. Indeling van de pagina
   ========================================================== */

/* Achtergrondfoto: vast, puur decoratief. Liggend scherm: liggende foto. */
.achtergrond {
  position: fixed;
  inset: 0;
  z-index: -1;
  height: 100vh;
  height: 100svh;
  background: #5b7a99 url("achtergrond-liggend.webp") center 0% / cover no-repeat;
}

/* Staand scherm (telefoon, tablet rechtop): staande foto */
@media (orientation: portrait) {
  .achtergrond {
    background-image: url("achtergrond-staand.webp");
    background-position: center;
  }
}

/* Marges links en rechts. Op kleine schermen een vaste marge; vanaf 48em
   begint de titel op 25% van de breedte en eindigt hij op 75%, en staan
   koppen en alinea's tussen 33% en 67%. */
:root {
  --marge-kop: var(--marge);
  --marge-tekst: var(--marge);
}

@media (min-width: 48em) {
  :root {
    --marge-kop: 25%;
    --marge-tekst: 33%;
  }
}

.site-header .kolom {
  padding-inline: var(--marge-kop);
}

.tekstblok .kolom {
  padding-inline: var(--marge-tekst);
}

/* Transparante ruimte: de kop staat onderaan het beeld, de foto
   is erboven zichtbaar. */
.voorpagina {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(100vh - var(--hoogte-menu));
  min-height: calc(100svh - var(--hoogte-menu));
}

/* Blok 1: grijze gradient, licht boven, donker onder, met doorzicht */
.site-header {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  min-height: var(--hoogte-kop);
  padding-block: 0 1.75rem;
  background: linear-gradient(
    to bottom,
    rgba(58, 58, 58, 0) 0%,
    rgba(58, 58, 58, 0.2) 25%,
    rgba(52, 52, 52, 0.5) 45%,
    rgba(46, 46, 46, 0.72) 60%,
    rgba(43, 43, 43, 0.85) 100%
  );
}

.site-header .site-title,
.site-header .site-description {
  color: #fff;
}

/* Menu: wit, over de volle breedte, dunne donkere lijn eronder, zelfde zijmarges als de titel.
   Blijft bovenaan het scherm staan (sticky) zodra het daar aankomt. */
.menu {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--hoogte-menu);
  background: #fff;
  border-bottom: 1px solid var(--kleur-donker);
}

.menu .kolom {
  width: 100%;
  padding-inline: var(--marge-kop);
}

.menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--kleur-donker);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Home-knop: zwart huisje, springt naar de bovenkant van de pagina */
.menu .menu-home {
  color: #000;
}

.menu-home svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

/* Blok 2 en verder: witte tekstblokken, even veel ruimte boven en onder de tekst */
.tekstblok {
  width: 100%;
  padding-block: clamp(3rem, 8vw, 6rem);
  background: #fff;
}

/* Tussen twee witte blokken blijft de foto zichtbaar */
.tekstblok + .tekstblok {
  margin-top: var(--ruimte-foto);
}

/* Ook onder het laatste witte blok blijft een stuk foto zichtbaar */
.onder {
  padding-bottom: var(--ruimte-foto);
}

.tekstblok .kolom :last-child {
  margin-bottom: 0;
}

/* Knop (een link die als knop is opgemaakt) */
.knop {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.5rem;
  background: var(--kleur-donker);
  border: 2px solid var(--kleur-donker);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.knop:hover,
.knop:active {
  background: #fff;
  color: var(--kleur-donker);
}

/* Tekst alleen voor schermlezers */
.verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skiplink: alleen zichtbaar bij toetsenbordfocus */
.sla-over {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: #fff;
  color: #222;
}

.sla-over:focus {
  top: 0.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}