/* styles/skills.css */

#skills { background: var(--bg); }

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border: 1px solid var(--mid);
  gap: 0;
}

.skill-cell {
  padding: 2rem 1.8rem;
  border: 1px solid var(--mid);
  transition: background .2s;
  margin: -1px 0 0 -1px;
}
.skill-cell:hover { background: var(--surface); }
.skill-cell h3 {
  font-family: var(--serif); font-size: 1rem; margin-bottom: 1rem;
}

.tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.tag {
  font-size: .7rem; font-weight: 500; letter-spacing: .04em;
  padding: .28rem .7rem;
  background: var(--bg); border: 1px solid var(--mid);
  color: var(--ink-muted); transition: all .2s; cursor: default;
}
.tag:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }