:root {
  --bg: #fdfdfd;
  --ink: #111;
  --muted: #555;
  --blue: #0000ee;
  --font: Arial, "Helvetica Neue", Helvetica, sans-serif;           /* lopende tekst */
  --font-title: "Familjen Grotesk", Arial, sans-serif;              /* projecttitels */
  --font-meta: "Atkinson Hyperlegible", Arial, sans-serif;          /* kop, rol en jaar */
  --gutter: clamp(16px, 3.5vw, 48px);

  /* één kleur per type project */
  --t-programma: #0000ee;    /* blauw */
  --t-expositie: #d6006f;    /* roze */
  --t-onderzoek: #c94a00;    /* oranje */
  --t-interventie: #00843a;  /* groen */
  --t-muziek: #8800cc;       /* paars */
  --t-magazine: #8f6c00;     /* oker */
  --t-concertreeks: #8800cc; /* paars, net als muziek */
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

a { color: inherit; text-underline-offset: 0.14em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue); }

:focus-visible { outline: 2px dashed var(--blue); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

.skip {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--bg); padding: .5rem .75rem; z-index: 100;
}
.skip:focus { top: 1rem; }

/* ---------- kop: twee regels, links ---------- */

.top {
  padding: 1.25rem var(--gutter) 0;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: 0.05em;
}
.top-row {
  display: flex; flex-wrap: wrap;
  gap: .1rem 2.2em;
  margin: 0 0 .35rem;
}
.top-row a { padding: .1rem 0; }
/* kop: geen kleur, alleen onderstreping bij hover */
.top a { text-decoration: none; }
.top a:hover,
.top a:focus-visible { color: inherit; text-decoration: underline; }

/* ---------- indeling: lijst links, inhoud rechts ---------- */

.layout {
  display: grid;
  grid-template-columns: minmax(15rem, 23rem) minmax(0, 1fr);
  gap: 2rem clamp(2rem, 5vw, 5rem);
  padding: clamp(2.5rem, 8vh, 5rem) var(--gutter) 6rem;
  align-items: start;
}
body[data-view="over"] .projects { display: none; }
body[data-view="over"] .layout { grid-template-columns: minmax(0, 1fr); }

.projects {
  position: sticky; top: 1.5rem;
  max-height: calc(100dvh - 3rem);
  overflow-y: auto; overflow-x: hidden;
  padding: 4px 6px 4px 2px; /* ruimte voor schuine regels en focuskader */
}
.projects > ul {
  list-style: none; margin: 0; padding: 0;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  line-height: 1.3;
}
.projects > ul > li { margin: 0 0 .5em; }
/* alleen de titel staat scheef, zodat een opengeklapt project (telefoon) recht blijft */
.projects > ul > li > a {
  display: inline-block;
  transform: rotate(var(--r, 0deg)) translateX(var(--x, 0px));
  transform-origin: left center;
}
/* geen onderstreping: >>> verschijnt bij hover, focus en het actieve project */
.projects li > a,
.fold-sub a { text-decoration: none; }
.projects li > a:hover::before,
.projects li > a:focus-visible::before,
.projects li > a[aria-current="page"]::before,
.fold-sub a:hover::before,
.fold-sub a:focus-visible::before,
.fold-sub a[aria-current="page"]::before { content: ">>> "; white-space: pre; }
.projects .type { color: var(--tc); }
.projects li > a:hover,
.projects li > a[aria-current="page"] { color: var(--tc); }

/* uitgevouwen info onder het actieve project */
.fold {
  font-size: .95rem;
  line-height: 1.45;
  color: var(--muted);
  margin: .35rem 0 .2rem;
  padding-left: .9rem;
  border-left: 2px solid var(--tc);
  letter-spacing: .02em;
  animation: fold .25s ease-out;
}
.fold p { margin: 0; }
@keyframes fold { from { opacity: 0; transform: translateY(-4px); } }

main { outline: none; min-width: 0; }

/* foto in de stijl van de referentie: dun zwart randje, schuin, schaduw */
.polaroid {
  display: block;
  border: 1px solid #000;
  box-shadow: 2px 4px 10px rgba(0,0,0,.18);
  background: #eee;
  transform: rotate(var(--r, 0deg));
  transition: transform .25s ease-out;
}
.polaroid img { display: block; width: 100%; height: auto; }

