.tierContainer {
	display: grid;
}

.tierImg {
	grid-column: 1;
	grid-row: 1;
}

/* the outline is the union of eight offset copies of the silhouette, which mask
   layers composite with `add` by default. chained drop-shadows would instead
   feed each shadow into the next and scatter ghost copies at every sum of the
   offsets. the art is inset by the outline width so the outline stays inside
   the box the icon was asked to fill */
.inkTinted {
	--ink-outline-width: 1px;
	--ink-outline-color: rgba(0, 0, 0, 0.25);

	--_art-size: calc(100% - var(--ink-outline-width) * 2);
	--_straight: var(--ink-outline-width);
	--_diagonal: calc(var(--ink-outline-width) * 0.707);

	display: block;
	position: relative;
	background-color: var(--ink-outline-color);
	mask-image:
		var(--ink-silhouette), var(--ink-silhouette), var(--ink-silhouette),
		var(--ink-silhouette), var(--ink-silhouette), var(--ink-silhouette),
		var(--ink-silhouette), var(--ink-silhouette);
	mask-size: var(--_art-size);
	mask-repeat: no-repeat;
	mask-position:
		calc(50% - var(--_straight)) 50%,
		calc(50% + var(--_straight)) 50%,
		50% calc(50% - var(--_straight)),
		50% calc(50% + var(--_straight)),
		calc(50% - var(--_diagonal)) calc(50% - var(--_diagonal)),
		calc(50% + var(--_diagonal)) calc(50% - var(--_diagonal)),
		calc(50% - var(--_diagonal)) calc(50% + var(--_diagonal)),
		calc(50% + var(--_diagonal)) calc(50% + var(--_diagonal));
}

/* real elements rather than pseudo elements: snapdom (the image export) only
   inlines mask images it finds on real ones, and a dropped mask paints the
   whole layer over the icon */
.inkArt,
.inkHighlight {
	position: absolute;
	inset: 0;
	mask-size: var(--_art-size);
	mask-repeat: no-repeat;
	mask-position: center;
}

.inkArt {
	background-color: var(--color-accent);
	background-image: var(--ink-detail);
	background-size: var(--_art-size);
	background-repeat: no-repeat;
	background-position: center;
	mask-image: var(--ink-silhouette);
}

.inkHighlight {
	background-color: #fff;
	mask-image: var(--ink-highlight);
}