.projects{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;display:grid}.project{--project-hover:.25s cubic-bezier(.2, 0, 0, 1);border:1px solid var(--border);background-color:var(--card-bg);transition:border-color var(--project-hover);border-radius:12px;overflow:hidden}.project:hover{border-color:var(--accent)}.project:focus-within{outline:2px solid var(--accent);outline-offset:2px}.project a{height:100%;color:inherit;flex-direction:column;display:flex}.project-img-container{aspect-ratio:4/3;background-color:var(--surface);overflow:hidden}.project-img-container img{object-fit:cover;object-position:top;pointer-events:none;width:100%;height:100%;display:block}.project__body{border-top:1px solid var(--border);flex-direction:column;flex:1;gap:10px;padding:16px 18px 18px;display:flex;position:relative}.project__body:before{content:"";background-color:var(--accent);transform-origin:0;height:3px;transition:transform var(--project-hover);position:absolute;top:-2px;left:0;right:0;transform:scaleX(0)}.project:hover .project__body:before{transform:scaleX(1)}.project__title{font-size:var(--text-lg);letter-spacing:-.01em;transition:color var(--project-hover);font-weight:700;line-height:1.25}.project:hover .project__title{color:var(--accent-ink)}.project__stack{background-color:var(--accent-soft);color:var(--accent-ink);font-size:var(--text-xs);border-radius:999px;align-self:flex-start;padding:3px 10px;font-weight:600}.project__tools{flex-wrap:wrap;gap:6px;display:flex}.project__tools li{border:1px solid var(--border);font-size:var(--text-xs);color:var(--text-secondary);border-radius:6px;padding:2px 8px}