:root {
  --achtergrondkleur: #efeae1;
  --beige: #e3d8ca;
  --lettertype: #564d40;
  --wit-lettertype: #ffffff;
  --blauw: #98bfe9;
  --roze: #e998b8;
  --font: "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Display", "Inter Tight","Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-hand: "Reenie Beanie", cursive;
  --font-retro: "LazybonesEF", "Lazybones", "Shrikhand", cursive;
  /* Design spec is 1px (5%) for Neue Haas Grotesk. The Inter Tight fallback runs wider,
     so 0 reproduces the design's line breaks. Set back to 1px if Neue Haas is self-hosted. */
  --body-tracking: 0px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--achtergrondkleur);
  color: var(--lettertype);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

img { display: block; }

/* Shared type styles from the design */
.titel {            /* Titel: 75 Bold, 40px */
  font-size: 40px;
  font-weight: 700;
  line-height: normal;
}
.body-tekst {       /* Grote body tekst: 45 Light, 20/25, 5% */
  font-size: 20px;
  font-weight: 300;
  line-height: 25px;
  letter-spacing: var(--body-tracking);
}

/* Full-bleed section backgrounds, content capped at the 1280px design width */
.section__inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* ---------- Header ---------- */
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 50px 0;
}

/* Navigatiebalk */
.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 145px;
  padding: 24px 40px;
  background: var(--beige);
  border-radius: 20px;
  overflow: clip;
}

.nav__logo {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 46.969px;
  height: 51.091px;
}
/* SVG artwork bleeds slightly outside the logo frame, as in the design */
.nav__logo img {
  position: absolute;
  top: -0.54%;
  right: -1.9%;
  bottom: -2.14%;
  left: -0.55%;
  width: auto;
  height: auto;
  max-width: none;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 60px;
  height: 56px;
  list-style: none;
}

.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 38px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: normal;
  color: var(--lettertype);
  text-decoration: none;
  white-space: nowrap;
}
.nav__link--cv { width: 40px; }

/* Hover indicator: a 32×6px pink pill under the link that slowly grows out from the centre.
   The current page (aria-current) shows it permanently. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 36px;
  width: 32px;
  height: 6px;
  border-radius: 20px;
  background: var(--roze);
  transform: translateX(-50%) scaleX(0);
  opacity: 0;
  transition: transform .5s ease, opacity .5s ease;
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

.nav__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 12px 24px;
  background: var(--blauw);
  border-radius: 12px;
  font-size: 20px;
  font-weight: 300;
  line-height: normal;
  color: var(--lettertype);
  text-decoration: none;
  white-space: nowrap;
  transition: filter .2s ease;
}
.nav__contact:hover { filter: brightness(1.05); }

.hero {
  width: 100%;
  height: auto;
  aspect-ratio: 4044 / 2432;
  object-fit: cover;
}

/* Intro card: overlaps the hero's bottom 108.6px, sits 24.5px right of centre */
.intro {
  position: relative;
  left: 24.5px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: 621px;
  margin: -108.63px 0 44.63px;
  padding: 40px 80px;
  background: var(--lettertype);
  border-radius: 20px;
  text-align: center;
  overflow: clip;
}
.intro__tekst {
  width: 461px;
  max-width: 100%;
  color: var(--wit-lettertype);
}
.intro__scroll {
  font-family: var(--font-retro);
  font-size: 32px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1.6px;
  color: var(--blauw);
  text-decoration: none;
  white-space: nowrap;
}

/* ---------- Hard skills ---------- */
.skills { background: var(--beige); }
.skills .section__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 80px 100px;
}
.skills__list {
  display: flex;
  align-items: flex-end;
  gap: 40px;
  list-style: none;
}
.skill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.skill__icon {
  position: relative;
  overflow: hidden;
}
.skill__icon img {
  position: absolute;
  max-width: none;
}
.skill__icon--cover img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.skill__icon--figma img { left: -8.15%; top: -7.03%; width: 116.3%; height: 115.68%; }
.skill__icon--capcut img { left: -31.78%; top: -31.78%; width: 163.56%; height: 163.56%; }
.skill__label {
  width: 100%;
  font-family: var(--font-hand);
  font-size: 40px;
  line-height: normal;
  text-align: center;
}

