/* Cross-hair separator between a name and a role: 6 x 6px, in the ink colour. The shape is assets/icons/cross-hair.svg, embedded here as a data URI
   (not a file link) so it also shows when a page is opened straight from the Finder, where browsers block file masks.
   Used automatically after the client name in .lockup__meta, or as <span class="sep" aria-hidden="true"></span> elsewhere. */
.sep,
.lockup__meta strong::after,
.lockup__meta--label > span:first-child::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  flex: none;
  vertical-align: middle;
  background-color: var(--color-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6'%3E%3Cpath d='M0 0h2v2H0zM4 0h2v2H4zM2 2h2v2H2zM0 4h2v2H0zM4 4h2v2H4z'/%3E%3C/svg%3E") center / 6px 6px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6'%3E%3Cpath d='M0 0h2v2H0zM4 0h2v2H4zM2 2h2v2H2zM0 4h2v2H0zM4 4h2v2H4z'/%3E%3C/svg%3E") center / 6px 6px no-repeat;
}
.sep { margin-inline: var(--space-5); }
.lockup__meta strong::after,
.lockup__meta--label > span:first-child::after { margin-left: var(--space-5); }
/* centre the cross-hair on the line's middle (the pager's cross-hairs are aligned to the same line) */
.lockup__meta strong,
.lockup__meta--label > span:first-child { display: inline-flex; align-items: center; }