/* =============================================================================
   Castiglione Studio — stylesheet
   Maten zijn afgeleid van het Figma-frame (1440 px breed, 80 px marge) en schalen
   vloeiend mee met clamp(). Alle kleuren komen uit de brand guidelines.
   ========================================================================== */

/* --- Lettertype (Figtree, SIL Open Font License, zie /assets/fonts/OFL.txt) --- */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
  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: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin-ext.woff2") format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Design tokens -------------------------------------------------------- */
:root {
  /* Merkkleuren (brand guidelines, p. 11) */
  --brand-green: #4d5446;
  --brand-sand: #bf9a7c;
  --brand-sage: #798d65;
  --brand-mist: #e8e9e8;
  --brand-paper: #f5f5f4;
  --brand-white: #ffffff;

  /* Rollen */
  --color-bg: var(--brand-paper);
  --color-surface: var(--brand-mist);
  --color-text: var(--brand-green);
  --color-accent: var(--brand-sand);
  --color-inverse-bg: var(--brand-green);
  --color-inverse-text: var(--brand-white);

  /* Schaal-eenheid: 1 % van de breedte, maar nooit meer dan 1.4 % van de hoogte.
     Zo past elke sectie (hero, projectrij, over mij, contact) op een scherm, ook in een
     breed maar laag venster. Op mobiel (staand) is dit gewoon 1vw.
     Ondergrens 7px, zodat de layout in een heel laag venster niet te smal wordt. */
  --u: max(min(1vw, 1.4vh), min(1vw, 7px));

  /* Typografie */
  --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --weight-regular: 400;
  --weight-semibold: 600;

  --text-display: clamp(3rem, 8.333 * var(--u), 10rem);       /* 120px @1440 */
  --text-display-2: clamp(2.5rem, 6.667 * var(--u), 8rem);    /*  96px @1440 */
  --text-mail: clamp(1.625rem, 6.667 * var(--u), 8rem);       /*  96px @1440, past op mobiel */
  --text-h1: clamp(2.25rem, 4.444 * var(--u), 5.5rem);        /*  64px @1440 */
  --text-h2: clamp(1.625rem, 3.333 * var(--u), 4rem);         /*  48px @1440 */
  --text-h3: clamp(1.375rem, 2.222 * var(--u), 2.75rem);      /*  32px @1440 */
  --text-lead: clamp(1.1875rem, 1.944 * var(--u), 2.375rem);  /*  28px @1440 */
  --text-md: clamp(1.125rem, 1.667 * var(--u), 2rem);         /*  24px @1440 */
  --text-sm: clamp(1rem, 1.389 * var(--u), 1.5rem);           /*  20px @1440 */
  --text-body: clamp(1rem, 0.94rem + 0.25vw, 1.25rem);
  --text-label: clamp(0.8125rem, 1.111 * var(--u), 1.25rem);  /*  16px @1440 */

  --leading-tight: 1.12;
  --leading-snug: 1.25;
  --leading-body: 1.55;

  /* Ruimte */
  --gutter: clamp(1.25rem, 4.444vw, 5.5rem);                  /*  64px @1440, volgt enkel de breedte */
  --space-xs: clamp(0.5rem, 0.7 * var(--u), 0.75rem);
  --space-s: clamp(0.75rem, 1.4 * var(--u), 1.25rem);
  --space-m: clamp(1.25rem, 2.2 * var(--u), 2rem);
  --space-l: clamp(1.75rem, 3.333 * var(--u), 4rem);          /*  48px @1440 */
  --space-xl: clamp(2.5rem, 4.444 * var(--u), 5.5rem);        /*  64px @1440 */
  --space-section: clamp(4rem, 6.944 * var(--u), 8.5rem);     /* 100px @1440 */
  --nav-offset: clamp(1rem, 1.389 * var(--u), 1.5rem);        /*  20px @1440 */

  /* Vorm & beweging */
  --radius: clamp(0.75rem, 1.3 * var(--u), 1.25rem);
  --container-max: 160rem; /* 2560px, inclusief marges */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration: 0.8s;
  --duration-fast: 0.3s;
}

