@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-300-normal.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-ext-300-normal.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-ext-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-ext-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-ext-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-800-normal.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-ext-800-normal.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- PP Neue Machina ---------- */
@font-face {
  font-family: "PP Neue Machina";
  src: url("../fonts/PPNeueMachina-PlainLight.woff2") format("woff2"),
       url("../fonts/PPNeueMachina-PlainLight.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Neue Machina";
  src: url("../fonts/PPNeueMachina-PlainLightItalic.woff2") format("woff2"),
       url("../fonts/PPNeueMachina-PlainLightItalic.otf") format("opentype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "PP Neue Machina";
  src: url("../fonts/PPNeueMachina-PlainRegular.woff2") format("woff2"),
       url("../fonts/PPNeueMachina-PlainRegular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Neue Machina";
  src: url("../fonts/PPNeueMachina-PlainRegularItalic.woff2") format("woff2"),
       url("../fonts/PPNeueMachina-PlainRegularItalic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "PP Neue Machina";
  src: url("../fonts/PPNeueMachina-PlainUltrabold.woff2") format("woff2"),
       url("../fonts/PPNeueMachina-PlainUltrabold.otf") format("opentype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Neue Machina";
  src: url("../fonts/PPNeueMachina-PlainUltraboldItalic.woff2") format("woff2"),
       url("../fonts/PPNeueMachina-PlainUltraboldItalic.otf") format("opentype");
  font-weight: 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "PP Neue Machina Inktrap";
  src: url("../fonts/PPNeueMachina-InktrapLight.woff2") format("woff2"),
       url("../fonts/PPNeueMachina-InktrapLight.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Neue Machina Inktrap";
  src: url("../fonts/PPNeueMachina-InktrapRegular.woff2") format("woff2"),
       url("../fonts/PPNeueMachina-InktrapRegular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Neue Machina Inktrap";
  src: url("../fonts/PPNeueMachina-InktrapUltrabold.woff2") format("woff2"),
       url("../fonts/PPNeueMachina-InktrapUltrabold.otf") format("opentype");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ---------- Aston Script (sierletters, bv. de O van works) ---------- */
@font-face {
  font-family: "Aston Script";
  src: url("../fonts/Aston Script.woff2") format("woff2"),
       url("../fonts/Aston Script.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- 1) Palet ---------- */
:root {
  --c-off-white: #FDFDFD;
  --c-white:     #F8F8F8;
  --c-blue-100:  #E6EFFF;
  --c-blue-300:  #B3CEF9;
  --c-blue-700:  #345EB9;
  --c-gold:      #DBBC79;
  --c-black:     #0D0D0D;
  --c-grey-900:  #242933;
  --c-grey-500:  #5A6472;

  --font-name:   "Poppins", system-ui, sans-serif;
  --font-script: "Aston Script", cursive;
  --font-body: "PP Neue Machina", system-ui, sans-serif;

  --gutter: 16px;
}

/* ---------- 2a) Light thema (standaard) ---------- */
:root {
  --bg:           var(--c-off-white);   /* achtergrond */
  --text:         var(--c-blue-700);    /* gewone tekst */
  --dot:          var(--c-blue-300);    /* puntjes raster */
  --accent:       var(--c-grey-900);        /* naam, hover, puntjes dichtbij */

  --tag-bg:       var(--c-blue-100);    /* "Portfolio 2026" */
  --tag-text:     var(--c-blue-700);

  --name-empty:   var(--c-blue-100);    /* naam vóór hij gevuld is */
  --name-bg:      rgba(253, 253, 253, .82);
  --name-border:  rgba(228, 228, 228, .5);

  --label:        var(--c-blue-300);    /* Dark/Light niet actief */
  --label-active: var(--c-blue-700);    /* Dark/Light actief */

  --icon-filter:   none;                /* SVG's normaal (blauw) */
  --accent-filter: url(#to-gold);       /* SVG's bij hover (goud) */

  /* ---- works-pagina ---- */
  --heading:     var(--c-grey-900);     /* titels: works, projectnaam */
  --script:      var(--c-blue-300);     /* de sierletter O */

  --card-bg:     rgba(253, 253, 253, .9);
  --card-border: rgba(228, 228, 228, .6);

  --pill-bg:     transparent;           /* HTML, CSS, PHP … */
  --pill-border: rgba(36, 41, 51, .18);

  --btn-solid-bg:      var(--c-grey-900);   /* VISIT */
  --btn-solid-text:    var(--c-white);
  --btn-solid-icon:    none;
  --btn-soft-bg:       var(--c-blue-100);   /* FULL PROCESS OVERVIEW */
  --btn-soft-bg-hover: var(--c-blue-300);
  --btn-soft-text:     var(--c-grey-900);
  --btn-soft-icon:     none;
  --btn-line-bg:       var(--c-off-white);  /* VISIT, omgekeerd (2de knop) */
  --btn-line-text:     var(--c-grey-900);
  --btn-line-border:   var(--c-grey-900);
  --btn-line-icon:     invert(1);
  --slide-bg:          var(--c-blue-100);   /* band achter de projectbeelden */
  --year-bg:           var(--c-off-white);  /* jaartal op het beeld */
  --year-text:         var(--c-grey-900);
}

/* ---------- 2b) Dark thema ---------- */
:root[data-theme="dark"] {
  --bg:           var(--c-black);
  --text:         var(--c-white);
  --dot:          var(--c-grey-500);
  --accent:       var(--c-blue-300);

  --tag-bg:       var(--c-grey-900);
  --tag-text:     var(--c-white);

  --name-empty:   var(--c-grey-900);
  --name-bg:      rgba(13, 13, 13, .82);
  --name-border:  rgba(248, 248, 248, .08);

  --label:        var(--c-grey-500);
  --label-active: var(--c-white);

  --icon-filter:   url(#to-dark);        /* SVG's wit op zwart */
  --accent-filter: url(#to-accent-dark); /* SVG's lichtblauw op zwart */

  /* ---- works-pagina ---- */
  --heading:     var(--c-white);
  --script:      var(--c-white);
  --works-title: var(--c-blue-300);

  --card-bg:     rgba(13, 13, 13, .88);
  --card-border: rgba(248, 248, 248, .08);

  --pill-bg:     transparent;
  --pill-border: rgba(248, 248, 248, .2);

  --btn-solid-bg:      var(--c-white);
  --btn-solid-text:    var(--c-black);
  --btn-solid-icon:    invert(1);
  --btn-soft-bg:       var(--c-grey-900);
  --btn-soft-bg-hover: #333B4A;
  --btn-soft-text:     var(--c-white);
  --btn-soft-icon:     invert(1);
  --btn-line-bg:       var(--c-black);
  --btn-line-text:     var(--c-white);
  --btn-line-border:   var(--c-white);
  --btn-line-icon:     none;
  --slide-bg:          var(--c-grey-900);
  --year-bg:           var(--c-black);      /* anders dan de band achter het beeld */
  --year-text:         var(--c-off-white);
  --slide-eye-filter: brightness(0) invert(1) brightness(.972549);
}

/* ---------- Reset / basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

/* Altijd ruimte voor de scrollbalk reserveren. Anders is de index (die niet
   scrollt) breder dan works en experiences (die wel scrollen) en klopt het
   aantal vakjes van het puntjesraster niet meer met elkaar. */
html { overflow-y: scroll; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .3s ease, color .3s ease;
}

h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; }

/* verborgen SVG met kleurfilters */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Klein label, bv. "Portfolio 2026" */
.tag {
  display: inline-block;
  padding: .28em .45em .1em;
  border-radius: 3px;
  background: var(--tag-bg);
  color: var(--tag-text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(.75rem, 2.1vw, 1.2rem);
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .3s ease, color .3s ease;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; }
}

.work-title,
.hero__name,
.hero__title .tag,
.cv__title,
.cv__download,
.cell-label,
.letter {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}