/* ---------- Over mij ---------- */
.over-mij .section__inner {
  display: flex;
  align-items: center;
}
.over-mij__foto {
  flex-shrink: 0;
  width: 549px;
  height: 679px;
  margin-right: -5px;
  object-fit: cover;
}
.over-mij__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 602px;
  padding: 40px 0;
}
.over-mij__body {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.over-mij__lijsten {
  display: flex;
  gap: 40px;
}
.over-mij__lijst {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: disc;
  font-size: 20px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: 1px;
}
.over-mij__lijst li { margin-inline-start: 30px; }

/* ---------- Projecten ---------- */
.projecten .section__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 80px 100px;
}
.projecten__grid {
  display: grid;
  grid-template-columns: repeat(3, 320px);
  gap: 60px;
  list-style: none;
}
.project {
  position: relative;
  display: block;
  width: 320px;
  height: 320px;
  background: #fff;
  border-radius: 20px;
  overflow: clip;
  color: var(--wit-lettertype);
  text-decoration: none;
}
/* Hover/focus: the card darkens and a short project summary fades in */
.project__samenvatting {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 0 40px;
  background: rgba(20, 20, 20, .75);
  /* 15.5px / -.1px makes the Inter Tight fallback wrap closest to the reference screenshots */
  font-size: 15.5px;
  font-weight: 300;
  line-height: 18px;
  letter-spacing: -.1px;
  opacity: 0;
  transition: opacity .25s ease;
}
a.project:hover .project__samenvatting,
a.project:focus-visible .project__samenvatting { opacity: 1; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.project > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project--kookboek { background: #f5ecc2; }
/* ASML mockup: 321×401 crop box centred with a -16.5px vertical offset */
.project__crop {
  position: absolute;
  left: calc(50% + 0.5px);
  top: calc(50% - 16.5px);
  width: 321px;
  height: 401px;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.project__crop img {
  position: absolute;
  left: -0.14%;
  top: 14%;
  width: 100.14%;
  height: 80.16%;
  max-width: none;
}
.project--soon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--roze);
  color: var(--lettertype);
  font-family: var(--font-hand);
  font-size: 48px;
  line-height: normal;
  white-space: nowrap;
}

/* ---------- Contact ---------- */
.contact .section__inner { padding: 80px 140px; }
.contact__frame {
  display: flex;
  align-items: center;
  gap: 128px;
  padding: 40px;
  background: var(--lettertype);
  border-radius: 20px;
  overflow: clip;
}
.contact__cirkel {
  display: grid;
  flex-shrink: 0;
}
.contact__cirkel > * { grid-area: 1 / 1; }
.contact__cirkel-bg { margin: 56px 0 0 39px; }
.contact__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 467px;
}
.contact__titel { color: var(--blauw); }
.contact__lijst {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
}
.contact__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: 1.2px;
  color: var(--wit-lettertype);
  text-decoration: none;
  white-space: nowrap;
}
.contact__link img { flex-shrink: 0; }
.contact__link:hover span { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Project pages ---------- */
.project-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 60px 20px;
}
/* On project pages the nav sits directly on the page background */
.nav--plain { background: var(--achtergrondkleur); }

.project-header__beeld {
  width: 1075.668px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1075.668 / 625;
  border-radius: 18.546px;
  object-fit: cover;
}
/* Tall image cropped by the frame; each page sets its Figma crop via --crop-* */
.project-header__beeld--crop {
  position: relative;
  overflow: hidden;
}
.project-header__beeld--crop img {
  position: absolute;
  top: var(--crop-top, 0);
  left: var(--crop-left, 0);
  width: 100%;
  height: var(--crop-h, 100%);
  max-width: none;
}

