#article-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-block-start: 2rem;

	article {
		--bg-overlay: var(--accent-color-alpha);
		position: relative;
		transition: var(--transition);
		box-shadow: var(--edge-highlight), var(--shadow-glass);
		border-radius: var(--rounded-corner);
		border-start-end-radius: 2.125rem;
		border-end-end-radius: 1.8125rem;
		background-image: linear-gradient(var(--bg-overlay), var(--bg-overlay)),
			linear-gradient(var(--glass-bg), var(--glass-bg)), var(--blurnail);
		background-position: center;
		background-size: cover;
		background-color: var(--bg-overlay);
		padding: 1rem;
		overflow: hidden;

		&:hover {
			h3::after {
				transform: none;
				opacity: 1;

				:root[dir*="rtl"] & {
					transform: scaleX(-1);
				}
			}
		}

		&:active:not(:has(.tag:active)) {
			transform: var(--active);
		}

		&:has(> a:focus-visible) {
			animation: focus-in var(--transition);
			outline: 0.125rem solid var(--accent-color);
			outline-offset: 0.125rem;
		}

		@supports not selector(:focus-visible) {
			&:has(> a:focus) {
				animation: focus-in var(--transition);
				outline: 0.125rem solid var(--accent-color);
				outline-offset: 0.125rem;
			}
		}

		& > a {
			position: absolute;
			inset: 0;
			border-radius: var(--rounded-corner);
			border-start-end-radius: 2.125rem;
			border-end-end-radius: 1.8125rem;
		}

		h3 {
			margin: 0;
			color: var(--accent-color);
			font-weight: bold;
			line-height: 1;
			font-family: var(--font-system-ui);

			&::after {
				-webkit-mask-image: var(--icon-right);
				display: inline-block;
				position: relative;
				transform: translateX(-0.25rem);
				opacity: 0;
				mask-image: var(--icon-right);
				transition: var(--transition);
				margin-inline-start: 0.25rem;
				background-color: currentColor;
				width: 1rem;
				height: 1rem;
				pointer-events: none;
				content: "";

				:root[dir*="rtl"] & {
					transform: scaleX(-1) translateX(-0.25rem);
				}
			}
		}

		.tags {
			position: relative;
			justify-content: flex-end;
			z-index: 1;
			margin: 0;

			a {
				background-color: var(--accent-color-alpha);
				color: var(--accent-color);

				&:hover {
					background-color: var(--accent-color);
					color: var(--contrast-color);
				}
			}
		}

		&.draft,
		&.archive,
		&.featured,
		&.hot,
		&.poor {
			&::before {
				position: absolute;
				transform: translateY(-50%);
				opacity: var(--disabled-opacity);
				mask-size: cover;
				transition: var(--transition-longer);
				inset-block-start: 50%;
				inset-inline-end: -3rem;
				width: 12rem;
				height: 12rem;
				content: "";
			}

			&:hover::before {
				transform: translateY(-50%) rotate(-10deg) scale(1.5);
			}

			:root[dir*="rtl"] &:hover::before {
				transform: translateY(-50%) rotate(10deg) scale(1.5);
			}
		}

		&.draft {
			--bg-overlay: var(--fg-muted-1);

			&::before {
				-webkit-mask-image: var(--icon-pencil);
				mask-image: var(--icon-pencil);
				background-color: var(--fg-muted-1);
			}

			h3 {
				color: var(--fg-muted-4);
			}

			.badge {
				background-color: var(--fg-muted-1);
				color: var(--fg-muted-5);

				.icon {
					-webkit-mask-image: var(--icon-pencil);
					mask-image: var(--icon-pencil);
				}
			}

			.tags a {
				background-color: var(--fg-muted-1);
				color: var(--fg-muted-5);

				&:hover {
					background-color: var(--fg-muted-5);
					color: var(--fg-contrast);
				}
			}
		}

		&.archive {
			--bg-overlay: var(--purple-bg);

			&::before {
				-webkit-mask-image: var(--icon-archive);
				mask-image: var(--icon-archive);
				background-color: var(--purple-bg);
			}

			h3 {
				color: var(--purple-fg);
			}

			.badge {
				background-color: var(--purple-bg);
				color: var(--purple-fg);

				.icon {
					-webkit-mask-image: var(--icon-archive);
					mask-image: var(--icon-archive);
				}
			}

			.tags a {
				background-color: var(--purple-bg);
				color: var(--purple-fg);

				&:hover {
					background-color: var(--purple-fg);
					color: var(--fg-contrast);
				}
			}
		}

		&.featured {
			--bg-overlay: var(--yellow-bg);

			&::before {
				-webkit-mask-image: var(--icon-star);
				mask-image: var(--icon-star);
				background-color: var(--yellow-bg);
			}

			&:hover {
				&::before {
					transform: translateY(-50%) rotate(62deg) scale(1.5);
				}

				:root[dir*="rtl"] &::before {
					transform: translateY(-50%) rotate(-62deg) scale(1.5);
				}
			}

			h3 {
				color: var(--yellow-fg);
			}

			.badge {
				background-color: var(--yellow-bg);
				color: var(--yellow-fg);

				.icon {
					-webkit-mask-image: var(--icon-star);
					mask-image: var(--icon-star);
				}
			}

			.tags a {
				background-color: var(--yellow-bg);
				color: var(--yellow-fg);

				&:hover {
					background-color: var(--yellow-fg);
					color: var(--fg-contrast);
				}
			}
		}

		&.hot {
			--bg-overlay: var(--red-bg);

			&::before {
				-webkit-mask-image: var(--icon-fire);
				mask-image: var(--icon-fire);
				background-color: var(--red-bg);
			}

			h3 {
				color: var(--red-fg);
			}

			.badge {
				background-color: var(--red-bg);
				color: var(--red-fg);

				.icon {
					-webkit-mask-image: var(--icon-fire);
					mask-image: var(--icon-fire);
				}
			}

			.tags a {
				background-color: var(--red-bg);
				color: var(--red-fg);

				&:hover {
					background-color: var(--red-fg);
					color: var(--fg-contrast);
				}
			}
		}

		&.poor {
			--bg-overlay: var(--brown-bg);

			&::before {
				-webkit-mask-image: var(--icon-poop);
				mask-image: var(--icon-poop);
				background-color: var(--brown-bg);
			}

			h3 {
				color: var(--brown-fg);
			}

			.badge {
				background-color: var(--brown-bg);
				color: var(--brown-fg);

				.icon {
					-webkit-mask-image: var(--icon-poop);
					mask-image: var(--icon-poop);
				}
			}

			.tags a {
				background-color: var(--brown-bg);
				color: var(--brown-fg);

				&:hover {
					background-color: var(--brown-fg);
					color: var(--fg-contrast);
				}
			}
		}

		.badge {
			float: inline-end;
			box-shadow: var(--edge-highlight);
			border-radius: 999px;
			padding: 0.375rem 0.75rem;
			height: fit-content;
			font-weight: bold;
			white-space: nowrap;

			.icon {
				vertical-align: -0.125em;
				margin-inline-end: 0.25rem;
			}
		}

		.details {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;
			gap: 0.25rem;
			margin-block-start: 1rem;
			border-block-start: max(1px, 0.0625rem) solid var(--fg-muted-2);
			padding-block-start: 0.5rem;
		}
	}
}

