/* figures.css · Akbro theme: the Hairline figures mounted by js/figures.js into [data-ak-figure].
   Ink lines on the section ground, one solid orange part per figure (.ak-hl-o). */
[data-ak-figure] {
	--ak-hl-ink: #121313;
	--ak-hl-orange: #f86200;
	--hairline-plate: #e3e5e1;
	--hairline-hi: var(--ak-hl-ink);
	--hairline-edge: color-mix(in srgb, var(--ak-hl-ink) 78%, var(--hairline-plate));
	--hairline-mid: color-mix(in srgb, var(--ak-hl-ink) 56%, var(--hairline-plate));
	--hairline-lo: color-mix(in srgb, var(--ak-hl-ink) 34%, var(--hairline-plate));
	--hairline-stroke: 1.15;
	display: block;
	position: relative;
	width: 100%;
	max-width: 320px;
	aspect-ratio: 1 / 1;
	margin-inline: auto;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	[data-ak-figure] {
		--hairline-edge: var(--ak-hl-ink);
		--hairline-mid: var(--ak-hl-ink);
		--hairline-lo: var(--ak-hl-ink);
	}
}
[data-ak-figure] > svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}
[data-ak-figure] > svg .ak-hl-o {
	fill: var(--ak-hl-orange);
}
@media (max-width: 640px) {
	[data-ak-figure] {
		max-width: 180px;
		--hairline-stroke: 1;
	}
}