/* lege staat op de projectenpagina */
.pick { color: var(--muted); margin: .3rem 0 0; }

/* ---------- project ---------- */

.project-head { margin-bottom: 2rem; }
.project-head h1 {
  font-weight: normal;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.1;
  margin: 0 0 .45rem;
  transform: rotate(-0.8deg);
  transform-origin: left;
}
.meta {
  margin: 0; font-size: .95rem; letter-spacing: .04em;
  display: flex; flex-wrap: wrap; gap: .1rem 1.4rem;
}
.meta .type { color: var(--tc); }

.block { margin-bottom: 4.5rem; }
.block h2 {
  font-weight: normal; font-size: 1.45rem;
  margin: 0 0 .3rem;
  color: var(--tc);
}
.block .role { margin: 0 0 1.4rem; font-size: .95rem; letter-spacing: .04em; color: var(--ink); }
.text { max-width: 38rem; }
.text p { margin: 0 0 1em; }
.text small { font-size: .9rem; color: var(--muted); line-height: 1.5; display: block; margin-bottom: 1em; }

.links { list-style: none; padding: 0; margin: 1.5rem 0; }
.links li { margin: .3rem 0; }
.links a::before { content: "→"; display: inline-block; margin-right: .35em; text-decoration: none; }

blockquote {
  margin: 1.5rem 0; padding: 0 0 0 1rem;
  border-left: 2px solid var(--tc, var(--blue));
  font-size: .95rem;
}
blockquote p { margin: 0 0 .3rem; }
blockquote footer { color: var(--muted); font-size: .88rem; }

.videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 2rem; margin-top: 2rem; max-width: 60rem; }
.video .frame {
  aspect-ratio: 16 / 9; width: 100%;
  border: 1px solid #000;
  box-shadow: 2px 4px 10px rgba(0,0,0,.18);
}
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.video p { margin: .5rem 0 0; font-size: .9rem; }
.video p span { color: var(--muted); }

.todo { background: #fff6a8; padding: 0 .2em; font-style: italic; }

/* galerij: losjes verspreide, schuine foto's */
.gallery {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 1.8rem 1.6rem;
  margin-top: 2.2rem;
}
.gallery button {
  all: unset;
  cursor: zoom-in;
  width: var(--w, 30%);
  margin-top: var(--mt, 0);
}
.gallery button .polaroid:hover,
.gallery button:focus-visible .polaroid { transform: rotate(0deg) scale(1.03); }
.gallery button:focus-visible { outline: 2px dashed var(--blue); outline-offset: 6px; }
.credit { width: 100%; font-size: .85rem; color: var(--muted); margin: 0; }

/* vorige / volgende */
.pager {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: 1.1rem;
  padding-top: 1rem;
}

/* ---------- over ---------- */

.about { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 38rem); gap: 2rem 4rem; align-items: start; }
.about .polaroid { --r: -2.5deg; }
.about h1 { font-weight: normal; font-size: clamp(1.9rem, 3.6vw, 3rem); margin: 0 0 1rem; line-height: 1.1; }
.about h2 { font-weight: normal; font-size: 1.45rem; margin: 2.5rem 0 .6rem; color: var(--blue); }
.contact { list-style: none; padding: 0; margin: 0; font-size: 1.15rem; }
.contact li { margin: .25rem 0; }
.cv { margin: 0; display: grid; grid-template-columns: 7.5rem 1fr; gap: .35rem 1rem; }
.cv dt { color: var(--muted); }
.cv dd { margin: 0; }

/* foto die meebeweegt met de muis bij hover op een project */
.hover-peek {
  position: fixed; left: 0; top: 0;
  width: 220px; height: auto;
  border: 1px solid #000;
  box-shadow: 2px 4px 10px rgba(0,0,0,.2);
  pointer-events: none; z-index: 50;
  opacity: 0;
  transform: translate(-999px, -999px);
}
.hover-peek.on { opacity: 1; }

/* ---------- lightbox ---------- */

