/* about page — work history */

.about-cover {
  margin: 28px 0 34px;
  overflow: hidden;
  border: 1px dashed var(--line-strong);
  background: var(--card);
}
.about-cover img { display: block; width: 100%; height: auto; }
/* The src-less bootstrap <img> ships `hidden`; re-assert it here so the `display:block`
   above can't override the UA [hidden] rule (JS sets src + unhides before paint; no-JS
   keeps it hidden and shows the <noscript> light cover instead). */
.about-cover img[hidden] { display: none; }

.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; } }