/* Basis: kleuren, lettertypen, algemene opmaak */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* Layout: rustige witte galerij, vierkante tegels met veel witruimte; titel alleen bij hover */
:root{
  --bg:#ffffff; --fg:#1d2422; --muted:#5c6461; --line:#e6e3dd;
  --accent:#cc4c00; --accent-ink:#ffffff; --plus:#f27d1e; --logo:#c82058;
  --c1:#cc4c00; --c2:#f27d1e; --c3:#f8a457; --c4:#fccb9b; --c5:#cc4c00; --c6:#f27d1e;
  --t1:#fdf1e6; --t2:#fdf1e6; --t3:#fdf1e6; --t4:#fdf1e6; --t5:#fdf1e6; --t6:#fdf1e6;
  --veil:rgba(235,235,235,.55); --bar:#6e6e6e; --bar-ink:#ffffff;
  --font:Verdana,Geneva,sans-serif; --display:'Abril Fatface',Georgia,serif; --ui:Verdana,Geneva,sans-serif;
  color-scheme:light;
}
html,body{background:var(--bg);color:var(--fg)}
body{font-family:var(--font);font-size:15px;line-height:1.55;padding-inline:clamp(16px,4vw,48px);padding-block:0 64px}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto}
header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-block:28px;border-bottom:0;position:relative}
header::after{content:'';position:absolute;left:0;right:0;bottom:5%;height:6px;background:linear-gradient(90deg,var(--c1) 0 25%,var(--c2) 0 50%,var(--c4) 0 75%,var(--logo) 0)}
.dots{display:inline-grid;grid-template-columns:repeat(2,12px);gap:6px;margin:56px 0 0}
.dots i{width:12px;height:12px;border-radius:50%;display:block}
.dots i:nth-child(1){background:var(--c1)}.dots i:nth-child(2){background:var(--c2)}.dots i:nth-child(3){background:var(--c3)}.dots i:nth-child(4){background:var(--c4)}.dots i:nth-child(5){background:var(--c5)}.dots i:nth-child(6){background:var(--logo)}
.logo{display:block;line-height:0}
.logo img{width:72px;height:72px;display:block}
.logo span{color:var(--plus)}
header nav{display:flex;flex-wrap:wrap;gap:28px;font-family:var(--display);font-size:19px}
header nav a{text-decoration:none;padding-block:10px}
header nav a[aria-current]{color:var(--logo);border-bottom:3px solid var(--logo)}
h1{font-family:var(--display);font-size:clamp(32px,4.5vw,42px);font-weight:400;margin:16px 0 10px;text-wrap:balance}
.intro{color:var(--muted);max-width:40em;margin:0 0 32px}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:56px}
.filters.themes{margin-bottom:18px;gap:8px}
.filters.themes button{min-height:36px;padding:0 14px;font-size:13px;font-weight:700;background:var(--tt);border-color:var(--tt);color:var(--fg)}
.filters.themes button[aria-pressed="true"]{background:var(--tc);border-color:var(--tc);color:var(--ti,#fff)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.search{margin:0 0 18px;max-width:560px}
.search input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:13px 18px;border:1.5px solid var(--line);border-radius:999px;background:var(--bg);color:var(--fg)}
.search input:focus{outline:none;border-color:var(--accent)}
.none{color:var(--muted);margin:0 0 40px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.tags button{font-family:var(--ui);font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;border:0;background:var(--t2);color:var(--fg);cursor:pointer}
.filters button{font-family:var(--ui);font-size:14px;font-weight:700;min-height:42px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--tc,var(--accent));border-color:var(--tc,var(--accent));color:#fff}
.filters button:focus-visible,.tile:focus-visible,.back:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:48px 40px}
.tile{position:relative;display:block;aspect-ratio:1/1;max-width:100%;overflow:hidden;background:var(--bg);cursor:pointer;border:0;padding:0}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s ease-in-out}
.tile:hover img,.tile:focus-visible img{opacity:.8}
.tile .veil{display:none}
.tile .bar{position:absolute;left:0;right:0;bottom:0;background:rgba(255,255,255,.6);color:#333;padding:14px 8px;font-family:var(--display);font-size:26px;font-weight:400;line-height:24px;text-align:center;opacity:0;transition:opacity .6s ease-out}
.tile:hover .bar,.tile:focus-visible .bar{opacity:1}
@media (hover:none){.tile .bar{opacity:0}.tile.zicht .bar{opacity:1}}
@media (prefers-reduced-motion:reduce){.tile img,.tile .bar{transition:none}}