:root{
  --papier:#ffffff;--inkt:#12120f;--stof:#8f8f88;--lijn:#dedcd6;--geel:#fee26d;
  --marge:4vw;--kop-boven:#fff;--kop-onder:#fff;--traag:cubic-bezier(.16,1,.3,1);--band:clamp(66px,6.4vw,92px);
}
*{margin:0;padding:0;box-sizing:border-box}
/* magnetisch: stop je met scrollen, dan klikt het dichtstbijzijnde beeld schermvullend vast */
html{scroll-snap-type:y mandatory;scroll-behavior:smooth}
body{background:var(--papier);color:var(--inkt);
  font-family:Moderat,-apple-system,Helvetica Neue,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block}
button,select,input{font-family:inherit}
button{cursor:pointer}

/* ---------- kop ---------- */
.kop{position:fixed;top:0;left:0;right:0;height:var(--band);z-index:70;mix-blend-mode:normal;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--marge);
  background:transparent}
.kop .merk{color:var(--kop-boven);transition:color .35s ease}
.kop .leus{color:var(--kop-boven);transition:color .35s ease}
.kop .burger span{background:var(--kop-boven);transition:background .35s ease}
.merk{font-weight:700;font-size:clamp(24px,2.3vw,36px);line-height:1;white-space:nowrap;
  letter-spacing:-.02em;text-decoration:none;display:block}
.rechtsboven{display:flex;align-items:center;gap:clamp(18px,3vw,44px)}
.leus{font-weight:500;font-size:clamp(14px,1.4vw,22px);letter-spacing:-.01em;
  transition:opacity .3s ease}
.leus b{font-weight:700}
/* zacht wisselen bij het overgaan naar een ander beeld */
.leus.wissel{opacity:0}
.burger{width:34px;height:22px;border:none;background:none;padding:0;position:relative}
.burger span{position:absolute;left:0;right:0;height:2px;
  transition:transform .35s var(--traag),opacity .25s ease}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:10px}
.burger span:nth-child(3){top:20px}
body.menu .burger span:nth-child(1){transform:translateY(10px) rotate(45deg)}
body.menu .burger span:nth-child(2){opacity:0}
body.menu .burger span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

/* ---------- rooster ---------- */
.roosterknop{border:none;background:none;padding:0;color:var(--kop-boven);
  font-family:inherit;font-weight:500;font-size:clamp(14px,1.4vw,22px);letter-spacing:-.01em;
  line-height:1;transition:color .35s ease,opacity .2s ease}
.roosterknop:hover{opacity:.6}
body.toont-rooster .roosterknop{text-decoration:underline;text-underline-offset:5px}
body.toont-rooster .kop{background:var(--papier);--kop-boven:var(--inkt)}

.rooster{position:fixed;inset:0;z-index:50;background:var(--papier);
  overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:none;
  padding:calc(var(--band) + 14px) 28px 28px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  align-content:start;align-items:start;
  opacity:0;pointer-events:none;transition:opacity .35s ease}
body.toont-rooster .rooster{opacity:1;pointer-events:auto}
.tegel{position:relative;overflow:hidden;cursor:pointer;background:#eeece7;
  line-height:0;height:0;padding-bottom:66.667%}
.tegel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--traag)}
@media(hover:hover){.tegel:hover img{transform:scale(1.015)}}
.tegel::after{content:'';position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(transparent,rgba(0,0,0,.42));
  opacity:0;transition:opacity .25s ease;pointer-events:none}
@media(hover:hover){.tegel:hover::after{opacity:1}}
.tegelinfo{position:absolute;left:24px;bottom:22px;right:24px;color:#fff;z-index:2;
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .25s ease,transform .25s var(--traag)}
@media(hover:hover){.tegel:hover .tegelinfo{opacity:1;transform:none}}
.tegelinfo{font-weight:400;font-size:clamp(13px,1.05vw,17px);line-height:1.3;letter-spacing:-.005em}
.tegelinfo b{font-weight:700}

