/* Eigen opmaak van het thema dda: wordt na site.css geladen (zie thema.json, sleutel css) */
/* Alle collecties: heel subtiel fotomozaïek als watermerk */
.bento__all{position:relative;overflow:hidden;isolation:isolate}
.bento__all>*:not(.bento__mosaic){position:relative;z-index:1}
.bento__mosaic{position:absolute;inset:0;z-index:0;display:flex;pointer-events:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.bento__mosaic img{flex:1 1 0;min-width:0;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);opacity:.15;mix-blend-mode:luminosity;transform:none}
@media (max-width:700px){.bento__mosaic img:nth-child(n+7){display:none}}

/* 404-pagina */
.nf .page-head__lead{margin-bottom:1.6rem}
.nf__search{position:relative;display:flex;gap:10px;max-width:34rem;margin:0 auto 1.8rem}
.nf__field{position:relative;flex:1 1 auto;min-width:0;display:block}
.nf__field>.icon{position:absolute;left:1.1em;top:50%;transform:translateY(-50%);width:1.1em;height:1.1em;opacity:.6;pointer-events:none}
.nf__search input{width:100%;min-width:0;height:50px;padding:0 1.2em 0 2.8em;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:inherit}
.nf__search input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 18%,transparent)}
.nf__tiles{list-style:none;margin:0 auto 2rem;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:40rem;text-align:left}
.nf__tiles a{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:16px 18px;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s}
.nf__tiles a:hover{transform:translateY(-3px)}
.nf__tiles a>.icon:first-child{grid-row:1/3;width:1.5em;height:1.5em;color:var(--teal)}
.nf__tiles strong{font-family:var(--font-head);font-size:1.1rem}
.nf__tiles small{color:var(--muted)}
.nf__go{grid-row:1/3;grid-column:3;width:1.2em;height:1.2em;opacity:.5}
.nf__lead{font-weight:600;margin:0 0 .8rem;color:var(--muted)}
.nf__works{list-style:none;margin:0 auto 2rem;padding:0;display:flex;gap:12px;justify-content:center;max-width:34rem}
.nf__works li{flex:1 1 0;min-width:0}
.nf__works img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;display:block;box-shadow:var(--shadow);transition:transform .3s var(--ease)}
.nf__works a:hover img{transform:scale(1.03)}
@media (max-width:560px){.nf__tiles{grid-template-columns:minmax(0,1fr)}.nf__search{flex-direction:column}.nf__search .btn{width:100%}}
.nf{position:relative;overflow:hidden}
.nf .wrap{position:relative;z-index:2}
.nf__p{display:none;z-index:1}
.nf__p img{aspect-ratio:var(--r)}
@media (min-width:1100px){
  .nf__p{display:block;width:clamp(100px,10vw,170px)}
  .nf__p1{left:2%;top:3%;--rot:-6deg;--fd:0s}
  .nf__p2{left:10%;top:27%;--rot:4deg;--fd:-2s;width:clamp(90px,8.5vw,140px)}
  .nf__p3{left:1.5%;top:50%;--rot:-3deg;--fd:-4s;width:clamp(110px,11vw,185px)}
  .nf__p4{left:9%;top:75%;--rot:6deg;--fd:-1s;width:clamp(95px,9vw,150px)}
  .nf__p5{right:9%;top:4%;--rot:5deg;--fd:-3s;width:clamp(95px,9vw,150px)}
  .nf__p6{right:1.5%;top:28%;--rot:-5deg;--fd:-5s;width:clamp(110px,11vw,180px)}
  .nf__p7{right:10%;top:53%;--rot:3deg;--fd:-2.5s;width:clamp(90px,8.5vw,140px)}
  .nf__p8{right:2%;top:76%;--rot:-6.5deg;--fd:-1.5s}
}
@media (min-width:1400px){
  .nf__p{display:block;width:clamp(130px,15vw,270px)}
  .nf__p1{left:1.5%;top:1%;--rot:-6deg;--fd:0s}
  .nf__p2{left:7.5%;top:21%;--rot:4deg;--fd:-2s;width:clamp(115px,12.5vw,225px)}
  .nf__p3{left:1%;top:42%;--rot:-3deg;--fd:-4s;width:clamp(135px,16vw,290px)}
  .nf__p4{left:8%;top:65%;--rot:6deg;--fd:-1s;width:clamp(120px,13vw,235px)}
  .nf__p5{right:7.5%;top:2%;--rot:5deg;--fd:-3s;width:clamp(120px,13vw,235px)}
  .nf__p6{right:1%;top:22%;--rot:-5deg;--fd:-5s;width:clamp(135px,16vw,290px)}
  .nf__p7{right:8%;top:45%;--rot:3deg;--fd:-2.5s;width:clamp(115px,12.5vw,225px)}
  .nf__p8{right:1.5%;top:66%;--rot:-6.5deg;--fd:-1.5s}
}
.nf__works{max-width:44rem;flex-wrap:wrap}
.nf__works li{flex:1 1 calc(20% - 10px);min-width:110px}