[data-theme="dark"] {
  --color-text: var(--color-inverse-text);
  color: var(--color-text);
}

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
}

body {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  /* Footer altijd onderaan, ook op korte pagina's */
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

img, svg, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul[role="list"], ol[role="list"], .plain-list { list-style: none; padding: 0; }
h1, h2, h3 { font-weight: var(--weight-semibold); line-height: var(--leading-tight); }

::selection { background: var(--brand-sand); color: var(--brand-green); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}
main:focus { outline: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Alleen zichtbaar voor wie met Tab navigeert. Volledig weggeknipt in plaats van boven het scherm
   geschoven: anders verschijnt hij in Safari bij het naar beneden trekken van de pagina. */
.skip-link {
  position: fixed;
  top: var(--space-s);
  left: var(--gutter);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 44px;
  padding: 0.5em 1.25em;
  background: var(--brand-green);
  color: var(--brand-white);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--brand-paper);
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}
.skip-link::after { content: "↓"; content: "↓" / ""; } /* pijl niet laten voorlezen */
.skip-link:focus {
  clip-path: none;
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid var(--brand-sand);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  .skip-link:focus { animation: skip-in 0.3s var(--ease-out); }
  @keyframes skip-in { from { opacity: 0; transform: translateY(-0.5rem); } }
}

/* --- Layout --------------------------------------------------------------- */
.container {
  width: 100%;
  /* De inhoud vult altijd de breedte van het scherm; tekst en verticale ruimte schalen
     apart mee met --u, zodat secties toch in één scherm passen. */
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Kolomraster uit Figma: kolommen starten op 0 / 21.75 / 43.5 / 65.25 / 87 % van de inhoud */
.cols {
  display: grid;
  grid-template-columns: repeat(4, 21.75fr) 13fr;
}

.cols > .label { padding-right: 1em; }

.section { padding-top: var(--space-section); }
.section--tight { padding-top: var(--space-xl); }

/* --- Typografie ----------------------------------------------------------- */
.display {
  font-size: var(--text-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}
.display > span { display: inline-block; }

.display-2 {
  font-size: var(--text-display-2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.lead {
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}

.label {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.label-text {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
.label-text > * + * { margin-top: 1.25em; }

/* Lopende tekst start op de tweede rasterkolom, met een leesbare regellengte */
.prose { container-type: inline-size; }
.prose > * { max-width: 46rem; margin-left: 21.75cqi; }
/* Links in lopende tekst zijn altijd onderlijnd, niet enkel bij hover */
.prose a.link { background-size: 100% 2px; }
.prose a.link:hover,
.prose a.link:focus-visible { background-image: linear-gradient(currentColor, currentColor); }
.prose h2 { font-size: var(--text-md); margin-top: var(--space-l); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: var(--space-s); }
.prose h3 { font-size: var(--text-body); margin-top: var(--space-m); }
.prose ul { margin-top: var(--space-s); padding-left: 1.25em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--brand-sand); }
.prose strong { font-weight: var(--weight-semibold); }

/* --- Links & knoppen ------------------------------------------------------ */
/* Onderlijn in de accentkleur, verwijzing naar de lijntjes in het logo */
.link {
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 0.1em;
  transition: background-size var(--duration-fast) var(--ease-out), color var(--duration-fast);
}
.link:hover,
.link:focus-visible,
.link[aria-current="page"] { background-size: 100% 2px; }

.link--big {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}

.arrow-r {
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-out);
}
a:hover .arrow-r,
a:focus-visible .arrow-r { transform: translateX(0.25em); }

/* --- Logo ----------------------------------------------------------------- */
/* Kleuren volgens de guidelines: groen + zand op licht, wit + zand op donker */
.logo { width: 100%; height: auto; }
.logo__main { fill: var(--brand-green); transition: fill var(--duration-fast); }
.logo__accent { fill: var(--brand-sand); }
[data-on="dark"] .logo__main,
[data-theme="dark"] .logo__main { fill: var(--brand-white); }

/* --- Header / navigatie --------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  pointer-events: none;
}

.site-header__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: var(--nav-offset);
}

.site-header__logo {
  display: block;
  width: clamp(6.5rem, 9 * var(--u), 9.5rem);
  pointer-events: auto;
  border-radius: 2px;
}

.site-nav { pointer-events: auto; }
.site-nav__list {
  display: flex;
  list-style: none;
  padding: 0;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
.site-nav__list li { white-space: nowrap; }
.site-nav__list li + li { margin-left: 0.3em; }

/* Kleur per element: main.js zet data-on="dark" als het item boven een donker vlak hangt */
[data-nav-probe] { color: var(--brand-green); transition: color var(--duration-fast); }
[data-nav-probe][data-on="dark"] { color: var(--brand-white); }
.site-nav__list li > span { color: var(--brand-green); transition: color var(--duration-fast); }
.site-nav__list li:has(> [data-on="dark"]) > span { color: var(--brand-white); }

/* Op een pagina uit de navigatie staan de andere items in een lichter gewicht; de actieve pagina
   blijft semibold met onderlijn. */
.site-nav__list:has([aria-current]) a:not([aria-current]),
.site-nav__list:has([aria-current]) li > span { font-weight: var(--weight-regular); }

/* Vlak achter het logo en de navigatie: een afgeronde rechthoek in de papierkleur, bijna dekkend.
   Op de lichte achtergrond onzichtbaar; schuift er tekst of een foto onder, dan verdwijnt die achter
   het vlak en blijft de navigatie leesbaar. Bewust zonder backdrop-filter (blur): Safari tekent een
   vaste header met zo'n filter niet meer tijdens het naar beneden trekken om te herladen. Op mobiel
   krijgt de menuknop hetzelfde vlak (zie onderaan, mobiel). */
.site-header__logo,
.site-nav__list { position: relative; }
.site-header__logo > svg,
.site-nav__list > li { position: relative; z-index: 1; }
.site-header__logo::before,
.site-nav__list::before {
  content: "";
  position: absolute;
  inset: -0.55em -0.85em;
  z-index: 0;
  pointer-events: none;
  border-radius: 0.6rem;
  background: rgb(245 245 244 / 0.92);
  transition: background-color var(--duration-fast);
}
.site-header__logo::before { inset: -0.6rem -0.8rem; }
.site-header__logo[data-on="dark"]::before,
.site-nav__list:has([data-on="dark"])::before { background: rgb(77 84 70 / 0.85); }

/* Sectienummer onder het logo: kort verbergen zodat het niet overlapt (zie main.js) */
.section-head > :first-child,
.about-teaser__num,
.story > :first-child { transition: opacity var(--duration-fast) var(--ease-out); }
.is-under-nav:not(:focus-within) { opacity: 0 !important; }

.menu-toggle { display: none; }

/* Mobiel menu (overlay) */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--color-inverse-bg);
  color: var(--color-inverse-text);
  pointer-events: auto;
  overflow-y: auto;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { opacity: 1; }

.mobile-menu__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-l);
  padding-top: calc(var(--nav-offset) + 6rem);
  padding-bottom: var(--space-l);
}
.mobile-menu__list { list-style: none; padding: 0; }
.mobile-menu__link {
  display: inline-block;
  padding-block: 0.15em;
  font-size: clamp(2.5rem, 12vw, 4.5rem);
  font-weight: var(--weight-semibold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  transition: color var(--duration-fast);
}
.mobile-menu__link[aria-current="page"],
.mobile-menu__link:hover { color: var(--brand-sand); }
.mobile-menu__list li {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.mobile-menu.is-open .mobile-menu__list li { opacity: 1; transform: none; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(2) { transition-delay: 0.05s; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(3) { transition-delay: 0.1s; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(4) { transition-delay: 0.15s; }
.mobile-menu__meta { font-weight: var(--weight-semibold); word-break: break-word; }
.mobile-menu__meta a { display: inline-block; padding-block: 0.6rem; }

/* --- Sectiekoppen (01/  LABEL  LABEL) -------------------------------------- */
.section-head { align-items: start; }
.section-head__a { grid-column: 2; }
.section-head__b { grid-column: 4 / span 2; }

/* --- Beelden -------------------------------------------------------------- */
/* Tijdens het laden: een lichtgrijs vlak met een zachte glans (skeleton). Zodra het beeld of de
   video geladen is, zet main.js .is-loaded op het vlak en stopt de glans. */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--brand-mist);
}
.media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.6) 50%, transparent 70%);
  transform: translateX(-100%);
}
.media.is-loaded::before,
.media--placeholder::before { display: none; }
.media__fill { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .media::before { animation: media-shimmer 1.6s ease-in-out infinite; }
  @keyframes media-shimmer { to { transform: translateX(100%); } }
}
.media picture { height: 100%; }
.media__fill {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}
/* Portret: bij bijsnijden blijft het gezicht in beeld */
.media__fill--portrait { object-position: 50% 28%; }
/* Placeholder in merkkleuren tot de echte beelden er zijn */
.media--placeholder .media__fill {
  background:
    radial-gradient(120% 90% at 85% 10%, rgb(191 154 124 / 0.35), transparent 60%),
    linear-gradient(160deg, var(--brand-sage) 0%, var(--brand-green) 100%);
}

/* --- Hero ----------------------------------------------------------------- */
/* De hero vult het eerste scherm; de compositie staat verticaal gecentreerd */
.hero {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: var(--nav-offset) var(--space-l);
}
.hero .container {
  container-type: inline-size;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.hero__stage { margin-block: auto; }

.hero__meta { min-height: 2.5em; }
.hero__meta-a { grid-column: 2; }
.hero__meta-b { grid-column: 3; }

.hero__role {
  margin-top: clamp(2.5rem, 4.6 * var(--u), 5.5rem);
  margin-left: -0.05em;
}
.hero__role > span,
.hero__name > span:not(.visually-hidden) { display: block; }

.hero__visual { margin-top: clamp(0.75rem, 1.2 * var(--u), 1.25rem); }
/* Breedte volgt het raster, hoogte nooit meer dan in het ontwerp (16.2 × --u), zodat de hero in één scherm past */
.hero__media { width: 49.2cqi; aspect-ratio: 630 / 233; max-height: calc(16.2 * var(--u)); }

/* Lopende band met disciplines in het heroblok: tekst schaalt mee met de hoogte van het vlak */
.hero-marquee {
  container-type: size;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--brand-green);
  color: var(--brand-paper);
}
.hero-marquee__track { display: flex; flex: none; }
.hero-marquee__track > span {
  flex: none;
  padding-right: 0.3em;
  font-size: 24cqh;
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.hero-marquee__dot { margin-inline: 0.3em; color: var(--brand-sand); }
@media (prefers-reduced-motion: no-preference) {
  .hero-marquee__track { animation: hero-marquee 48s linear infinite; }
  .hero-marquee:hover .hero-marquee__track { animation-play-state: paused; }
  @keyframes hero-marquee { to { transform: translateX(-50%); } }
}

.hero__bottom {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  margin-top: -1.1cqi;
}
.hero__name {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  margin-right: -0.03em;
}
.hero__cta {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 4.7cqi;
  margin-bottom: -2.4cqi;
}
.hero__tagline {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-transform: uppercase;
}

.scroll-arrow {
  display: block;
  width: clamp(4rem, min(11.5cqi, 11.5 * var(--u)), 10.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
}
.scroll-arrow svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--duration-fast) var(--ease-out);
}
.scroll-arrow:hover svg { transform: translateY(8%); }
.scroll-arrow:hover path { stroke: var(--brand-sand); }

/* --- Projectrijen --------------------------------------------------------- */
.project-list {
  container-type: inline-size;
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.project-row {
  position: relative;
  align-items: start;
}
.project-row__text {
  grid-column: 1 / 4;
  padding-left: 7.25cqi;
  padding-top: 2.8cqi;
  max-width: calc(7.25cqi + 49.2cqi);
  display: flex;
  flex-direction: column;
}
/* Soort project: schoolproject, fictief project, voorstel, opdracht, ... */
.project-row__context { margin-bottom: var(--space-s); }
.project-row__title {
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}
.project-row__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius);
}
.project-row__link {
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-size: 0% 3px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.5s var(--ease-out);
}
.project-row__summary {
  margin-top: 0.7em;
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}
.project-row__more {
  align-self: flex-end;
  margin-top: 1.2em;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}
.project-row__media {
  grid-column: 4 / 6;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: calc(38.5 * var(--u)); /* past in één scherm, ook in een breed maar laag venster */
}

.project-row:hover .project-row__link,
.project-row:focus-within .project-row__link { background-size: 100% 3px; }
.project-row:hover .media__fill,
.project-row:focus-within .media__fill { transform: scale(1.04); }
.project-row:hover .arrow-r,
.project-row:focus-within .arrow-r { transform: translateX(0.25em); }
.project-row__link:focus-visible { outline: none; }
.project-row__link:focus-visible::after { outline: 2px solid var(--brand-green); outline-offset: 6px; }

.more-link {
  container-type: inline-size;
  margin-top: clamp(2rem, 3.5 * var(--u), 3.25rem);
}
.more-link > a { margin-left: 7.25cqi; }

/* --- Over mij (homepagina) ------------------------------------------------ */
.about-teaser__grid {
  container-type: inline-size;
  align-items: start;
  margin-top: var(--space-xl);
}
.about-teaser__body {
  grid-column: 1 / 4;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: 2.8cqi 4cqi 0 7.25cqi;
}
.about-teaser__title { margin-left: -0.05em; }
.about-teaser__title > span { display: block; }
.about-teaser__text { max-width: 49.2cqi; }
.about-teaser__text > * + * { margin-top: 0.75em; }
.about-teaser__lead {
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}
.about-teaser__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  padding-top: var(--space-m);
  border-top: 2px solid var(--brand-sand);
  font-weight: var(--weight-semibold);
}
.about-teaser__facts dd { margin: 0.35em 0 0; }
.about-teaser__figure { grid-column: 4 / 6; margin: 0; }
.about-teaser__media { width: 100%; aspect-ratio: 4 / 5; max-height: calc(46 * var(--u)); }
.about-teaser__figure figcaption { margin-top: var(--space-s); }

