.articles {
	position: relative;
	gap: var(--pane-gap);
	margin-top: calc(0.5rem + 20px);
	flex-wrap: wrap;

	.article-nav {
		flex: 1 1 100%;
		margin: 0 -1rem 0 -1rem;
		list-style: none;
		position: sticky;
		top: 156px;
		max-height: max-content;
		gap: 0;
		padding: 0;
		overflow: hidden;
		border-radius: 0;

		&:after {
			content: '\f078';
			font-family: var(--font__awesome);
			position: absolute;
			top: 20px;
			right: 1rem;
			transform: translateY(-50%);
			transition: all 0.2s ease;
		}

		li {
			border-bottom: 1px solid var(--sidebar-border);
			margin: 0;
		}

		.article-link {
			font-weight: 700;
			cursor: pointer;
			margin-bottom: 0;
			display: none;
			pointer-events: none;
			font-family: var(--font__sans-serif);
			font-size: calc(var(--font-size__base) + 2px);
			font-weight: 700;
			padding: 0.5rem 0.75rem;
			transition: all var(--timing__fast, 0.25s)
				var(--timing__function, ease);
			width: 100%;
			color: var(--nav-link);

			&.active {
				background: var(--color-border-blue);
				color: var(--nav-link-hover);
				display: flex;
			}

			&:hover,
			&:focus {
				color: var(--nav-link-hover);
				&.active {
					background: var(--color-border-blue);
				}
			}
		}

		&:hover {
			&:after {
				transform: translateY(-50%) rotate(180deg);
			}
			.article-link {
				display: flex;
				pointer-events: auto;
			}
		}
	}
	.article-list {
		flex: 1 1 100%;
	}
	.article-item {
		scroll-margin-top: 2.5rem;
		border-bottom: 1px solid #bbb;
		padding-bottom: 2rem;
		scroll-margin-top: calc(156px + 44px + 1rem);

		&:last-of-type {
			border-bottom-width: 0;
			padding-bottom: 0;
		}
	}
}

@media screen and (min-width: 800px) {
	.articles {
		margin-top: 0;
		flex-wrap: nowrap;

		.article-nav {
			flex: 1 1 calc(25% - (var(--pane-gap) / 2));
			top: calc(162px + 1.25rem);
			padding: 1rem 0.75rem 2rem;
			margin: 0;
			min-width: 250px;
			height: max-content;
			max-height: calc(100dvh - (162px + 2.5rem));
			overflow-x: hidden;
			overflow-y: auto;
			scrollbar-color: gray transparent;

			&:after {
				display: none;
			}

			.article-link {
				display: flex;
				pointer-events: auto;
			}
		}
		.article-list {
			flex: 1 1 calc(75% - (var(--pane-gap) / 2));

			.article-item {
				scroll-margin-top: calc(162px + 1rem);
			}
		}
	}
}