/* Non-interactive responsibility labels, shared by overview and case studies. */
.project-responsibilities{color:inherit}
.project-responsibilities ul{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px;
  list-style:none;padding:0;margin:0;
}
.project-responsibilities li{
  font:400 12px/1.4 'Bricolage Grotesque',system-ui,sans-serif;
  letter-spacing:.005em;border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 22%,transparent);
  border-radius:4px;padding:4px 9px;white-space:normal;cursor:default;
}
.photo-page #work .work-chapter .project-copy:has(.project-responsibilities){max-width:840px}
.case-responsibilities{margin:28px 0 32px;max-width:100%}
.case-responsibilities h2{font:500 12px/1.4 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px}
.case-responsibilities ul{justify-content:flex-start}
@media(max-width:600px){
  .project-responsibilities li{font-size:11px;padding:3px 7px}
  .project-responsibilities ul{gap:5px 6px}
}

/* One readable line in project overviews; small screens can swipe the labels. */
.photo-page #work .work-chapter .project-copy:has(.project-responsibilities){max-width:1120px}
.photo-page .project-responsibilities{width:100%;min-width:0}
.photo-page .project-responsibilities ul{
  flex-wrap:nowrap;justify-content:flex-start;width:max-content;max-width:100%;
  margin-inline:auto;overflow-x:auto;padding-bottom:3px;scrollbar-width:thin;
}
.photo-page .project-responsibilities li{flex:0 0 auto;white-space:nowrap}
.photo-page .project-responsibilities ul:focus-visible{outline:2px solid currentColor;outline-offset:4px}