/* --- Contact -------------------------------------------------------------- */
.contact-cta .container { container-type: inline-size; }
/* Als de contactsectie een scherm vult (zie main.js, stap 1a), staan e-mailadres en knop
   verticaal gecentreerd in de vrije ruimte in plaats van een leeg vlak eronder. */
.contact-cta { display: flex; flex-direction: column; }
.contact-cta > .container { flex: 1; display: flex; flex-direction: column; }
.contact-cta .section-head { margin-bottom: var(--space-xl); }
.contact-cta__actions { margin-bottom: auto; }
.contact-cta__mail {
  margin-top: auto;
  margin-left: -0.05em;
  /* Het adres staat op één regel: het is 14,4× zo breed als de lettergrootte, dus 6,8cqi past altijd */
  font-size: min(var(--text-mail), 6.8cqi);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}
.mail-link {
  --mail-line: max(2px, 0.05em);
  display: inline-block;
  white-space: nowrap;
  /* Ruimte onder de onderstok van de "g", zodat de onderlijn niet tegen de letters plakt */
  padding-bottom: 0.14em;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-size: 0% var(--mail-line);
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.6s var(--ease-out);
}
.mail-link:hover,
.mail-link:focus-visible { background-size: 100% var(--mail-line); }

.contact-cta__actions { margin-top: var(--space-m); }
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 44px;
  padding: 0.5em 1.25em;
  border: 2px solid currentColor;
  border-radius: 999px;
  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.copy-btn:hover,