/* Paragraphs separated by one blank 25px line, as in the design */
.alineas p + p { margin-top: 25px; }

/* Rollen */
.rollen .section__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 20px 100px;
  list-style: none;
}
.rol {
  padding: 10px 20px;
  border: 4px solid var(--lettertype);
  border-radius: 60px;
  font-size: 20px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* Introductie */
.project-intro .section__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 100px 40px;
}
.project-intro__datum {
  font-size: 20px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: 1px;
}

/* Tekstkaart (De context / Wat heb ik geleerd) */
.tekstkaart-sectie .section__inner {
  display: flex;
  justify-content: center;
  padding: 40px 100px;
}
.tekstkaart {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  min-width: 0;
  max-width: 100%;
  padding: 40px 80px;
  border-radius: 20px;
  text-align: center;
  overflow: clip;
  background: var(--lettertype);
  color: var(--wit-lettertype);
}
.tekstkaart--roze {
  background: rgba(233, 152, 184, .6);
  color: var(--lettertype);
}
.tekstkaart .titel { width: 714px; max-width: 100%; }
.tekstkaart__tekst { width: 908px; max-width: 100%; }

/* Hand-drawn stars, positioned from the card's right edge (design: left 924px / 984px in a 1068px card) */
.ster {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ster--groot { top: 32px; right: 91.85px; width: 52.15px; height: 55.332px; }
.ster--klein { top: 77px; right: 52.614px; width: 31.386px; height: 33.532px; }
.ster__vorm { position: relative; flex: none; }
.ster--groot .ster__vorm { width: 44.157px; height: 48.124px; transform: rotate(169.56deg) scaleY(-1); }
.ster--klein .ster__vorm { width: 27.711px; height: 30.201px; transform: rotate(-172.57deg) scaleY(-1); }
.ster__vorm img { position: absolute; top: -1.61%; left: -1.75%; max-width: none; }

/* Van onderzoek naar ontwerp */
.onderzoek .section__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 100px;
}
.onderzoek__top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.onderzoek__rij {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}
.onderzoek__rij .alineas { flex: 1 0 0; min-width: 1px; }
/* Size and crop default to the ASML/Laurentius note; pages override via --notitie-* / --crop-* */
.onderzoek__notitie {
  position: relative;
  flex-shrink: 0;
  width: var(--notitie-w, 414px);
  height: var(--notitie-h, 278px);
  overflow: hidden;
}
.onderzoek__notitie img {
  position: absolute;
  top: var(--crop-top, -7.23%);
  left: var(--crop-left, 0);
  width: var(--crop-w, 100%);
  height: var(--crop-h, 115.19%);
  max-width: none;
  object-fit: var(--fit, fill);
}
/* Phubbom "Van onderzoek naar concept": fixed 418px content height; the photo overflows it slightly, as in Figma */
.onderzoek--concept { position: relative; z-index: 1; }
.onderzoek--concept .section__inner { padding: 40px 100px 20px; }
.onderzoek--concept .onderzoek__top { height: 418px; }
.onderzoek--testen .section__inner { padding: 20px 100px 40px; }
.onderzoek__proces {
  width: 1027px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1027 / 400;
  object-fit: cover;
}

/* De eindresultaten */
.eindresultaten { background: var(--beige); }
.eindresultaten .section__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 100px;
}
.eindresultaten__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
/* 1085px image in a 1080px column: overflows 2.5px each side, as in the design */
.eindresultaten__beeld {
  width: 1085px;
  max-width: calc(100% + 5px);
  height: auto;
  aspect-ratio: 1085 / 359;
  object-fit: cover;
}

/* Cropped result image. Defaults are Laurentius (758×342 frame, image inset 5.21% from the top);
   other pages override via --beeld-w / --beeld-ratio / --crop-* */