.lightbox {
  border: 0; padding: 0; margin: 0;
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  background: rgba(253,253,253,.97);
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: transparent; }
.lightbox img {
  max-width: calc(100vw - 32px); max-height: calc(100dvh - 140px);
  border: 1px solid #000;
  box-shadow: 2px 4px 14px rgba(0,0,0,.2);
  transform: rotate(-1deg);
}
.lb-btn {
  position: fixed; background: none; border: 0; font: inherit; font-size: 1.05rem;
  color: var(--ink); cursor: pointer; padding: .75rem; min-height: 44px;
  text-decoration: underline; text-underline-offset: .14em;
}
.lb-btn:hover { color: var(--blue); }
.lb-close { top: .5rem; right: .5rem; }
.lb-prev { bottom: .5rem; left: .5rem; }
.lb-next { bottom: .5rem; right: .5rem; }
.lb-count { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); margin: 0; font-size: .9rem; color: var(--muted); }

/* ---------- kleinere schermen ---------- */

@media (max-width: 1100px) {
  .gallery button { width: calc(var(--w, 30%) * 1.45); }
}

/* telefoon/tablet: lijst boven, project klapt open onder de aangeklikte titel */
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; padding-top: 2rem; }
  .projects { position: static; max-height: none; overflow: visible; }
  .fold-info { display: none; } /* op telefoon staat jaar + rol direct in het uitgeklapte project */
  .projects li main { margin: 1.5rem 0 2.5rem; font-size: 17px; line-height: 1.55; }
  .about { grid-template-columns: 1fr; }
  .about .polaroid { max-width: 240px; }
  .gallery button { width: 100% !important; margin-top: 0 !important; }
}

@media (max-width: 560px) {
  .top-row { gap: .1rem 1.6rem; }
  .cv { grid-template-columns: 1fr; }
  .cv dd { margin-bottom: .5rem; }
}

