.project-grid{display:grid;grid-template-columns:1fr;gap:20px;transition:opacity .18s ease,transform .18s ease}
.project-grid.is-leaving{opacity:0;transform:translateY(4px)}
.project-card{position:relative;overflow:hidden;border:1px solid #31505b;border-radius:18px;background:#0c202c;box-shadow:0 5px 16px #0002;transition:transform .18s ease,border-color .18s ease}
.project-card>a{display:block;color:inherit;text-decoration:none;transition:opacity .2s ease,transform .2s ease}
.project-image{aspect-ratio:3/2;overflow:hidden;background:#142e38}
.project-image img{display:block;width:100%;height:100%;object-fit:cover}
.project-copy{padding:20px;min-height:116px;box-sizing:border-box}
.project-copy span{color:#a9e4d3;font-size:.75rem;letter-spacing:.08em}
.project-copy h3{font-size:1.1rem;line-height:1.5;margin:8px 0 0}
.project-card:hover{transform:translateY(-3px);border-color:#94d7c1}
.project-card:focus-within{outline:2px solid #a9e4d3;outline-offset:3px}
.project-card.is-loading>a{opacity:0;transform:scale(.98)}
.project-card.is-loading::after,.project-skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,#102631 25%,#1c3b45 45%,#102631 65%);background-size:250% 100%;animation:project-shimmer 1.4s linear infinite;pointer-events:none}
.project-skeleton{aspect-ratio:600/620}
.project-card.image-failed .project-image{display:flex;align-items:center;justify-content:center;color:#b8d1d5}
.project-card.image-failed .project-image::after{content:'Preview unavailable'}
.project-card.image-failed img{display:none}
.pagination button:disabled{opacity:.4;cursor:not-allowed}
@keyframes project-shimmer{to{background-position:-150% 0}}
@media(min-width:640px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.project-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1280px){.project-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.project-grid,.project-card,.project-card>a{transition:none}.project-card.is-loading::after,.project-skeleton::after{animation:none}.project-card:hover{transform:none}}
.project-skeleton{aspect-ratio:auto}
.project-skeleton::before{content:'';display:block;aspect-ratio:3/2;margin-bottom:116px}
.hero{grid-template-columns:1fr}.hero>div{max-width:850px}