.eindresultaten__crop {
  position: relative;
  width: var(--beeld-w, 758px);
  /* --beeld-max lets a frame wider than the column overflow it, as in Figma (Gemeente Amsterdam) */
  max-width: var(--beeld-max, 100%);
  flex-shrink: 0;
  aspect-ratio: var(--beeld-ratio, 758 / 341.939);
  overflow: hidden;
}
.eindresultaten__crop img {
  position: absolute;
  top: var(--crop-top, 5.21%);
  left: var(--crop-left, -0.05%);
  width: var(--crop-w, 100.09%);
  height: var(--crop-h, 89.58%);
  max-width: none;
}

/* Kookboek: text above a book mockup + 2×2 grid of recipe pages */
.project-intro__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.kookboek-galerij {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.kookboek-galerij__boek {
  position: relative;
  flex-shrink: 0;
  width: 487px;
  height: 522px;
  overflow: hidden;
}
.kookboek-galerij__boek img {
  position: absolute;
  top: -0.35%;
  left: -21.31%;
  width: 138.92%;
  height: 100.38%;
  max-width: none;
}
.kookboek-galerij__paginas {
  display: grid;
  grid-template-columns: repeat(2, 250px);
  gap: 40px;
  list-style: none;
}
.kookboek-galerij__paginas img {
  width: 250px;
  height: 250px;
  border-radius: 5px;
  object-fit: cover;
}

/* ---------- CV ---------- */
/* The CV is a fixed 976×1401 sheet in Figma: on desktop every element sits at its Figma position
   (--x / --y, relative to the sheet). Below 1100px it switches to a stacked flow layout. */
/* The nav's <header> takes no box, so the nav lays out exactly as on the project pages */
.cv-header { display: contents; }
.cv {
  position: relative;
  width: 976px;
  height: 1401px;
  background: #ede7db;
  overflow: clip;
  color: var(--lettertype);
  /* Light text tracking follows --body-tracking so the fallback font wraps like the design */
  --cv-ls-light: var(--body-tracking);
  /* Shrikhand (fallback for LazybonesEF) is ~1.37× wider; .73 restores the design's text widths
     (title ≈704px). Set to 1 if LazybonesEF is self-hosted. */
  --cv-retro-schaal: .73;
}
.cv-abs {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w, auto);
  line-height: normal;
}
.cv-midden { transform: translateX(-50%); }
.cv-nowrap { white-space: nowrap; }

.cv__titel {
  font-family: var(--font-retro);
  font-size: calc(104.982px * var(--cv-retro-schaal));
  font-weight: 400;
  color: var(--blauw);
  opacity: .95;
  white-space: nowrap;
  /* At the scaled fallback size the glyphs sit ~16px higher than LazybonesEF's; remove with the scale */
  margin-top: calc(16px * (1 - var(--cv-retro-schaal)) / .27);
}
.cv__foto {
  z-index: 1;
  width: 278.733px;
  height: 311.803px;
  object-fit: cover;
}
.cv__hallo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 135.495px;
  height: 137.436px;
}
.cv__hallo span {
  flex: none;
  transform: rotate(-45.56deg);
  font-family: var(--font-hand);
  font-size: 26.245px;
  opacity: .95;
  white-space: nowrap;
}
.cv__studie {
  z-index: 2;
  font-family: var(--font-retro);
  font-size: calc(39.368px * var(--cv-retro-schaal));
  color: var(--roze);
  opacity: .95;
  white-space: nowrap;
}
.cv__kop {
  font-size: 22.965px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}
.cv__over-tekst {
  font-size: 19.684px;
  font-weight: 300;
  letter-spacing: var(--cv-ls-light);
  text-align: center;
}

/* Werkervaring / Opleidingen */
.cv__datum,
.cv__adres,
.cv__omschrijving {
  font-size: 13.123px;
  font-weight: 300;
}
.cv__functie {
  font-size: 16.403px;
  font-weight: 400;
  white-space: nowrap;
}
.cv-ls { letter-spacing: var(--cv-ls-light); }
.cv-ls-roman { letter-spacing: .8202px; }