@media (hover: none) { .hover-peek { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, .fold { transition: none !important; animation: none !important; }
}

/* ---------- projecten met jaren (De Straat) ---------- */

.fold-sub {
  list-style: none;
  padding-left: .9rem;
  font-size: 1.05rem;
  color: var(--ink);
}
.fold-sub li { margin: .15rem 0; }
.fold-sub a:hover,
.fold-sub a[aria-current="page"] { color: var(--tc); }

.years { display: flex; gap: 1.5rem; margin: -0.6rem 0 2rem; font-size: 1.15rem; }
.years a[aria-current="page"] { color: var(--tc); text-decoration-thickness: 2px; }

.year-cards {
  list-style: none; padding: 0; margin: 0 0 4rem;
  display: flex; flex-wrap: wrap; gap: 2.5rem 3rem;
}
.year-cards li { width: min(320px, 100%); }
.year-cards a { display: block; text-decoration: none; }
.year-cards a:hover .polaroid,
.year-cards a:focus-visible .polaroid { transform: rotate(0deg) scale(1.03); }
.year-label {
  display: inline-block; margin-top: 1rem;
  font-size: 1.3rem;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .13em;
}
.year-cards a:hover .year-label { color: var(--tc); }

/* ---------- lettertypes ---------- */

.top,
.meta,
.block .role,
.fold-info,
.years { font-family: var(--font-meta); }

.projects > ul,
.fold-sub,
.project-head h1,
.block h2,
.year-label,
.pager,
.about h1,
.about h2 { font-family: var(--font-title); }

/* lopende tekst blijft Arial, ook als het project in de lijst openklapt (telefoon) */
main { font-family: var(--font); }

/* rol direct onder type + jaar, in dezelfde stijl */
.meta + .meta { margin-top: .15rem; }

/* Familjen Grotesk iets ruimer gespatieerd */
.projects > ul,
.fold-sub,
.project-head h1,
.block h2,
.year-label,
.pager,
.about h1,
.about h2 { letter-spacing: .03em; }

/* type, jaar en rol een beetje wonky, net als de projectenlijst */
.meta { transform-origin: left center; transform: rotate(-0.7deg); }
.meta + .meta { transform: rotate(0.6deg) translateX(5px); }
.block .role { transform-origin: left center; transform: rotate(0.6deg) translateX(4px); }

/* tagline onder de naam, heel lichtgrijs */
.top p.top-row { flex-direction: column; gap: 0; margin-bottom: .6rem; }
.tagline { color: #d2d2d2; }

/* ---------- projecten met onderliggende projecten (RAUM) ---------- */

.fold-year {
  font-family: var(--font-meta);
  font-size: .9rem;
  letter-spacing: .04em;
  color: var(--muted);
  margin-top: .45rem !important;
}
.fold-year:first-child { margin-top: 0 !important; }

.crumb {
  font-family: var(--font-meta);
  font-size: .95rem; letter-spacing: .04em;
  margin: 0 0 .4rem;
}
.crumb a { text-decoration: none; }
.crumb a:hover { color: inherit; text-decoration: underline; }

.child-year .year-head {
  font-family: var(--font-meta);
  font-weight: normal; font-size: 1.15rem; letter-spacing: .04em;
  margin: 0 0 1.2rem;
  transform: rotate(-0.6deg); transform-origin: left;
}
.child-year .year-cards { margin-bottom: 3.5rem; }
.year-cards .type { color: var(--tc); }

/* het aangeklikte project licht op in de lijst: groter, met wat ruimte erboven en eronder */
.projects > ul > li > a[aria-current="page"] {
  font-size: 1.22em;
  transition: font-size .2s ease-out;
}
.projects > ul > li:has(> a[aria-current="page"]) { margin: .55em 0 .8em; }
.projects > ul > li:first-child:has(> a[aria-current="page"]) { margin-top: 0; }

/* ---------- doorlopende fotoreel op de landingspagina ---------- */

/* reel onderaan de pagina */
body[data-view="home"] { display: flex; flex-direction: column; min-height: 100dvh; }
body[data-view="home"] .layout { display: block; margin-top: auto; padding: 2rem 0 clamp(1.5rem, 5vh, 3.5rem); }
body[data-view="home"] .projects { display: none; }

.reel {
  overflow: hidden;
  padding: .75rem 0 1.25rem; /* ruimte voor schuine foto's en schaduw */
  pointer-events: none;     /* niet aanklikbaar */
}
.reel-track {
  display: flex; align-items: flex-start;
  gap: clamp(.8rem, 1.5vw, 1.3rem);
  width: max-content;
  padding-left: var(--gutter);
  animation: reel var(--dur, 60s) linear infinite;
}
.reel-item {
  flex: none;
  transform: rotate(var(--r)) translateY(var(--y));
}
.reel-item img {
  height: clamp(75px, 13vh, 130px);
  width: auto;
}
@keyframes reel { to { transform: translateX(-50%); } }

/* minder beweging gewenst: de reel staat stil */
@media (prefers-reduced-motion: reduce) {
  .reel-track { animation: none; }
}

/* ---------- taalknop rechtsboven: >>> nl / en <<< ---------- */

.top { position: relative; }
.lang {
  position: absolute; top: 1.25rem; right: var(--gutter);
  display: flex; align-items: baseline; gap: .35em;
  font-family: var(--font-meta);
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
  letter-spacing: .05em;
}
.lang button {
  background: none; border: 0; padding: .35rem .1rem; min-height: 32px;
  font: inherit; letter-spacing: inherit;
  color: #a8a8a8; cursor: pointer;
}
.lang button[aria-pressed="true"] { color: var(--ink); cursor: default; }
.lang button[aria-pressed="false"]:hover { color: var(--ink); text-decoration: underline; }

/* op een smal scherm niet over de naam heen */
@media (max-width: 560px) {
  .top { padding-top: 3rem; }
  .lang { top: .6rem; }
}

/* ---------- doorlopende fotoreeks bij een project (klikbaar) ---------- */

.preel {
  overflow: hidden;
  margin: 2.2rem 0 .8rem;
  padding: .9rem 0 1.6rem; /* ruimte voor schuine foto's en schaduw */
}
.preel-track {
  display: flex; align-items: flex-start;
  gap: clamp(1rem, 2vw, 1.6rem);
  width: max-content;
  padding-left: .4rem;
  animation: reel var(--dur, 60s) linear infinite;
}
/* pauzeren met de muis erop of met toetsenbordfocus, zodat je rustig kunt klikken */
.preel:hover .preel-track,
.preel:focus-within .preel-track { animation-play-state: paused; }

.preel-item {
  all: unset;
  flex: none;
  cursor: zoom-in;
  transform: translateY(var(--y, 0px));
}
.preel-item img { height: clamp(140px, 24vh, 240px); width: auto; }
.preel-item:hover .polaroid,
.preel-item:focus-visible .polaroid { transform: rotate(0deg) scale(1.04); }
.preel-item:focus-visible { outline: 2px dashed var(--blue); outline-offset: 6px; }

/* weinig foto's of minder beweging gewenst: stilstaande rij die doorloopt naar de volgende regel */
.preel.still .preel-track { animation: none; width: auto; flex-wrap: wrap; row-gap: 1.6rem; }
@media (prefers-reduced-motion: reduce) {
  .preel .preel-track { animation: none; width: auto; flex-wrap: wrap; }
}

/* twee reeksen onder elkaar (Verwoven) */
.preel + .preel { margin-top: -.6rem; }

/* beschrijving onder de vergrote foto */
.lightbox[open] { grid-template-rows: 1fr auto; }
.lb-caption {
  margin: 0; padding: 0 1rem 4.2rem; text-align: center;
  font-family: var(--font-meta); font-size: .95rem; letter-spacing: .03em;
}
.lb-caption:empty { display: none; }

/* dankwoord en namen onder de fotoreeks */
.notes { margin-top: 1.2rem; }

/* ---------- optie 1: strook die je zelf schuift ---------- */

.strip { margin: 2.2rem 0 1rem; }
.strip-track {
  display: flex; align-items: flex-start;
  gap: clamp(1rem, 2vw, 1.6rem);
  overflow-x: auto; overflow-y: hidden;
  padding: .9rem .4rem 1.4rem; /* ruimte voor schuine foto's en schaduw */
  scrollbar-width: thin;
  scrollbar-color: #cfcfcf transparent;
  cursor: grab;
  outline: none;
}
.strip-track.dragging { cursor: grabbing; user-select: none; }
.strip-track.dragging .preel-item { pointer-events: none; }
.strip .preel-item img { height: clamp(150px, 26vh, 260px); width: auto; -webkit-user-drag: none; }
.strip-nav { display: flex; gap: 1.2rem; margin-top: .2rem; }
.strip-btn {
  background: none; border: 0; padding: .3rem .4rem; min-width: 44px; min-height: 40px;
  font-family: var(--font-title); font-size: 1.35rem; color: var(--ink); cursor: pointer;
}
.strip-btn:hover:not(:disabled) { color: var(--tc, var(--blue)); }
.strip-btn:disabled { color: #d2d2d2; cursor: default; }
.strip.fits .strip-nav { display: none; } /* alles past al: geen pijltjes nodig */

/* ---------- optie 3: één grote foto met kleine foto's eronder ---------- */

.feature { margin: 2.2rem 0 1rem; max-width: 46rem; }
.feature-main { cursor: zoom-in; display: inline-block; }
.feature-main img {
  width: auto; height: auto;
  max-width: 100%; max-height: min(62vh, 560px);
}
.feature-main:hover .polaroid,
.feature-main:focus-visible .polaroid { transform: rotate(0deg) scale(1.015); }
.feature-main:focus-visible { outline: 2px dashed var(--blue); outline-offset: 6px; }

.thumbs { display: flex; flex-wrap: wrap; gap: .8rem .7rem; margin-top: 1.6rem; }
.thumb {
  padding: 0; border: 1px solid #000; background: #eee; cursor: pointer;
  transform: rotate(var(--r, 0deg));
  box-shadow: 1px 2px 5px rgba(0,0,0,.15);
  opacity: .55;
  transition: opacity .2s ease, transform .2s ease-out;
}
.thumb img { display: block; height: 64px; width: auto; }
.thumb:hover, .thumb:focus-visible { opacity: 1; transform: rotate(0deg) scale(1.06); }
.thumb[aria-pressed="true"] { opacity: 1; outline: 2px solid var(--tc, var(--ink)); outline-offset: 3px; }
.thumb:focus-visible { outline: 2px dashed var(--blue); outline-offset: 3px; }

/* minder dan 5 foto's: stilstaande rij die naar de volgende regel doorloopt */
.strip.few .strip-track { flex-wrap: wrap; overflow: visible; cursor: default; row-gap: 1.6rem; }
.strip.few .strip-nav { display: none; }

/* tagline weer achter de naam, op dezelfde regel, half zo groot */
.top p.top-row { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0 .9em; margin-bottom: .45rem; }
.tagline { font-size: .5em; }

/* portret op de over-pagina 30% kleiner */
.about { grid-template-columns: minmax(126px, 196px) minmax(0, 38rem); }
@media (max-width: 820px) {
  .about { grid-template-columns: 1fr; }
  .about .polaroid { max-width: 168px; }
}

/* lijst en inhoud mogen nooit breder worden dan het scherm (anders duwt een fotostrook de pagina uit) */
.layout > * { min-width: 0; }
.projects > ul > li { min-width: 0; max-width: 100%; }