.copy-btn:focus-visible { background: var(--brand-green); color: var(--brand-white); border-color: var(--brand-green); }
.copy-btn.is-done { background: var(--brand-sand); border-color: var(--brand-sand); color: var(--brand-green); }

/* --- Footer --------------------------------------------------------------- */
main { padding-bottom: var(--space-xl); }

.site-footer {
  padding-block: var(--space-xl) var(--nav-offset);
  background: var(--color-inverse-bg);
  color: var(--color-inverse-text);
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-l);
  padding-bottom: var(--space-xl);
}
.site-footer__logo { display: block; width: clamp(9rem, 16 * var(--u), 15rem); }
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--space-m);
  list-style: none;
  padding: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.site-footer__nav a { display: inline-block; padding-block: 0.5rem; }

.site-footer__bottom {
  align-items: end;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
.site-footer__who { grid-column: 1 / 3; }
.site-footer__mid { grid-column: 3; text-align: left; }
.site-footer__status { grid-column: 4 / 6; text-align: right; }
.site-footer__copy { font-size: var(--text-label); font-weight: var(--weight-regular); opacity: 0.85; }
.footer__social a { display: inline-block; padding-block: 0.5rem; }

/* --- Pagina-intro (subpagina's) ------------------------------------------- */
.page-hero { padding-top: calc(var(--nav-offset) + clamp(5.5rem, 9 * var(--u), 9rem)); }
.page-hero .container { container-type: inline-size; }
.page-hero__title { margin-top: var(--space-l); margin-left: -0.05em; font-size: var(--text-display-2); }
.page-hero__intro { margin-top: var(--space-m); max-width: 56.5cqi; }

/* Projectdetail */
/* Gegevens gegroepeerd onder een zandkleurige lijn (zoals de feiten op de homepagina), met
   tussenruimte zodat een lange waarde niet tegen de volgende kolom plakt */
.project-meta {
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 2px solid var(--brand-sand);
  row-gap: var(--space-m);
  font-weight: var(--weight-semibold);
}
.project-meta > div { padding-right: var(--space-l); }
.project-meta > div:nth-child(4) { grid-column: 4 / 6; }
.project-meta dd { margin-top: 0.35em; line-height: var(--leading-snug); }

.project-hero { margin-top: var(--space-xl); }
/* Hoofdbeeld in zijn eigen verhouding (16:9): nooit bijgesneden. Past het niet op een laag scherm,
   dan wordt het smaller en gecentreerd in plaats van afgesneden. */
.project-hero__media {
  width: min(100%, calc(92vh * 16 / 9));
  width: min(100%, calc(92svh * 16 / 9));
  margin-inline: auto;
  aspect-ratio: 16 / 9;
}

.story { container-type: inline-size; align-items: start; }
.story__label { grid-column: 2; }
.story__body { grid-column: 3 / 6; }
.story__body > * + * { margin-top: 0.8em; }

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-m);
  margin-top: var(--space-xl);
}
.gallery__item { width: 100%; aspect-ratio: 4 / 5; max-height: calc(52 * var(--u)); }
/* Breed beeld over de volle breedte, voor liggende mockups (16:10, zelfde regel als het hoofdbeeld) */
.gallery__item--wide {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, calc(92vh * 16 / 10));
  width: min(100%, calc(92svh * 16 / 10));
  aspect-ratio: 16 / 10;
  max-height: none;
}
/* Paar in de verhouding van een social-mediapost (788 × 914): de post past dan precies, zonder
   witte randen of afgesneden tekst. Geen maximumhoogte, anders wordt er toch bijgesneden. */