/* Left card */
.cv__kaart {
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 32.807px;
  padding: 19.684px;
  background: var(--beige);
  border-radius: 32.807px;
}
.cv__blok {
  display: flex;
  flex-direction: column;
  gap: 13.123px;
}
.cv__blok--tags { gap: 16.403px; }
.cv__gegeven {
  display: flex;
  align-items: center;
  gap: 13.123px;
  font-size: 16.403px;
  font-weight: 300;
  line-height: normal;
  color: inherit;
  text-decoration: none;
}
.cv__gegeven--top { align-items: flex-start; }
a.cv__gegeven:hover span { text-decoration: underline; text-underline-offset: 3px; }
.cv__gegeven img { flex-shrink: 0; }
.cv__taal {
  font-size: 16.403px;
  font-weight: 300;
  letter-spacing: var(--cv-ls-light);
}
.cv__tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16.403px;
}
.cv__tag-rij {
  display: flex;
  gap: 16.403px;
  list-style: none;
}
.cv__tag {
  padding: 3.281px 13.123px;
  border: 1.64px solid var(--lettertype);
  border-radius: 32.807px;
  font-size: 16.403px;
  font-weight: 300;
  letter-spacing: var(--cv-ls-light);
  white-space: nowrap;
}
.cv__certificaat { width: 257.533px; }
.cv__certificaat-items {
  display: flex;
  flex-direction: column;
  gap: 6.561px;
  height: 59.052px;
}
.cv__certificaat-naam { font-size: 16.403px; font-weight: 400; letter-spacing: .8202px; }

/* Doodles and stars: box (--bw × --bh) centres a rotated shape (--vw × --vh);
   the SVG keeps its native size, offset by Figma's inset (--it / --il) */
.cv__vorm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--bw);
  height: var(--bh);
}
.cv__vorm > span {
  position: relative;
  flex: none;
  width: var(--vw);
  height: var(--vh);
  transform: var(--t);
}
.cv__vorm img {
  position: absolute;
  top: var(--it);
  left: var(--il);
  max-width: none;
}

