:root {
	/* --page-special-color: #02c3a8; */
	--page-special-color: var(--color-6);
	--col-u: #79c7ff;
	--col-l: #ffa807;
	--focus-line-color: #02c3a8;
}

archive-navigation path { transform-origin: center; }
archive-navigation :focus-visible path {
	filter: unset;
	fill: var(--focus-line-color);
	transform: scale(1.2);
}

/* for ipad, at least; without set width it wouldnt expand, just stayed at width 0, pictures invisible --2026-03-13 */
	@media (min-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
		body.auto-imgset figure.art-details:not(.fit-article) {
			width: calc(100vw - var(--main-padding-left) - var(--main-margin-left));
		}
	}

@media (max-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	figure-imgset {
		display: flex;
		gap: var(--art-details-figure-gap);
		width: 100%;
		flex-direction: column;
	}
	figure-imgset * + button {
		margin-top: calc(0.4 * var(--art-details-figure-gap));
	}
}
@media (min-aspect-ratio: 0.75 /*brkpnt-mobile*/) {
	figure.art-details {
		--imgset-gap: calc(0.8 * var(--art-details-figure-gap));
		grid-template-rows: var(--desk-grid-template-rows);
	}
	figure.onecolumn img:not(.lb) {
		width: 100%;
	}
	figure-imgset {
		display: flex;
		gap: var(--imgset-gap);
		max-height: 100%;
	}
	/* figure.onerow { */
		/* grid-template-rows: 1fr auto; */
		/* grid-template-columns: var(--onerow-template-columns); */
	/* } */
	/* figure-imgset.onerow {
		--max-img-height: calc(var(--img-h-mult) * (var(--article-width) - var(--imgset-gap) * (var(--img-no) - 1)));
		height: var(--max-img-height);
		justify-content: space-between;
	} */
	@media (min-aspect-ratio: 1.35 /*brkpnt-gallery*/) {
		figure.onerow {
			/* --max-img-height: calc(var(--img-h-mult) * (var(--article-width) - var(--imgset-gap) * (var(--img-no) - 1))); */
			/* grid-template-rows: var(--max-img-height) auto; */
			grid-template-rows: 1fr auto;
			grid-template-columns: var(--onerow-template-columns);
			column-gap: var(--imgset-gap) !important; /* get rid of that important later, im tired rn --2026-04-10 */
		}
		figure.onerow figcaption {
			grid-column: 1 / -1;
		}
	}
		/* @media (min-aspect-ratio: 0.75 /*brkpnt-mobile* /) and (max-aspect-ratio: 1.35 /*brkpnt-gallery* /) { */
			/* body { overflow: hidden; } */
			/* figure.art-details.fit-screen.onerow {
				max-height: var(--art-figure-max-height);
			} */
			/* figure-imgset.onerow { */
				/* height: fit-content; */
				/* overflow: hidden; */
				/* height: unset; */
				/* max-height: calc(var(--art-figure-max-height) - var(--art-details-figure-gap) - var(--technical-details-font-size) * var(--technical-details-line-height)); */
					/* im gonna loose my mind, i dont know how to make it work properly; this is a crude bad solution in the meantime so i can stop thinkin about it;
					how the hell do i make this box to fix inside grid cell of parent box instead of being expanded by imgs??
					--2026-04-09 */
				/* display: grid; */
				/* grid-template-rows: var(--imgset-column-template-rows); */
				/* --max-img-height: 100%; */
			/* } */
		/* } */
	/* figure-imgset img-box {
		outline-width: calc(0.8 * var(--art-details-figure-gap) - 2px);
	} */
	figure-imgset picture {
		width: 100%;
		height: 100%;
	}
	article + section.see-also {
		margin-top: var(--body-padding-bottom);
	}
}

[class|=hide-if-no] { display: none !important; }
body:has(article figcaption) .hide-if-no-figcaption { display: initial !important; }
:root[data-archivenav] .hide-if-no-archive-nav { display: initial !important; }
body:has(section.see-also:not([data-mobile])) .hide-if-no-see-also { display: initial !important; }