/* Project card (Projecten page and kc/recent-projects). Values from the Work design; .vis/.mock/etc. are scoped to .proj
   because .vis also exists in the B03/B04 media frame with different values. */
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(520px,100%),1fr));gap:20px}
.proj{display:flex;flex-direction:column;overflow:hidden}
.proj.wide{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr))}
.proj .vis{position:relative;height:300px;overflow:hidden;background:color-mix(in oklch,var(--tint) 16%,var(--bg3));border-bottom:1px solid var(--line)}
.proj.wide .vis{height:auto;min-height:420px;border-bottom:0;border-right:1px solid var(--line)}
.proj .vis::before{content:"";position:absolute;inset:0;background-image:linear-gradient(color-mix(in oklch,var(--tint) 22%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklch,var(--tint) 22%,transparent) 1px,transparent 1px);background-size:40px 40px;opacity:.5}
.proj .mock{position:absolute;left:12%;right:-6%;top:16%;bottom:-8%;border-radius:12px;background:var(--bg2);border:1px solid var(--line2);box-shadow:0 30px 60px -30px var(--drop);transition:transform 400ms cubic-bezier(.2,.7,.2,1)}
.proj:hover .mock{transform:translateY(-6px)}
.proj .mock-bar{display:flex;gap:5px;padding:10px 12px;border-bottom:1px solid var(--line)}
.proj .mock-bar span{width:7px;height:7px;border-radius:50%;background:var(--line3);flex:none}
.proj .mock.shot{overflow:hidden;display:flex;flex-direction:column}
.proj .mock.shot .mock-bar{align-items:center;padding:8px 12px}
.proj .mock.shot img{display:block;width:100%;height:auto;flex:1 1 auto;min-height:0;object-fit:cover;object-position:left top}
/* Stacked wide card (single column, below 1000px): a fixed 420px frame is far taller than a narrow screenshot, so size it by ratio. */
@media (max-width:999px){.proj.wide .vis{min-height:0;aspect-ratio:16/10}}
.proj.wide .mock.shot{left:9%;right:-14%;top:12%}
.proj .mb{display:block;border-radius:4px;background:var(--line2)}
.proj .mt{display:block;border-radius:4px;background:var(--tint)}
.proj .phone{position:absolute;left:50%;top:14%;width:150px;height:300px;margin-left:-75px;border-radius:26px;background:var(--bg2);border:1px solid var(--line2);box-shadow:0 30px 60px -30px var(--drop);padding:16px 12px;display:flex;flex-direction:column;gap:8px;transition:transform 400ms cubic-bezier(.2,.7,.2,1)}
.proj:hover .phone{transform:translateY(-6px)}
.proj .ph-hint{position:absolute;left:16px;bottom:14px;font-size:11px;color:var(--muted)}
/* wireframe (inline styles of the design, as classes with identical values) */
.wf{padding:22px;display:flex;flex-direction:column;gap:12px}
.wf-nav{display:flex;justify-content:space-between}
.wf-logo{width:60px;height:10px}
.wf-links{display:flex;gap:8px}
.wf-links .mb{width:30px;height:6px}
.proj .wf-h1{width:64%;height:18px;margin-top:18px;background:var(--text);opacity:.85}
.proj .wf-h1.b{width:44%;margin-top:0}
.proj .wf-p{width:56%;height:7px}
.proj .wf-btn{width:92px;height:26px;border-radius:7px;margin-top:4px}
.wf-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.wf-cards span{height:70px;border-radius:8px;background:var(--bg3);border:1px solid var(--line)}
.proj .pa{width:40%;height:6px;align-self:center;margin-bottom:10px}
.proj .pb{width:70%;height:12px;background:var(--text);opacity:.85}
.proj .pc{width:50%;height:6px}
.phone .pd{height:90px;border-radius:12px;background:var(--tint);opacity:.85;margin-top:6px}
.phone .pe{height:34px;border-radius:9px;background:var(--bg3);border:1px solid var(--line)}
/* body */
.proj-body{padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:14px;justify-content:center}
.proj-meta{margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.proj-title{margin:0;font-size:28px;letter-spacing:-.035em;font-weight:600;line-height:1.1}
.proj.wide .proj-title{font-size:clamp(32px,3.6vw,48px)}
.proj-text{margin:0;color:var(--muted);max-width:32em}
.proj-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.proj-links{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:6px}
.proj-links .tlink-muted{color:var(--muted)}
.tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--line2);font-size:12px;color:var(--muted);font-family:"Geist Mono",ui-monospace,monospace}
@media (prefers-reduced-motion:reduce){.proj .mock,.proj .phone{transition:none}}