.gallery__item--post { aspect-ratio: 788 / 914; max-height: none; }
/* Staand paar in de verhouding van de beelden (4:5), zonder bijsnijden */
.gallery__item--portrait { aspect-ratio: 4 / 5; max-height: none; }

.next-project__title { margin-top: var(--space-s); }
.next-project .link--big { font-size: var(--text-h1); letter-spacing: -0.02em; }

/* Over mij */
.about-intro { margin-top: var(--space-l); align-items: start; row-gap: var(--space-l); grid-template-rows: auto 1fr; }
.about-intro__title { grid-column: 1 / 4; margin-left: -0.05em; font-size: var(--text-display-2); }
.about-intro__text { grid-column: 1 / 4; max-width: 56.5cqi; }
.about-intro__text > * + * { margin-top: var(--space-m); }
.about-intro__media { grid-column: 4 / 6; grid-row: 1 / 3; width: 100%; aspect-ratio: 4 / 5; max-height: calc(48 * var(--u)); }

.card-grid {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-l);
}
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  padding: clamp(1.5rem, 3 * var(--u), 3rem);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.card__title { font-size: var(--text-h3); line-height: var(--leading-snug); }
.card p { margin-top: var(--space-s); max-width: 34em; }

.service-list {
  margin-top: var(--space-l);
  font-size: var(--text-h1);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.service-list li {
  padding-block: 0.12em;
  border-top: 2px solid var(--brand-sand);
}
.service-list li:last-child { border-bottom: 2px solid var(--brand-sand); }

.approach { margin-top: var(--space-xl); }
.approach p { margin-top: var(--space-xs); }

/* Contact: werkwijze */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-m);
  margin-top: var(--space-l);
}
.steps__item {
  padding-top: var(--space-s);
  border-top: 2px solid var(--brand-sand);
}
.steps__num {
  display: block;
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: 1;
}
.steps__title { margin-top: var(--space-m); font-size: var(--text-md); }
.steps p { margin-top: var(--space-xs); }