@media(max-width:1000px){.rooster{grid-template-columns:repeat(2,1fr);padding-left:20px;padding-right:20px}}
@media(max-width:640px){
  .rooster{grid-template-columns:1fr;gap:10px}
  .tegelinfo{opacity:1;transform:none;color:#fff;padding:0}

  .tegel::after{display:none}
}

.menulaag{position:fixed;inset:0;z-index:65;background:var(--papier);
  display:flex;flex-direction:column;justify-content:center;gap:1vh;padding:0 var(--marge);
  opacity:0;pointer-events:none;transition:opacity .35s ease}
body.menu .menulaag{opacity:1;pointer-events:auto}
body.menu .kop{--kop-boven:var(--inkt)}
body.menu .roosterknop{opacity:0;pointer-events:none}
.menulaag a{font-weight:500;font-size:clamp(34px,7vw,86px);line-height:1.06;
  letter-spacing:-.035em;color:var(--inkt);text-decoration:none;width:max-content}
.menulaag a:hover{color:var(--stof)}

.melder{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:75;
  background:rgba(18,18,15,.86);color:#fff;padding:8px 14px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity .25s ease}
.melder.aan{opacity:1}
.melder.lang{padding:10px 16px}
/* Zonder server klopt alles stilletjes niet: je ziet de ingebakken volgorde
   en er wordt niets bewaard. Die melding mag dus niet na zeven tellen weg. */
.melder.blijft{bottom:0;left:0;right:0;transform:none;max-width:none;
  background:#8a2a16;color:#fff;padding:12px 18px;text-align:center;
  font-size:11px;letter-spacing:.14em;line-height:1.5}
.dev{position:fixed;right:16px;bottom:16px;z-index:70;border:1px solid var(--lijn);
  background:var(--papier);color:var(--stof);padding:6px 11px;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase}
.dev:hover{border-color:var(--inkt);color:var(--inkt)}
.dev{transition:opacity .5s ease,border-color .2s ease,color .2s ease}
.dev.weg{opacity:0;pointer-events:none}

/* ---------- kolom ---------- */
.doek{padding:0}
/* elk beeld vult het scherm; liggend werk wordt op smalle schermen bijgesneden */
.plek{height:100vh;position:relative;overflow:hidden;
  scroll-snap-align:start;scroll-snap-stop:always}
/* zelfde neutrale tint als de roostertegels, zodat een ladend beeld niet wit oplicht */
.kader{position:absolute;inset:0;cursor:default;background:#eeece7}
.kader img{width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;transition:opacity 1s var(--traag)}
.kader img.klaar{opacity:1}

.plek.actief,.plek.actief .kader{z-index:20}
.kader.ontbreekt{border:1px dashed var(--lijn);
  display:flex;align-items:center;justify-content:center}
.kader.ontbreekt{flex-direction:column;gap:8px;text-align:center;padding:16px}
.kader.ontbreekt b{font-weight:400;font-size:11px;letter-spacing:.12em;color:var(--inkt)}
.kader.ontbreekt span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--stof)}

/* projecttekst: één zin linksonder, blijft staan zolang het project actief is */

/* ---------- aanwijzer ---------- */
/* Op een beeld dat naar een project leidt vervangt dit de muisaanwijzer: een stip
   op het punt zelf, met ernaast wat er gebeurt als je klikt. Een los beeld gaat
   nergens heen en houdt gewoon de pijl. */
/* Waar de tekst verschijnt is die tekst de aanwijzer; een handje ernaast zou
   twee aanwijzers tegelijk geven. Waar geen tekst staat, staat er ook niets te
   klikken — behalve op het openingsbeeld, en daar zegt 'Scroll down' het al. */
body.wijst .kader{cursor:none}
.wijzer{position:fixed;top:0;left:0;z-index:47;pointer-events:none;
  color:var(--kop-onder);
  opacity:0;transition:opacity .22s ease,color .4s ease;
  will-change:transform}
.wijzer.aan{opacity:1}
/* de tekst zelf is de aanwijzer: naast het punt, op ooghoogte ermee */
.wijzer span{position:absolute;left:16px;top:0;transform:translateY(-50%);
  font-weight:500;font-size:clamp(12px,1.05vw,15px);
  letter-spacing:-.005em;line-height:1;white-space:nowrap}

/* geen muis, geen aanwijzer */
@media (hover: none), (pointer: coarse){
  .wijzer{display:none}
  body.wijst .kader{cursor:default}
}

/* pijlen op het beeld */
.pijl{position:absolute;top:50%;transform:translateY(-50%);z-index:12;
  width:clamp(44px,4.4vw,62px);height:clamp(44px,4.4vw,62px);
  border:none;border-radius:50%;background:rgba(255,255,255,.82);
  backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s ease,background .2s ease,transform .3s var(--traag)}
.plek.actief .pijl.aan{display:flex;opacity:.82}
.plek.actief .pijl.aan:hover{opacity:1}
.pijl:hover{background:#fff}
.pijl.links{left:clamp(14px,2.2vw,32px)}
.pijl.rechts{right:clamp(14px,2.2vw,32px)}
.pijl:hover.links{transform:translateY(-50%) translateX(-3px)}
.pijl:hover.rechts{transform:translateY(-50%) translateX(3px)}
.pijl svg{width:38%;height:38%;stroke:var(--inkt);stroke-width:2.1;fill:none}

/* ---------- focuspunt ---------- */
/* Met f schakel je de focusmodus aan: klikken legt vast welk deel van het beeld
   in beeld moet blijven wanneer het wordt bijgesneden. */
body.focusmodus .kader{cursor:crosshair}
body.focusmodus .pijl,body.focusmodus .stippen{opacity:.25}
.focusstip{position:absolute;z-index:30;width:18px;height:18px;margin:-9px 0 0 -9px;
  border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.45);
  pointer-events:none;display:none}
.focusstip::after{content:'';position:absolute;inset:6px;border-radius:50%;background:#fff}
.focusstip.eigen{border-color:var(--geel)}
.focusstip.eigen::after{background:var(--geel)}
body.focusmodus .focusstip{display:block}

/* voortgang binnen een project */
.stippen{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(16px,2.4vh,28px);
  z-index:12;display:none;gap:7px}
.plek.actief .stippen.aan{display:flex}
.stippen i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(0,0,0,.16);transition:background .3s ease}
.stippen i.nu{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.meer{padding:0 var(--marge) 16vh;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--stof)}

/* venster waarin je het focuspunt van één beeld aanklikt */
.focuslaag{position:fixed;inset:0;z-index:110;background:rgba(18,18,15,.94);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:24px}
.focuslaag .hint{color:var(--stof);margin:0}
.focusdoek{position:relative;flex:0 1 auto;max-width:min(1100px,90vw);max-height:72vh;
  display:flex;align-items:center;justify-content:center}
.focusdoek img{max-width:100%;max-height:72vh;width:auto;height:auto;
  display:block;cursor:crosshair}
.focusdoek .focusstip{display:block}
.focusknoppen{display:flex;gap:10px}
.focusknoppen .knop{border-color:var(--papier);color:var(--papier)}
.focusknoppen .knop:hover{background:var(--papier);color:var(--inkt)}
.focusknoppen .knop.vol{background:var(--papier);color:var(--inkt)}

/* ---------- dev-paneel ---------- */
.paneel{position:fixed;inset:0;z-index:100;background:var(--papier);scroll-snap-type:none;
  display:none;flex-direction:column}
.paneel.aan{display:flex}
.pkop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;
  border-bottom:1px solid var(--lijn)}
