/* ==========================================================
   NINE RIETER, versie 4 (lichtgele muur, gelaagde titel)
   ========================================================== */
:root {
  --wall: #F5F1D2;        /* zacht lichtgeel, ietsje feller */
  --wall-light: #FBF8E4;  /* lichter midden */
  --wall-dark: #EAE5C2;   /* heel licht vignet aan de randen */
  --tape: rgba(238, 226, 190, .55);
  --name: #C6C4B4;        /* lichtgrijs, de grote naam */
  --sub: #6A6A62;         /* donkerder grijs, de ondertitel en categorieën */
  --ink-soft: #9A988C;    /* jaartallen, voet */
  --circle: rgba(120, 118, 105, .45);
  --circle-grey: #CFCDC2;
  --circle-neon: #E3FF2A;
  --circle-size: 40px;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .2  0 0 0 0 .15  0 0 0 .55 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");

  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "DM Mono", "Roboto Mono", Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--sub);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex; flex-direction: column;
  position: relative;
  overflow-x: hidden;
  background-color: var(--wall);
  background-image:
    radial-gradient(90% 70% at 50% 40%, var(--wall-light) 0%, transparent 60%),
    radial-gradient(130% 100% at 50% 50%, transparent 60%, var(--wall-dark) 100%);
  background-attachment: fixed;
}
/* fijne korrel over alles, geen donkere vlekken */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply; opacity: .2;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, p { margin: 0; }
main { flex: 1; }

/* ==========================================================
   CIRKELS: even groot, los of in clusters, bewegen van
   links naar rechts over het scherm, achter de foto's
   ========================================================== */
