@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500&display=swap');

:root {
  --ink:         #0E0E0F;
  --muted:       #71777C;          /* staalgrijs */
  --bg:          #FFFFFF;
  --surface:     #F2F3F4;          /* glas/steel */
  --rule:        rgba(14, 14, 15, .14);
  --rule-strong: rgba(14, 14, 15, .30);

  --sans: "Helvetica Neue", Helvetica, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --maxw:    760px;                /* iets breder dan 720 — niet meer, i.v.m. leesbaarheid */
  --photo-w: 140px;
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 28px 120px;        /* top: naam loskoppelen van de bovenbalk */
  border-top: 2px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;               /* iets strakker dan 1.78 — scheelt veel hoogte in de bio */
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* — Foto: groot, staand, links zwevend, randloos —
   margin-top stemt de bovenkant van de foto af op de bovenkant van de naam. */
img {
  float: left;
  width: var(--photo-w);
  height: auto;
  margin: 8px 36px 22px 0;
  /* filter: grayscale(1); */
}

/* — Naam — */
h1 {
  font-weight: 500;
  font-size: 36px;
  letter-spacing: -.02em;
  line-height: 1.08;
  margin: 0 0 14px;
}

/* — Functieregels naast de naam (staalgrijs i.p.v. zwart) — */
h1 + p { margin-top: 0; }
h1 + p,
h1 + p + p {
  color: var(--muted);
  font-size: 15px;
  letter-spacing: .01em;
  margin: 3px 0;
}

/* Sidebar-tekst (functieregels, contact-labels) staalgrijs; naam blijft zwart. */
#sidebar { color: var(--muted); }
#sidebar h1 { color: var(--ink); }

/* — Contact onder de foto i.p.v. ernaast — */
#Contact { clear: left; }
#content { clear: left; }

/* — Sectiekoppen: groter, zwart, ruim, met haarlijn — */
h2 {
  font-weight: 500;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: .7rem;
  margin: 3rem 0 1.4rem;
}
h2:first-of-type { margin-top: 1.8rem; }

/* — Subkoppen — */
h3 {
  font-weight: 500;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--muted);
  margin: 2rem 0 .5rem;
}

p { margin: .55rem 0; }

/* — Links: monochroom, fijne onderlijn, donkerder bij hover — */
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: text-decoration-color .15s;
}
a:hover { text-decoration-color: var(--ink); }

/* — Lijsten — */
ul { margin: .7rem 0; padding-left: 1.1rem; }
li { margin: .4rem 0; }
li::marker { color: var(--muted); }

/* — Definitielijsten (publicaties, talks, teaching) — */
dl { margin: .6rem 0; }
dt { margin: .8rem 0 .1rem; }
dd { margin: 0 0 .2rem; color: var(--muted); font-size: 15px; }

/* — Code, mocht het voorkomen — */
code, pre { font-family: var(--mono); background: var(--surface); border-radius: 3px; }
code { padding: .1em .35em; font-size: .9em; }
pre  { padding: 14px 16px; overflow-x: auto; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

::selection { background: var(--ink); color: var(--bg); }

/* ============================================================
   Optioneel: donkere modus (zwart/staal in het donker).
   Verwijder dit blok als je puur licht wilt.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --ink:         #ECEDEE;
    --muted:       #8A9095;
    --bg:          #0B0B0C;
    --surface:     #161719;
    --rule:        rgba(255, 255, 255, .13);
    --rule-strong: rgba(255, 255, 255, .32);
  }
}

/* — Smalle schermen: foto niet meer zwevend — */
@media (max-width: 600px) {
  body { padding: 40px 18px 72px; }
  h1 { font-size: 30px; }
  h2 { font-size: 14px; letter-spacing: .16em; margin-top: 3rem; }
  img { float: none; width: 64%; max-width: 230px; margin: 0 0 18px; }
}

/* — Displayfont op naam + koppen — */
h1, h2, h3 { font-family: "Jost", var(--sans); }
h1 { letter-spacing: -.01em; }