/* projects page: filters + bento grid sized by weight */
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin:clamp(1.9rem,4vw,3.5rem) 0 1.4rem}
.pgrid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-flow:dense;grid-auto-rows:minmax(9.4rem,auto);gap:14px;padding-bottom:clamp(3.75rem,9vw,8.1rem)}
.pgrid.flash .pj{animation:pop .5s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translateY(16px)}}
.pj.off{display:none}
.pj.w-xl{grid-column:span 8;grid-row:span 2}
.pj.w-l{grid-column:span 6;min-height:16.25rem}
.pj.w-m{grid-column:span 4;min-height:14.4rem}
.pj.w-s{grid-column:span 3;min-height:10.6rem}
.pj h3{font-size:clamp(1.75rem,3.4vw,3.4rem)}
.pj.w-xl h3{font-size:clamp(3rem,7vw,7.5rem)}
.pj.w-s h3{font-size:clamp(1.4rem,2vw,2rem)}
div.pj:hover{transform:none;border-color:var(--line)}
.pj.a-red{background:var(--red);border-color:var(--red);color:var(--on-red)}
.pj.a-red .meta,.pj.a-red p{color:rgba(255,255,255,.82)}
.pj.a-red::before{content:attr(data-art);position:absolute;right:-3%;top:6%;font-family:var(--f-display);font-size:clamp(6.25rem,16vw,16.25rem);line-height:.9;color:#EFECE4;transform:rotate(-7deg);pointer-events:none;transition:transform .6s var(--ease)}
.pj.a-red:hover::before{transform:rotate(-2deg) scale(1.04)}
.pj.a-cream{background:var(--bg-inverse);color:var(--ink-inverse);border-color:var(--bg-inverse)}
.pj.a-cream .meta,.pj.a-cream p{color:var(--ink-inverse);opacity:.7}
.pj.a-dots{background-image:radial-gradient(var(--line) 1.4px,transparent 1.6px);background-size:16px 16px}
.pj.a-grid{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:28px 28px}
.pj.a-sun::before{content:"";position:absolute;right:-30px;top:-30px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffd7a0,var(--red) 62%,transparent 64%);pointer-events:none}
.pj.a-bars::before{content:"";position:absolute;right:22px;top:60px;width:38%;height:42%;background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 16px);opacity:.12;border-radius:6px;pointer-events:none}
.pj.a-ring::before{content:"";position:absolute;right:-50px;bottom:-50px;width:190px;height:190px;border-radius:50%;border:1px solid var(--mute);box-shadow:0 0 0 24px transparent,0 0 0 25px var(--line),0 0 0 50px transparent,0 0 0 51px var(--line);pointer-events:none}
@media (max-width:900px){
  .pgrid{grid-template-columns:minmax(0,1fr)}
  .pj.w-xl,.pj.w-l,.pj.w-m,.pj.w-s{grid-column:auto;grid-row:auto;min-height:14rem}
  .pj.w-xl,.pj.w-l{min-height:17rem}
  .pj .info{padding-right:3.6rem}
  .pj.w-xl h3,.pj h3{font-size:clamp(2.2rem,11vw,3.25rem)}
  .pj.w-s h3{font-size:clamp(1.6rem,8vw,2.2rem)}
  /* decorative art keeps below the meta row and fades before the title */
  .pj.a-red::before{font-size:5.6rem;top:2.4rem;right:-1%}
  .pj.a-sun::before{width:110px;height:110px;right:-24px;top:-24px}
  .pj.a-bars::before{top:3.4rem;height:30%}
  .pj.a-ring::before{width:130px;height:130px;right:-36px;bottom:-36px}
}