.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
.filter-btn { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 18px; background: transparent; border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; transition: all 0.2s; }
.filter-btn:hover, .filter-btn.active { border-color: var(--orange); color: var(--orange); }
.projects-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(350px,1fr)); gap: 24px; }
.project-card { background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: border-color 0.2s, transform 0.2s; }
.project-card:hover { border-color: var(--orange); transform: translateY(-3px); }
.project-thumb { height: 180px; position: relative; overflow: hidden; background: var(--bg2); }
.project-thumb-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(249,115,22,0.05) 1px,transparent 1px), linear-gradient(90deg,rgba(249,115,22,0.05) 1px,transparent 1px); background-size: 24px 24px; }
.project-thumb-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: var(--font-display); font-size: 48px; font-weight: 900; color: var(--orange); opacity: 0.12; user-select: none; }
.project-thumb-label { position: absolute; bottom: 12px; left: 16px; font-family: var(--font-mono); font-size: 13px; color: var(--orange); background: rgba(17,17,17,0.85); padding: 4px 10px; letter-spacing: 0.15em; border: 1px solid var(--border); }
.project-body { padding: 24px; }
.project-num { font-family: var(--font-mono); font-size: 13px; color: var(--orange); opacity: 0.6; margin-bottom: 8px; letter-spacing: 0.2em; }
.project-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 10px; letter-spacing: 0.05em; }
.project-desc { font-size: 19px; font-weight: 300; color: var(--text); line-height: 1.7; margin-bottom: 20px; }
.project-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.project-tag { font-family: var(--font-mono); font-size: 13px; color: var(--orange); border: 1px solid var(--border); padding: 3px 10px; letter-spacing: 0.1em; }
.project-links { display: flex; gap: 12px; }
.project-link { font-family: var(--font-mono); font-size: 14px; color: var(--orange); text-decoration: none; letter-spacing: 0.1em; transition: opacity 0.2s; }
.project-link:hover { opacity: 0.7; }