/* ============ Projectenpagina (actueel + archief) ============ */
.pj-filters{margin-bottom:14px}
.pj-filters:last-of-type{margin-bottom:32px}
.pj-filter-label{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400);margin-bottom:10px}
.pj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:1024px){.pj-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.pj-grid{grid-template-columns:1fr}}

.pj-card{--pj-glass:var(--pj-accent,var(--ink-300));position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,color-mix(in srgb,var(--pj-glass) 16%,transparent) 0%,color-mix(in srgb,var(--pj-glass) 4%,transparent) 55%,transparent 100%),rgba(255,255,255,.52);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);border:1px solid color-mix(in srgb,var(--pj-glass) 32%,rgba(255,255,255,.72));border-radius:var(--radius-lg);overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),var(--shadow-md)}
@supports not (backdrop-filter:blur(1px)){.pj-card{background:linear-gradient(180deg,color-mix(in srgb,var(--pj-glass) 16%,transparent) 0%,color-mix(in srgb,var(--pj-glass) 4%,transparent) 55%,transparent 100%),rgba(255,255,255,.86)}}
.pj-card>*{position:relative;z-index:1}
.pj-card:focus-visible{outline:2px solid var(--ink-900);outline-offset:3px}
.pj-visual{aspect-ratio:16/10;background:rgba(255,255,255,.18);overflow:hidden}
.pj-visual img{display:block;width:100%;height:100%;object-fit:cover}
.pj-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 26px}
.pj-typeband{display:flex;align-items:center;gap:10px;padding:11px 24px}
.pj-typeband--fill{background:color-mix(in srgb,var(--pj-accent) 14%,rgba(255,255,255,.5));border-bottom:1px solid color-mix(in srgb,var(--pj-accent) 30%,transparent)}
.pj-typeband--outline{background:rgba(255,255,255,.4);border-bottom:1px dashed color-mix(in srgb,var(--pj-accent) 38%,transparent)}
.pj-typeicon{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;color:var(--ink-900)}
.pj-typeband--fill .pj-typeicon{background:color-mix(in srgb,var(--pj-accent) 55%,rgba(255,255,255,.9))}
.pj-typeband--outline .pj-typeicon{background:#fff;border:1.5px solid var(--pj-accent)}
.pj-typename{font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-900)}
.pj-code{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--ink-900);background:rgba(255,255,255,.72);border:1px solid color-mix(in srgb,var(--pj-accent) 35%,rgba(255,255,255,.72));text-decoration:none;transition:background .18s ease,gap .18s ease}
.pj-code svg{flex-shrink:0;opacity:.7}
.pj-code:hover{background:#fff;gap:8px}
.pj-code:hover svg{opacity:1}
.pj-code--static,.pj-code--static:hover{background:none;gap:5px;cursor:default}
.pj-pill{--pj-pill-tint:color-mix(in oklch,var(--pj-accent),white 82%)}
.pj-pill:not(.active){background:var(--pj-pill-tint);color:var(--ink-800)}
.pj-pill--outline:not(.active){background:#fff;box-shadow:inset 0 0 0 1.5px color-mix(in oklch,var(--pj-accent),white 40%)}
.pj-pill svg{display:block;flex-shrink:0}
.pj-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.pj-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-900);line-height:1.4}
.pj-badge svg{display:block;flex-shrink:0}
.pj-badge--fill{background:color-mix(in oklch,var(--pj-accent),white 76%);border:1px solid color-mix(in oklch,var(--pj-accent),white 52%)}
.pj-badge--outline{background:#fff;border:1.5px solid var(--pj-accent)}
.pj-badge--muted{background:var(--ink-100);border:1px solid var(--ink-200);color:var(--ink-700)}
.pj-badge--plain{background:transparent;border:1px solid var(--ink-200);color:var(--ink-500);font-weight:600;letter-spacing:.04em}
.pj-client{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.pj-client-label{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400)}
.pj-client-name{font-size:13px;font-weight:600;color:var(--ink-700)}
.pj-card h3{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.25;margin:0;color:var(--ink-900);text-wrap:pretty}
.pj-desc{font-size:14px;line-height:1.55;color:var(--ink-500);margin:10px 0 0}
.pj-tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:16px 0 0;border-top:1px solid color-mix(in srgb,var(--pj-glass,var(--ink-100)) 26%,rgba(14,19,36,.09))}
.pj-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;font-size:11px;font-weight:600;line-height:1.4;color:var(--ink-700);background:rgba(255,255,255,.5);border:1px solid rgba(14,19,36,.07);border-radius:999px}
.pj-tag .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.pj-people{margin-top:auto;padding-top:16px}
.pj-people-inner{padding-top:16px;border-top:1px solid color-mix(in srgb,var(--pj-glass,var(--ink-100)) 26%,rgba(14,19,36,.09))}
.pj-people-label{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400);margin-bottom:9px}
.pj-people-list{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.pj-person{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;font-size:12.5px;font-weight:600;line-height:1.4;white-space:nowrap;color:var(--ink-800);background:rgba(255,255,255,.5);border:1px solid rgba(14,19,36,.07);border-radius:999px;text-decoration:none}
.pj-person svg{color:#0A66C2;flex-shrink:0}
.pj-rol{display:inline-grid;place-items:center;min-width:20px;height:16px;padding:0 4px;border-radius:5px;font-size:9.5px;font-weight:800;letter-spacing:.04em;color:var(--ink-700);background:var(--ink-100);border:1px solid var(--ink-200)}
a.pj-person{transition:border-color .18s ease,color .18s ease,background .18s ease}
a.pj-person:hover{color:#0A66C2;border-color:color-mix(in oklch,#0A66C2,white 60%);background:color-mix(in oklch,#0A66C2,white 92%)}
.pj-link{position:relative;margin-top:22px;align-self:flex-end;display:inline-flex;align-items:center;gap:10px;padding:5px 5px 5px 16px;border-radius:999px;background:color-mix(in oklch,var(--pj-accent,var(--ink-200)),white 90%);border:1px solid color-mix(in oklch,var(--pj-accent,var(--ink-300)),white 62%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);color:var(--ink-800);font-family:var(--font-display);font-size:13.5px;font-weight:600;letter-spacing:.005em;white-space:nowrap;text-decoration:none;transition:background .22s ease,border-color .22s ease,color .22s ease}
.pj-link-ico{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:color-mix(in oklch,var(--pj-accent,var(--ink-700)),white 25%);color:#fff;transition:background .22s ease}
.pj-link-ico svg{transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.pj-link:hover{background:color-mix(in oklch,var(--pj-accent,var(--ink-200)),white 82%);border-color:color-mix(in oklch,var(--pj-accent,var(--ink-300)),white 45%);color:var(--ink-900)}
.pj-link:hover .pj-link-ico{background:var(--pj-accent,var(--ink-700))}
.pj-link:hover .pj-link-ico svg{transform:translateX(2px)}
.pj-link:focus-visible{outline:2px solid var(--ink-900);outline-offset:3px}
.pj-title-link{color:inherit;text-decoration:none}.pj-title-link:hover{text-decoration:underline;text-underline-offset:3px}.pj-visual>a{display:contents}
.pj-empty{color:var(--ink-500);font-size:15px;margin:8px 0 0}

/* ---- Archief ---- */
.pj-archive{background:var(--paper-2);border-top:1px solid var(--ink-200)}
.pj-archive-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
.pj-archive-head h2{font-size:clamp(30px,3.4vw,42px);margin-top:18px}
.pj-archive-lead{color:var(--ink-500);font-size:16px;line-height:1.6;margin:14px 0 0;max-width:560px}
.pj-archive-lead a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in oklch,currentColor 35%,transparent);text-underline-offset:3px;font-weight:600;transition:color .18s ease,text-decoration-color .18s ease}
.pj-archive-lead a:hover{color:var(--ink-900);text-decoration-color:currentColor}
.pj-archive-toggle{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--ink-900);background:#fff;border:1px solid var(--ink-200);border-radius:999px;cursor:pointer;transition:background .2s,border-color .2s}
.pj-archive-toggle:hover{background:var(--paper);border-color:var(--ink-300)}
.pj-card--archive{--pj-glass:var(--ink-400)}
.pj-card--archive .pj-visual img{filter:grayscale(1);opacity:.7}
.pj-card--archive h3{color:var(--ink-700)}
.pj-card--archive .pj-tag{background:var(--ink-100);color:var(--ink-500)}
.pj-card--archive .pj-person{color:var(--ink-700);background:#fff;border-color:var(--ink-200)}
.pj-card--archive .pj-link{background:var(--ink-100);border-color:var(--ink-200);color:var(--ink-700)}.pj-card--archive .pj-link-ico{background:var(--ink-400)}