.artworks-filter {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 7;
	/* overflow: hidden; */
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s;
}
body.artworks-filter-visible .artworks-filter {
	opacity: 1;
	visibility: visible;
}
.artworks-filter-contents {
	position: absolute;
	top: 0;
	left: 0;
	right: -140px;
	bottom: 0;
	transition: right .3s;
}
body.artworks-filter-visible .artworks-filter-contents {
	right: 0;
}
.artworks-filter-list {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	overflow-y: auto;
	width: 330px;
	padding: 20px 20px 80px;
	box-shadow: 0 0 30px rgba(0, 0, 0, .9);
	overscroll-behavior: contain;
	background: rgba(0, 0, 0, 0.78);
	border: 2px solid #352f1e;
	border-width: 0 0 0 2px;
}
@supports (backdrop-filter: blur(1px)) {
	.artworks-filter-list {
		background: rgba(0, 0, 0, 0.68);
		backdrop-filter: blur(10px);
	}
}
.artworks-filter-list h2 {
	margin-top: 0;
}
.artworks-filter-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	border-radius: 100vh;
	background: maroon;
	z-index: 1;
	border: none;
	box-shadow: 0 0 10px rgba(0, 0, 0, .3);
	cursor: pointer;
	outline: none;
}
.artworks-filter-close:hover {
	background: #9f0000;
}
.artworks-filter-close:active {
	background: #680000;
}
.artworks-filter-close::before,
.artworks-filter-close::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 50%;
	height: 4px;
	border-radius: 100vh;
	background: #eee;
}
.artworks-filter-close::before {
	transform: rotate3d(0, 0, 1, -45deg);
}
.artworks-filter-close::after {
	transform: rotate3d(0, 0, 1, 45deg);
}
.artworks-filter-list-parameter h3 {
	margin: 1.4em 0 .7em;
}
.artworks-filter-list-parameter .selection-handler {
	float: right;
}

.artworks-filter-controls {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 330px;
	padding: 10px;
}
.apply-artworks-filter {
	width: 100%;
	border: 2px solid #846fca;
	background: #56419f;
	color: #fff;
	padding: 10px;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	border-radius: 5px;
	box-shadow: 0 0 20px #1f1c18;
	cursor: pointer;
}
.apply-artworks-filter:hover {
	background: #6951bd;
}
.apply-artworks-filter:active {
	background: #473588;
}


.artworks {
	position: relative;
	margin: 0 0;
	display: block;
	list-style: none;
	padding: 0;
	transition: height .3s;
}
.artwork {
	position: absolute;
	transition:
		left .5s,
		top .5s,
		width .5s,
		height .5s,
		opacity .7s,
		visibility .7s,
		transform .7s,
		filter 5s
	;
	filter: grayscale(0%) opacity(100%) sepia(0%);
	transform: translate3d(0, 30px, 0);
	opacity: 0;
	visibility: hidden;
}
.artwork.loaded {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	visibility: visible;
}
.artwork.at-archive {
	filter: grayscale(100%) opacity(90%) sepia(25%);
}
.artwork.at-archive:hover,
.artwork.at-archive:focus-within {
	filter: grayscale(0%) opacity(100%) sepia(0%);
	transition:
		left .5s,
		top .5s,
		width .5s,
		height .5s,
		opacity .7s,
		visibility .7s,
		transform .7s,
		filter .7s
	;
}
.artwork .archive-label-cont {
	position: absolute;
	top: -4px;
	left: -4px;
	pointer-events: none;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: no-repeat left top / 37%;
}
.artwork .archive-label-cont.al-bg {
	background-image: url('/img/archive-sticker-bg.svg');
}
.artwork .archive-label-cont.al-en {
	background-image: url('/img/archive-sticker-en.svg');
}
.artwork figure {
	margin: 0;
	width: 100%;
}
.artwork .artwork-link {
	width: 100%;
	display: block;
	position: relative;
	height: 0;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}