.circles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.c-group {
  position: absolute; left: calc(-4 * var(--circle-size));
  top: var(--top, 50%);
  width: calc(3 * var(--circle-size)); height: calc(3 * var(--circle-size));
  animation: drift var(--d, 100s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.c-group i {
  position: absolute;
  left: calc(var(--cx, 0) * var(--circle-size));
  top: calc(var(--cy, 0) * var(--circle-size));
  width: var(--circle-size); height: var(--circle-size);
  border-radius: 50%;
}
.c-group i.o { border: 1.5px solid var(--circle); }
.c-group i.g { background: var(--circle-grey); }
.c-group i.y { background: var(--circle-neon); }
@keyframes drift {
  0%   { transform: translateX(0) translateY(0) rotate(0deg); }
  50%  { transform: translateX(60vw) translateY(-18px) rotate(180deg); }
  100% { transform: translateX(120vw) translateY(0) rotate(360deg); }
}

/* ==========================================================
   TITEL: naam van rand tot rand, ondertitel eroverheen
   ========================================================== */
.masthead {
  position: relative; z-index: 1;
  padding: 0;
}
.title { position: relative; width: 100%; overflow: hidden; line-height: 0; }
.name {
  display: inline-block;   /* nodig om de echte tekstbreedte te meten */
  font-weight: 700;
  line-height: .72;        /* strak om de hoofdletters, zodat de naam bovenaan begint */
  letter-spacing: -0.045em;
  white-space: nowrap;
  margin-left: -0.04em;    /* de N precies tegen de rand */
  margin-top: -0.02em;
  user-select: none;
  /* korrel in de letters: de tekst is een venster op een gekorrelde vlakvulling */
  color: transparent;
  background-color: var(--name);
  background-image: var(--grain);
  -webkit-background-clip: text; background-clip: text;
}
.sub {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px;
  margin: clamp(10px, 1.2vw, 18px) 0 0 2.5vw;   /* direct onder de naam, uitgelijnd met de N */
  line-height: 1;
}
.sub span {
  display: grid; place-items: center;
  width: clamp(22px, 2.8vw, 40px); height: clamp(22px, 2.8vw, 40px);
  border: 1.5px solid var(--circle); border-radius: 50%;
  font-weight: 400;                              /* zelfde letter als de naam, dunner */
  font-size: clamp(11px, 1.4vw, 20px);
  color: var(--sub);
}
.sub span.gap { border: 0; width: clamp(8px, 1vw, 16px); }
.title { overflow: visible; }

/* ==========================================================
   DE MUUR: vrije plaatsing, kleine foto's, veel muur
   ========================================================== */
.wall {
  position: relative; z-index: 1;
  width: min(1400px, 100% - 32px);
  aspect-ratio: 2.1;
  margin: clamp(24px, 4vw, 56px) auto 24px;
}
.pin {
  position: absolute;
  left: var(--x); top: var(--y); width: var(--w);
  display: block;
  box-shadow:
    0 1px 2px rgba(0,0,0,.14),
    0 8px 20px rgba(60,55,30,.18),
    0 20px 40px rgba(60,55,30,.10);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pin .ph { display: block; overflow: hidden; aspect-ratio: var(--ar, 3 / 4); background: #ddd8c8; }
.pin img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(6px) saturate(.92);
  transform: scale(1.06);
  transition: filter .6s var(--ease), transform .6s var(--ease);
}
.pin:hover, .pin:focus-visible {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 16px 36px rgba(60,55,30,.22), 0 32px 60px rgba(60,55,30,.12);
  z-index: 5;
}
.pin:hover img, .pin:focus-visible img { filter: blur(0) saturate(1); transform: scale(1); }

/* ==========================================================
   WORK-PAGINA
   ========================================================== */
.work-head {
  position: relative; z-index: 1;
  text-align: center;
  padding: clamp(40px, 7vw, 88px) 24px 0;
}
.work-title {
  display: inline-block;
  font-weight: 700;
  font-size: clamp(44px, 7vw, 96px);
  letter-spacing: -0.03em; line-height: 1;
  border: 1px solid var(--sub);
  padding: .12em .3em .06em;
  color: transparent;
  background-color: var(--sub);
  background-image: var(--grain);
  -webkit-background-clip: text; background-clip: text;
}
/* De categorieën: elk woord in een dun kader, de kaders
   haken in elkaar en verspringen, zoals de Easterndaze-poster */
.cats {
  display: flex; flex-direction: column; align-items: center;
  gap: 0;
  margin: clamp(32px, 5vw, 64px) 0 clamp(40px, 6vw, 80px);
}
.cats a {
  font-weight: 700;
  font-size: clamp(22px, 3vw, 36px);
  letter-spacing: -0.015em; line-height: 1;
  color: var(--sub);
  border: 1px solid var(--sub);
  padding: .18em .4em .12em;
  margin-top: -1px;
  background: transparent;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.cats a:nth-child(1) { transform: translateX(-6%); }
.cats a:nth-child(2) { transform: translateX(14%); }
.cats a:nth-child(3) { transform: translateX(-10%); }
.cats a:nth-child(4) { transform: translateX(8%); }
.cats a:nth-child(5) { transform: translateX(-3%); }
.cats a:hover { background: rgba(255,255,255,.45); }
.has-cat .cats {
  flex-direction: row; flex-wrap: wrap; justify-content: center;
  gap: 0;
  margin: 28px 0 clamp(32px, 5vw, 56px);
}
.has-cat .cats a { font-size: 14px; color: var(--ink-soft); padding: .35em .7em; margin: 0 -1px 0 0; transform: none; }
.has-cat .cats a.is-active { color: var(--sub); background: rgba(255,255,255,.55); }
.has-cat .cats a:hover { color: var(--sub); }
.has-cat .work-title { border: 0; padding: 0; font-size: clamp(34px, 5vw, 64px); background-color: var(--name); }

.cat-panel { display: none; position: relative; z-index: 1; }
.cat-panel.is-active { display: block; animation: fadeIn .5s var(--ease) both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.grid {
  max-width: 1280px; margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 56px) 48px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 40px 28px;
}
.grid figure img, .grid figure video, .grid figure iframe {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 20px rgba(60,55,30,.12);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.grid figure:hover img { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 16px 32px rgba(60,55,30,.16); }
.grid figcaption { margin-top: 10px; text-align: center; font-size: 13px; color: var(--ink-soft); font-weight: 700; }
.placeholder { width: 100%; background: rgba(255,255,255,.5); border: 1px solid rgba(0,0,0,.06); display: grid; place-items: center; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-3-4 { aspect-ratio: 3 / 4; }
.play { width: 0; height: 0; border-left: 26px solid var(--sub); border-top: 15px solid transparent; border-bottom: 15px solid transparent; opacity: .6; }
[data-panel="film"] .grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
[data-panel="film"] .grid img, [data-panel="film"] .grid video, [data-panel="film"] .grid iframe { aspect-ratio: 16 / 9; }

/* ==========================================================
   VOET
   ========================================================== */
.foot {
  position: relative; z-index: 1;
  text-align: center;
  padding: 24px 24px 36px;
  font-size: 13px; font-weight: 700; color: var(--ink-soft);
}
.foot a:hover { color: var(--sub); }
.foot .dot { margin: 0 10px; }

/* ==========================================================
   MOBIEL
   ========================================================== */
@media (max-width: 700px) {
  .sub { margin-left: 3vw; }
  .wall { aspect-ratio: auto; width: 100%; padding: 16px 20px 32px; display: flex; flex-wrap: wrap; gap: 32px 14px; align-items: flex-start; }
  .pin { position: relative; left: auto; top: auto; width: var(--mw, 40%); }
  .pin:nth-child(8n+1) { --mw: 44%; }
  .pin:nth-child(8n+2) { --mw: 26%; margin-top: 48px; margin-left: -6%; }
  .pin:nth-child(8n+3) { --mw: 34%; margin-left: 10%; }
  .pin:nth-child(8n+4) { --mw: 40%; margin-top: 20px; }
  .pin:nth-child(8n+5) { --mw: 24%; margin-left: 12%; }
  .pin:nth-child(8n+6) { --mw: 42%; }
  .pin:nth-child(8n+7) { --mw: 38%; margin-top: 28px; }
  .pin:nth-child(8n+8) { --mw: 30%; margin-left: -8%; margin-top: 40px; }
  .pin img { filter: blur(4px); }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  [data-panel="film"] .grid { grid-template-columns: 1fr; }
  body { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}