/* Skills: homepage styles. */

.skills-section { background: var(--surface-soft); border-block: 1px solid var(--line-soft); }
.skills-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.skill-group { padding: 30px; min-width: 0; }
.skill-group:nth-child(odd) { border-right: 1px solid var(--line); }
.skill-group:nth-child(n+3) { border-top: 1px solid var(--line); }
.skill-heading { display: flex; gap: 14px; align-items: center; }
.skill-symbol { color: var(--accent); font: 19px/1 var(--body-font); }
.skill-heading h3 { font: 10px/1.7 var(--body-font); letter-spacing: .7px; color: var(--text); }
.skill-number { margin-left: auto; color: var(--faint); font: 10px var(--body-font); }
.skill-list { list-style: none; margin: 25px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.skill-list li { padding: 5px 9px; border: 1px solid var(--line); font: 12px/1.6 var(--body-font); color: var(--muted); transition: color .2s, border-color .2s; }
.skill-list li:hover { color: var(--accent); border-color: var(--accent); }
.toolkit-note { margin-top: 22px; font: 10px/1.8 var(--body-font); color: var(--faint); }
.toolkit-note span { color: var(--accent); margin-right: 6px; }
@media (max-width: 820px) {
  .skill-group { padding: 24px; }
  .skill-heading { gap: 10px; }
  .skill-heading h3 { font-size: 9px; }
}
@media (max-width: 520px) {
  .skills-grid { grid-template-columns: 1fr; }
  .skill-group { padding: 25px 20px; }
  .skill-group:nth-child(odd) { border-right: 0; }
  .skill-group + .skill-group { border-top: 1px solid var(--line); }
  .skill-heading h3 { font-size: 10px; }
  .skill-list { margin-top: 20px; gap: 7px; }
  .skill-list li { font-size: 11px; }
  .toolkit-note { font-size: 9px; }
}