.pkop h3{font-weight:500;font-size:13px;letter-spacing:.02em;margin-right:12px}
.tab{border:1px solid var(--lijn);background:none;padding:7px 13px;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--stof)}
.tab.actief{border-color:var(--inkt);color:var(--inkt)}
.pkop .rechts{margin-left:auto;display:flex;gap:8px}
.pkop .waar{font-size:10px;letter-spacing:.06em;color:var(--stof);margin-left:14px}
.pkop .waar.los{color:var(--inkt)}
.pkop .knop[disabled]{opacity:.5;cursor:default}
.pkop input,.pkop select{border:1px solid var(--lijn);background:var(--papier);
  font-size:12px;padding:7px 9px;color:var(--inkt)}
.plijf{flex:1;overflow-y:auto;padding:18px 16px 80px}

.tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:9px}
.tg{position:relative;aspect-ratio:1;background:#e9e8e4;overflow:hidden;cursor:pointer}
.tg img{width:100%;height:100%;object-fit:cover}
.tg .nr{position:absolute;top:0;left:0;background:var(--inkt);color:var(--papier);
  font-size:9px;padding:3px 6px;letter-spacing:.08em}
.tg .naam{position:absolute;left:0;right:0;bottom:0;padding:5px 6px;font-size:9px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.75));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg.solo .nr{background:var(--geel);color:var(--inkt)}
.tg.gekozen{outline:3px solid var(--geel);outline-offset:-3px}
.tg .fstip{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:var(--geel);box-shadow:0 0 0 1px rgba(0,0,0,.5);pointer-events:none;z-index:3}
.tg.sleep{opacity:.3}
.tg.over{outline:2px solid var(--inkt);outline-offset:-2px}
.tg .knopjes{position:absolute;top:0;right:0;display:none;gap:2px;padding:3px}
.tg:hover .knopjes{display:flex}
.tg .knopjes button{border:none;background:rgba(18,18,15,.8);color:#fff;
  font-size:9px;padding:3px 5px;letter-spacing:.06em}
.tg .knopjes button:hover{background:var(--geel);color:var(--inkt)}

.groepkop{display:flex;align-items:baseline;gap:12px;margin:26px 0 10px;
  padding-bottom:7px;border-bottom:1px solid var(--lijn)}
.groepkop:first-child{margin-top:0}
.groepkop b{font-weight:500;font-size:13px}
.groepkop span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--stof)}
.groepkop button{margin-left:auto;border:1px solid var(--lijn);background:none;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;color:var(--stof)}
.groepkop button:hover{border-color:var(--inkt);color:var(--inkt)}

.knop{border:1px solid var(--inkt);background:none;padding:8px 14px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--inkt)}
.knop:hover{background:var(--inkt);color:var(--papier)}
.knop.vol{background:var(--inkt);color:var(--papier)}
.knop.vol:hover{background:var(--geel);color:var(--inkt);border-color:var(--geel)}
.leeg{grid-column:1/-1;padding:50px 0;text-align:center;color:var(--stof);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.weg{position:fixed;left:-9999px;width:1px;height:1px;opacity:0}
.melding{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border:1px solid var(--inkt);padding:12px 14px;margin-bottom:18px;font-size:12px;line-height:1.5}
.melding b{font-weight:500}
.melding button{margin-left:auto;flex:0 0 auto}
.tg.mist{background:repeating-linear-gradient(45deg,#eceae5,#eceae5 8px,#e4e1db 8px,#e4e1db 16px)}
.tg .vraag{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--stof)}
.hint{font-size:11px;color:var(--stof);letter-spacing:.04em;margin-bottom:14px}

@media(max-width:820px){
  :root{--marge:5vw;--band:62px}

  /* Naast het merk is op een smal scherm geen plaats voor een bijschrift: van de
     56 projectnamen passen er zelfs op 11px vier niet. Het verhuist daarom naar
     de onderkant van het beeld, waar het de volle breedte heeft en mag afbreken. */
  .leus{position:fixed;left:var(--marge);right:var(--marge);
    bottom:clamp(20px,4vh,40px);z-index:46;
    max-width:32ch;color:var(--kop-onder);
    font-size:15px;line-height:1.32;letter-spacing:-.005em;
    /* het is een bijschrift, geen knop: het mag nooit een tik opvangen van wat
       eronder ligt */
    pointer-events:none}

  /* In het overzicht hoort dit bijschrift niet thuis: daar draagt elke tegel zijn
     eigen titel. Het bleef als losse zin onder over het rooster zweven. */
  body.toont-rooster .leus{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-snap-type:none;scroll-behavior:auto}.kader{transition:none}}

/* De kiezer voor het staande beeld. Zelfde opzet als de focuslaag, maar met een
   raster van de beelden uit dezelfde opdracht in plaats van één groot beeld. */
.kieslaag{position:fixed;inset:0;z-index:110;background:rgba(18,18,15,.94);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:24px}
.kieslaag .hint{color:var(--stof);margin:0;max-width:60ch;text-align:center}
/* grid-auto-rows staat er met opzet in plaats van aspect-ratio op de tegel. Dit
   raster zit in een flexkolom met max-height: bij veel beelden verdeelt de
   rijverdeling dan de beschikbare hoogte over alle rijen, en werden 132 rijen
   van 174px samengeperst tot streepjes van 15px waar de beelden overheen vielen.
   Een vaste rijhoogte kan niet meegeven; align-content:start houdt ze bovenaan. */
.kiesdoek{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  grid-auto-rows:174px;align-content:start;
  gap:10px;width:min(1100px,92vw);max-height:70vh;overflow-y:auto;padding:2px}
/* Een deel van de beelden is een transparante png met wit lijnwerk — de
   vormstudies van het kasteel. Op wit verdwenen ze, op zwart viel de uitsnede
   vaak op een leeg stuk. Daarom een donkergrijze ondergrond en 'contain': je
   ziet het hele beeld in plaats van een toevallige uitsnede, en wit lijnwerk
   leest. */
.kiestegel{position:relative;padding:0;border:2px solid transparent;background:#2a2a28;
  cursor:pointer;height:100%;overflow:hidden;border-radius:2px}
.kiestegel img{object-fit:contain}
.kiestegel img{width:100%;height:100%;object-fit:cover;display:block}
.kiestegel span{position:absolute;left:0;bottom:0;background:rgba(18,18,15,.8);
  color:var(--papier);font-size:10px;letter-spacing:.06em;padding:3px 6px}
.kiestegel:hover{border-color:var(--stof)}
.kiestegel.gekozen{border-color:var(--papier)}
.kiestegel.gekozen::after{content:'';position:absolute;inset:0;
  box-shadow:inset 0 0 0 2px var(--papier)}
.kiestegel.gewoon{border-color:rgba(255,255,255,.35)}

/* Het scrollteken op het openingsscherm.
   Een schermvullend beeld geeft geen enkele hint dat er meer onder zit — zeker
   op een telefoon, waar de reel niet draait en er dus ook geen beweging is die
   dat verraadt. Het teken wijst de weg en verdwijnt zodra je scrollt: dan is de
   boodschap overgekomen en moet het beeld het alleen doen. */
/* Het scrollteken: een haarlijn die uitloopt op een punt.
   Eerder stond hier een donker schijfje met een pijl — functioneel, maar het
   leest als een knop uit een of andere interface en niet als iets van soon.
   Deze versie is een streep van één pixel met een chevron eraan; hij neemt de
   kleur over die de pagina per beeld meet, dezelfde die de kop gebruikt, zodat
   hij op een licht beeld donker is en op een donker beeld wit. */
.scrolteken{position:absolute;left:50%;bottom:clamp(20px,4.5vh,40px);transform:translateX(-50%);
  z-index:30;width:30px;height:46px;padding:0;border:0;background:none;
  color:var(--kop-onder);cursor:pointer;
  display:flex;align-items:flex-start;justify-content:center;
  opacity:1;transition:opacity .4s ease,color .35s ease}
/* de verticale haarlijn */
/* Een smalle schaduw eromheen. Zonder dat verdwijnt een witte haarlijn op een
   licht beeld — en de reel wisselt van bijna zwart naar bijna wit. */
.scrolteken::before{content:'';position:absolute;top:0;left:50%;width:1px;height:34px;
  background:currentColor;opacity:.9;transform:translateX(-50%);
  box-shadow:0 0 3px rgba(0,0,0,.5)}
/* het punt eronder: twee lijnen onder 45 graden */
.scrolteken::after{content:'';position:absolute;top:28px;left:50%;width:9px;height:9px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  opacity:.9;transform:translate(-50%,0) rotate(45deg);
  filter:drop-shadow(0 0 2px rgba(0,0,0,.55))}
.scrolteken svg{display:none}
.scrolteken:hover{opacity:.55}
/* Zachte wenk omlaag. Bij 'beperk beweging' staat hij stil. */
.scrolteken{animation:scrolwenk 2.6s ease-in-out infinite}

@keyframes scrolwenk{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}
@media(prefers-reduced-motion:reduce){
  .scrolteken{animation:none}
}

/* Lucht rond het openingsbeeld op een telefoon.
   Schermvullend bijsnijden kost daar te veel: bij de kever vielen de voelsprieten
   buiten beeld. Op een smal scherm staat het beeld daarom helemaal in het kader,
   met een rand eromheen. Die rand krijgt via zetRandkleur() de kleur van de foto,
   zodat het één vlak blijft. */
@media(max-width:820px){
  /* Het openingsbeeld vult het scherm. De lucht rond het onderwerp zit in het
     beeld zelf — daarvoor is de staande uitsnede gemaakt, die tot aan alle vier
     de randen doorloopt. Eerder stond het met 'contain' in een kader op een vlak
     van de gemeten randkleur; bij een verlopende achtergrond zag je dan de
     rechthoek van de foto liggen. */
  .plek.opening .kader img{object-fit:cover;padding:0}
}

/* Beelden die al in de kolom staan, in de tabbladen Projecten en Solo.
   Half doorzichtig, met een vinkje: zo zie je in één oogopslag wat je al
   gebruikt hebt en voeg je niets twee keer toe. Je kan ze nog gewoon aanklikken
   — dit is een aanwijzing, geen slot. */
.tg.inkolom{opacity:.45}
.tg.inkolom:hover{opacity:.8}
.tg.inkolom::before{content:'✓';position:absolute;top:6px;right:6px;z-index:3;
  width:18px;height:18px;border-radius:50%;background:rgba(18,18,15,.72);color:#fff;
  font-size:11px;line-height:18px;text-align:center}