/* Project listing + single (loaded only on project pages) */
.prj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.prj-card{border:1px solid var(--panel-brd);border-radius:18px;background:var(--panel);overflow:hidden;transition:.3s;display:flex;flex-direction:column}
.prj-card:hover{transform:translateY(-6px);border-color:var(--accent)}
.prj-thumb{height:170px;position:relative;overflow:hidden;border-bottom:1px solid var(--panel-brd);background:linear-gradient(135deg,#141527,#0c0d16)}
.prj-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.prj-thumb .ph{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.14)}
.prj-thumb .ph svg{width:40px;height:40px}
.prj-tag{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;padding:5px 10px;border-radius:100px;background:rgba(7,7,12,.72);border:1px solid var(--panel-brd);color:var(--muted)}
.prj-body{padding:22px}
.prj-body h3{font-family:var(--display);font-size:1.2rem;font-weight:600;margin-bottom:8px}
.prj-body p{color:var(--muted);font-size:.9rem}
.prj-single{padding-top:150px;padding-bottom:80px}
.prj-single h1{font-family:var(--display);font-size:clamp(2rem,4.5vw,3rem);font-weight:700;letter-spacing:-.02em;margin-bottom:18px}
.prj-single .prj-hero-img{border-radius:20px;overflow:hidden;border:1px solid var(--panel-brd);margin:20px 0 28px;max-height:460px}
.prj-single .content{font-size:1.05rem;color:var(--muted);max-width:780px}
.prj-single .content p{margin-bottom:16px}
@media(max-width:900px){.prj-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.prj-grid{grid-template-columns:1fr}}

@media(max-width:640px){.prj-single{padding-top:50px}} .prj-thumb{height:210px} .prj-thumb img{position:absolute;top:0;left:0;width:100%;height:auto;object-fit:cover;z-index:1;transition:transform 2.4s ease-in-out} .prj-card:hover .prj-thumb img{transform:translateY(calc(-100% + 210px))} .prj-single .prj-hero-img{height:560px;max-height:none;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--accent) rgba(255,255,255,.06)} .prj-single .prj-hero-img img{width:100%;height:auto;display:block} 
.prj-single .prj-hero-img::-webkit-scrollbar{width:12px}
.prj-single .prj-hero-img::-webkit-scrollbar-track{background:rgba(255,255,255,.05)}
.prj-single .prj-hero-img::-webkit-scrollbar-thumb{background:var(--accent);border-radius:10px;border:3px solid rgba(10,11,18,.65);background-clip:content-box}
.prj-single .prj-hero-img::-webkit-scrollbar-thumb:hover{background:var(--accent-2)}
.prj-scroll-hint{font-family:var(--mono);font-size:.74rem;color:var(--faint);text-align:center;margin:-14px 0 26px}
.prj-search{position:relative;max-width:520px;margin:22px 0 14px}
.prj-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--faint)}
.prj-search input{width:100%;background:var(--panel);border:1px solid var(--panel-brd);border-radius:100px;padding:14px 18px 14px 44px;color:var(--ink);font-family:var(--body);font-size:.95rem}
.prj-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,92,255,.18)}
.prj-cats{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:4px}
.pchip{font-family:var(--mono);font-size:.8rem;padding:8px 15px;border-radius:100px;border:1px solid var(--panel-brd);background:var(--panel);color:var(--muted);cursor:pointer;transition:.2s}
.pchip:hover{color:var(--ink)}
.pchip.active{color:var(--ink);border-color:var(--accent);background:rgba(124,92,255,.14)}
.prj-card.hide{display:none}