#paginator {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 0.25rem;
	margin-block-start: 4rem;

	#paginator-first,
	#paginator-previous,
	#paginator-next,
	#paginator-last {
		display: inline-block;
		transition: var(--transition);
		box-shadow: var(--edge-highlight);
		border-radius: 1rem;
		background-color: var(--fg-muted-1);
		padding: 0.5rem;
		color: var(--fg-muted-4);
		line-height: 0;

		.icon {
			transition: var(--transition);

			:root[dir*="rtl"] & {
				transform: scaleX(-1);
			}
		}
	}

	a#paginator-first,
	a#paginator-previous,
	a#paginator-next,
	a#paginator-last {
		&:hover {
			background-color: var(--fg-muted-2);
			color: var(--fg-muted-5);
		}

		&:active {
			transform: var(--active);
			border-radius: 1rem;
		}
	}

	span#paginator-first,
	span#paginator-previous,
	span#paginator-next,
	span#paginator-last {
		opacity: var(--disabled-opacity);
		cursor: not-allowed;
	}

	#paginator-previous {
		border-start-end-radius: var(--rounded-corner-small);
		border-end-end-radius: var(--rounded-corner-small);
	}

	#paginator-next {
		border-start-start-radius: var(--rounded-corner-small);
		border-end-start-radius: var(--rounded-corner-small);
	}

	#paginator-first .icon {
		-webkit-mask-image: var(--icon-first);
		mask-image: var(--icon-first);
	}

	#paginator-previous .icon {
		-webkit-mask-image: var(--icon-previous);
		mask-image: var(--icon-previous);
	}

	#paginator-next .icon {
		-webkit-mask-image: var(--icon-next);
		mask-image: var(--icon-next);
	}

	#paginator-last .icon {
		-webkit-mask-image: var(--icon-last);
		mask-image: var(--icon-last);
	}

	#paginator-counter {
		display: inline-block;
		transition: var(--transition);
		box-shadow: var(--edge-highlight);
		border-radius: var(--rounded-corner-small);
		background-color: var(--accent-color-alpha);
		padding: 0.5rem 0.625rem;
		color: var(--accent-color);
		font-weight: bold;
		line-height: 1;
		font-variant-numeric: tabular-nums;
	}

	&:has(a#paginator-previous:active) #paginator-counter {
		border-start-start-radius: 1rem;
		border-end-start-radius: 1rem;
	}

	&:has(a#paginator-next:active) #paginator-counter {
		border-start-end-radius: 1rem;
		border-end-end-radius: 1rem;
	}
}