.artwork .artwork-image {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 16px 16px 16px 5px;
	object-fit: cover;
	object-position: center 0;
	transition: box-shadow .3s, border-radius .3s;
}
.artwork .artwork-link:hover .artwork-image,
.artwork .artwork-link:focus-visible .artwork-image,
.artwork:has(.artwork-title-link:hover) .artwork-image {
	border-radius: 16px 16px 16px 0;
	box-shadow: 0 0 0 4px #eebd71;
	transition: box-shadow .3s, border-radius 0s;
}
.artwork figcaption {
	margin-top: 5px;
	position: relative;
}
.artwork figcaption h2 {
	margin: 0;
	font-size: 1.07em;
	font-weight: 500;
	line-height: 24px;
	word-break: break-word;
	display: grid;
	grid-template-columns: 24px 1fr;
	grid-template-rows: 24px;
	gap: 7px;
	align-items: center;
}
html.desktop .artwork figcaption h2,
html.ios .artwork figcaption h2 {
	font-weight: 500;
}
html.desktop .artwork figcaption h2 {
	font-size: 1.3em;
	line-height: 32px;
	gap: 10px;
	grid-template-columns: 32px 1fr;
	grid-template-rows: 32px;
}
.artwork figcaption h2 figure.author-circle {
	height: 100%;
	width: 100%;
	position: relative;
}
.artwork figcaption h2 figure.author-circle .img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 5px 50% 50% 50%;
	transition: box-shadow .3s, border-radius .3s;
	background: #fff no-repeat center / 130%;
}
.artwork:has(.artwork-link:hover) figcaption h2 figure.author-circle .img,
.artwork:has(.artwork-link:focus-visible) figcaption h2 figure.author-circle .img,
.artwork:has(.artwork-title-link:hover) figcaption h2 figure.author-circle .img {
	border-radius: 0 50% 50% 50%;
	box-shadow: 0 0 0 4px #eebd71;
}
.artwork .artwork-title-link {
	color: inherit;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	outline: none;
}
.artwork .artwork-title-link:hover {
	text-decoration: none;
}


.load-more-hugger {
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 70px 0 -50px;
}
#load-more-artworks {
	height: 100%;
	transition: opacity .3s, visibility .3s;
}
#load-more-artworks {
	--decor-color: #ffcb4a;
	--decor-color-progress: #b08927;
	height: 100%;
	position: relative;
	width: 260px;
	padding: 0;
	border-radius: 10px;
	border: 2px solid var(--decor-color);
	background: var(--decor-color);
	background: #393019;
	box-shadow: 0 0 0 3px inset #000;
	transition: background-color .3s;
	cursor: pointer;
}
.load-more-hugger:not([data-more]) #load-more-artworks {
	opacity: 0;
	visibility: hidden;
}
#load-more-artworks:not(.in-progress):hover {
	--decor-color: #ffda7e;
}
#load-more-artworks.in-progress,
#load-more-artworks:active {
	background: var(--decor-color-progress);
}
#load-more-artworks::before,
#load-more-artworks::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	pointer-events: none;
	transition: opacity .3s;
}
#load-more-artworks::before {
	display: grid;
	align-items: center;
	justify-content: center;
	content: attr(data-text);
	font-size: 1.2em;
	color: #111;
	color: #ffcb4a;
	opacity: 1;
}
#load-more-artworks.in-progress::before {
	opacity: 0;
}
#load-more-artworks::after {
	width: 40px;
	height: 40px;
	--b: 5px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #111;
	-webkit-mask:
	repeating-conic-gradient(#0000 0deg,#000 1deg 70deg,#0000 71deg 90deg),
	radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
	-webkit-mask-composite: destination-in;
	      mask-composite: intersect;
	animation: l5 1s infinite;
	opacity: 0;
}
#load-more-artworks.in-progress::after {
	opacity: 1;
}
@keyframes l5 {to{transform: rotate(.5turn)}}


@media (min-width: 1011px) {
	.artworks-filter-close {
		top: 38px;
		right: 38px;
	}
	.artworks-filter-contents {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: -140px;
		transition: bottom .5s;
	}
	body.artworks-filter-visible .artworks-filter-contents {
		bottom: 0;
	}
	.artworks-filter-list,
	.artworks-filter-controls {
		max-width: 2560px;
		width: calc(100vw - 100px);
		margin: auto;
	}
	.artworks-filter-list {
		left: 0;
		border-width: 2px;
		border-radius: 10px;
		height: calc(100vh - 100px);
		border-color: #735812;
		background: rgba(47, 44, 37, 0.65);
	}
	.special-filter {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 0 20px;
	}
	.parameters-filter {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 0 20px;
	}
	.artworks-filter-controls {
		position: absolute;
		bottom: 52px;
		right: 32px;
		padding: 10px;
		left: 32px;
	}
}