/* Design question in "De context": opening quote Bold, the rest Bold Italic */
.ontwerpvraag { font-weight: 700; }
.ontwerpvraag em { font-style: italic; }

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
  .skills .section__inner,
  .projecten .section__inner { padding: 80px 50px; }
  .skills__list { flex-wrap: wrap; }
  .projecten__grid { grid-template-columns: repeat(auto-fill, 320px); justify-content: center; }
  .contact .section__inner { padding: 80px 50px; }
  .contact__frame { gap: 64px; justify-content: center; }
  .over-mij__content { padding: 40px 40px 40px 0; flex: 1; }
  .rollen .section__inner { padding: 20px 50px; }
  .onderzoek--concept .section__inner { padding: 40px 50px 20px; }
  .onderzoek--testen .section__inner { padding: 20px 50px 40px; }
  .project-intro .section__inner { padding: 20px 50px 40px; }
  .tekstkaart-sectie .section__inner,
  .onderzoek .section__inner,
  .eindresultaten .section__inner { padding: 40px 50px; }
}
@media (max-width: 1000px) {
  .header { padding: 24px 16px 0; }
  .project-header { padding: 24px 16px 20px; gap: 16px; }
  .nav { gap: 32px; padding: 16px 24px; width: 100%; justify-content: space-between; }
  .nav__links { gap: 24px; }
  .intro { left: 0; margin-top: -48px; }
  .over-mij .section__inner { flex-direction: column; }
  .over-mij__foto { width: 100%; height: auto; aspect-ratio: 549 / 679; max-width: 549px; margin: 0; }
  .over-mij__content { width: auto; padding: 60px 50px; }
  .contact__frame { flex-direction: column; text-align: left; }
  .onderzoek__rij { flex-direction: column; gap: 32px; }
  .onderzoek__notitie { align-self: center; }
  .onderzoek--concept .onderzoek__top { height: auto; }
  .tekstkaart { padding: 40px; }
  .kookboek-galerij { flex-direction: column; align-items: center; gap: 40px; }
}
@media (max-width: 640px) {
  .nav { flex-wrap: wrap; gap: 12px; }
  .nav__links { order: 3; width: 100%; height: auto; justify-content: space-around; gap: 0; }
  .nav__link, .nav__contact { font-size: 17px; }
  .nav__link { width: auto; }
  .intro { width: 100%; margin: -24px 0 40px; padding: 32px 24px; }
  .intro__scroll { font-size: 26px; white-space: normal; }
  .titel { font-size: 32px; }
  .skills .section__inner,
  .projecten .section__inner { padding: 56px 16px; }
  .skills__list { gap: 24px 16px; justify-content: center; }
  .skill { width: calc(50% - 8px) !important; }
  .skill__icon { width: 100% !important; height: auto !important; aspect-ratio: 1; }
  .over-mij__content { padding: 48px 16px; }
  .over-mij__lijsten { flex-direction: column; gap: 20px; }
  .projecten__grid { grid-template-columns: 1fr; gap: 24px; }
  .project { width: 100%; height: auto; aspect-ratio: 1; }
  .contact .section__inner { padding: 56px 16px; }
  .contact__frame { padding: 32px 20px; gap: 32px; }
  .contact__cirkel { width: 100%; max-width: 309px; }
  .contact__cirkel img { width: 100%; height: auto; }
  .contact__cirkel-bg { width: 77.7% !important; margin: 18.2% 0 0 12.6%; }
  .contact__content { width: 100%; }
  .contact__link { font-size: 17px; white-space: normal; word-break: break-word; }
  .rollen .section__inner { padding: 20px 16px; gap: 12px; }
  .rol { font-size: 17px; }
  .project-intro .section__inner { padding: 20px 16px 32px; }
  .tekstkaart-sectie .section__inner,
  .onderzoek .section__inner,
  .eindresultaten .section__inner { padding: 32px 16px; }
  .tekstkaart { padding: 56px 20px 32px; }
  .ster--groot { top: 12px; right: 52px; transform: scale(.7); }
  .ster--klein { top: 30px; right: 20px; transform: scale(.7); }
  .onderzoek--concept .section__inner { padding: 32px 16px; }
  .onderzoek--testen .section__inner { padding: 16px 16px 32px; }
  .onderzoek__notitie { width: 100%; max-width: var(--notitie-w, 414px); height: auto; aspect-ratio: var(--notitie-ratio, 414 / 278); }
  .eindresultaten__beeld,
  .eindresultaten__crop { max-width: 100%; }
  .kookboek-galerij { align-items: stretch; }
  .kookboek-galerij__boek { width: 100%; height: auto; aspect-ratio: 487 / 522; }
  .kookboek-galerij__paginas { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .kookboek-galerij__paginas img { width: 100%; height: auto; aspect-ratio: 1; }
}

/* CV: the 976px sheet no longer fits, so stack its contents in reading order */
@media (max-width: 1100px) {
  .cv {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    max-width: 976px;
    height: auto;
    padding: 40px 32px;
  }
  .cv-abs { position: static; width: auto; max-width: 100%; transform: none; }
  .cv__titel { font-size: clamp(40px, 9vw, 80px); white-space: normal; }
  .cv__hallo,
  .cv__vorm { display: none; }
  .cv__studie { font-size: 32px; }
  .cv__over-tekst { text-align: left; }
  .cv__kop { margin-top: 16px; }
  .cv-item { display: flex; flex-direction: column; gap: 4px; }
  .cv__functie { white-space: normal; }
  .cv__kaart { width: 100%; }
  .cv__certificaat { width: auto; }
  .cv__certificaat-items { height: auto; }
}
@media (max-width: 640px) {
  .cv { padding: 32px 16px; }
  .cv__tag-rij { flex-wrap: wrap; gap: 10px; }
  .cv__gegeven { font-size: 15px; word-break: break-word; }
}