/* 404 */
.not-found__links {
  list-style: none;
  padding: 0;
  margin-top: var(--space-l);
  display: grid;
  gap: var(--space-s);
}

/* --- Tablet en kleiner ---------------------------------------------------- */
@media (max-width: 63.99em) {
  .card-grid--4,
  .steps { grid-template-columns: repeat(2, 1fr); }
}

/* --- Mobiel --------------------------------------------------------------- */
@media (max-width: 47.99em) {
  .site-nav { display: none; }

  /* Zelfde stijl als op desktop: geen balk, maar een vlak achter het logo en achter de menuknop.
     Alleen met het menu open krijgt de header een groene achtergrond. */
  .site-header { transition: background-color var(--duration-fast); }
  .site-header.menu-open { background: var(--brand-green); }
  .site-header__inner { padding-bottom: 0.75rem; }
  .menu-toggle { position: relative; }
  .menu-toggle > * { position: relative; z-index: 1; }
  .menu-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: 0.6rem;
    background: rgb(245 245 244 / 0.92);
    transition: background-color var(--duration-fast);
  }
  .menu-toggle[data-on="dark"]::before { background: rgb(77 84 70 / 0.85); }
  .site-header.menu-open .site-header__logo::before,
  .site-header.menu-open .menu-toggle::before { background: transparent; }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    min-width: 44px;
    margin-top: -0.6rem;
    margin-right: -0.5rem;
    padding: 0 0.5rem;
    pointer-events: auto;
    font-size: 1rem;
    font-weight: var(--weight-semibold);
  }
  .menu-toggle__icon,
  .menu-toggle__icon::before {
    display: block;
    width: 1.5rem;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--duration-fast) var(--ease-out);
  }
  .menu-toggle__icon { position: relative; transform: translateY(-4px); }
  .menu-toggle__icon::before { content: ""; position: absolute; top: 8px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon { transform: translateY(0) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { transform: translateY(-8px) rotate(-90deg); }

  /* Met open menu staat alles in de header op het donkere vlak */
  .site-header.menu-open [data-nav-probe] { color: var(--brand-white); }
  .site-header.menu-open .logo__main { fill: var(--brand-white); }

  .cols { grid-template-columns: 1fr 1fr; column-gap: var(--space-m); }

  .section-head {
    grid-template-columns: minmax(3.25rem, max-content) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-s);
  }
  .section-head > .label { padding-right: 0; }
  .section-head__a { grid-column: 2; }
  .section-head__b { grid-column: 3; }

  .hero__meta {
    padding-top: 4.25rem;
    grid-template-columns: auto auto;
    justify-content: space-between;
  }
  .hero__meta > .label { padding-right: 0; }
  .hero__meta-a { grid-column: 1; }
  .hero__meta-b { grid-column: 2; }
  /* Mobiele hero: maten volgen ook de schermhoogte, zodat alles in het eerste scherm past */
  .hero { padding-bottom: clamp(1rem, 3svh, 2rem); }
  .hero__role,
  .hero__name { font-size: clamp(2.25rem, min(12.8vw, 7.2svh), 3.5rem); }
  .hero__role { margin-top: clamp(1rem, 4svh, 2rem); }
  .hero__media { width: 100%; aspect-ratio: auto; height: clamp(6.5rem, 24svh, 12rem); max-height: none; }
  .hero__bottom {
    grid-template-columns: 1fr;
    margin-top: var(--space-m);
  }
  .hero__name { grid-column: 1; grid-row: 1; }
  .hero__cta { grid-row: 2; margin: clamp(1rem, 4svh, 2rem) 0 0; gap: var(--space-m); }
  .scroll-arrow { width: clamp(3.25rem, 10svh, 4.5rem); }

  .project-row { grid-template-columns: 1fr; }
  .project-row__media { grid-column: 1; grid-row: 1; width: 100%; aspect-ratio: 4 / 5; max-height: 52vh; max-height: 52svh; }
  .project-row__text {
    grid-column: 1;
    padding: var(--space-m) 0 0;
    max-width: none;
  }
  .more-link > a { margin-left: 0; }

  .about-teaser__grid { grid-template-columns: 1fr; margin-top: var(--space-l); }
  .about-teaser__figure { grid-column: 1; grid-row: 1; }
  .about-teaser__media { max-height: 52vh; max-height: 52svh; }
  .about-teaser__body { grid-column: 1; grid-row: 2; padding: var(--space-m) 0 0; gap: var(--space-m); }
  .about-teaser__text { max-width: none; }

  .contact-cta__mail { margin-top: 0; }

  .site-footer__bottom { grid-template-columns: 1fr; row-gap: var(--space-m); }
  .site-footer__who,
  .site-footer__mid,
  .site-footer__status { grid-column: 1; text-align: left; }

  .page-hero { padding-top: calc(var(--nav-offset) + 5rem); }
  .page-hero__intro,
  .about-intro__text { max-width: none; }

  .project-meta > div:nth-child(4) { grid-column: auto; }
  .story { grid-template-columns: 3.25rem 1fr; }
  .story__label { grid-column: 2; }
  .story__body { grid-column: 1 / 3; margin-top: var(--space-m); }
  .gallery { grid-template-columns: 1fr; }
  .prose > * { margin-left: 0; }
  .gallery__item,
  .about-intro__media { max-height: 60vh; max-height: 60svh; }
  .gallery__item--wide,
  .gallery__item--post,
  .gallery__item--portrait { max-height: none; } /* eigen verhouding, nooit bijsnijden */

  .about-intro__title,
  .about-intro__text,
  .about-intro__media { grid-column: 1 / 3; grid-row: auto; }
  .about-intro__media { aspect-ratio: 4 / 5; }

  .card-grid--2,
  .card-grid--4,
  .steps { grid-template-columns: 1fr; }
}

