/* about page — work history */

.work-group { padding: 18px 0; border-bottom: 1px dashed var(--line); }
.work-group:last-child { border-bottom: none; }
.work-co {
  color: var(--fg);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
  transition: color 0.2s ease, letter-spacing 0.2s ease;
  cursor: default;
}
@media (hover: hover) { .work-group:hover .work-co { color: var(--accent); letter-spacing: 0.18em; } }
.work-roles { border-left: 1px dashed var(--line); margin-left: 5px; }
.work-role { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: baseline; padding: 14px 0 14px 20px; position: relative; }
.work-role + .work-role { border-top: 1px dashed var(--line); }
.work-role::before { content: "├─"; position: absolute; left: -2px; top: 14px; color: var(--faint); font-size: 12px; line-height: 1; }
.work-role:last-child::before { content: "└─"; }
.work-role .when { color: var(--accent); font-size: 12px; }
@media (hover: hover) { .work-role:hover .title { color: var(--accent); } }

@media (max-width: 600px) { .work-role { grid-template-columns: 1fr; gap: 3px; } }