/* Heel korte mobiele schermen (bv. 320 × 568): iets compacter, zodat secties blijven passen */
@media (max-width: 47.99em) and (max-height: 37.5em) {
  .hero__meta { padding-top: 3.75rem; }
  .hero__meta > .label { font-size: 0.6875rem; }
  .hero__media { height: 17svh; min-height: 5rem; }
  .hero__tagline { font-size: 1rem; }
  .project-row__media { max-height: 42svh; }
  .project-row__summary { font-size: 1.125rem; }
  .project-row__text { padding-top: var(--space-s); }
}

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

  /* Bewust geen @view-transition tussen pagina's: sommige browsers (o.a. Safari) tonen dan
     eerst een momentopname van de nieuwe pagina en spelen de scroll-reveal daarna opnieuw af. */

  /* Scroll-reveal; zonder (werkend) JavaScript blijft alles gewoon zichtbaar */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
  }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }

  /* Hero: regels komen gestaffeld binnen bij het laden */
  .js [data-reveal="hero"] { transform: translateY(2.5rem); }
  .js [data-reveal="hero"]:nth-child(2) { transition-delay: 0.08s; }
  .js [data-reveal="hero"]:nth-child(3) { transition-delay: 0.16s; }
  .js [data-reveal="hero"]:nth-child(4) { transition-delay: 0.24s; }
  .js .hero__bottom > [data-reveal="hero"]:nth-child(1) { transition-delay: 0.24s; }
  .js .hero__bottom > [data-reveal="hero"]:nth-child(2) { transition-delay: 0.36s; }

  .scroll-arrow svg { animation: nudge 2.4s var(--ease-out) 1.6s infinite; }
  .scroll-arrow:hover svg { animation: none; }
  @keyframes nudge {
    0%, 60%, 100% { transform: none; }
    30% { transform: translateY(6%); }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}