:root :where(.is-layout-constrained) > .archive-header + * {
	margin-top: calc(1.5 * var(--gap-m));
}

.archive-content {
	& .archive-header {
		padding-bottom: calc(1.5 * var(--gap-m));
		border-bottom: 1px solid currentColor;

		& .archive-title {
			font-size: var(--h2-xxl);
		}

		& h1 {
			margin-bottom: 0;
		}

		& .archive-description p {
			max-width: 960px;
			font-size: var(--h4);
		}

		& .archive-filters--container {
			margin-top: var(--gap-m);

			& .archive-filters--title {
				font-weight: 500;
			}

			& .archive-filters--list {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				gap: 10px;
				background: var(--block-background-color);
				position: sticky;
				top: 0;
				z-index: 5;
				margin-block: var(--gap-m);
				margin-block: 0;
				margin-inline: calc(-1 * var(--content-margin));
				padding: calc(var(--gap-s) / 2) var(--content-margin);
				padding-block: var(--gap-m);
				padding-block: 0;
				overflow: auto;
				scrollbar-width: none;

				&::-webkit-scrollbar {
					display: none;
				}

				& .archive-filters--filter {
					padding: .4em .5em;
					font-size: var(--p-s);
					line-height: .9;
					border: 1px solid var(--color-text);
					text-decoration: none;
					transition: var(--transition);
					transition-duration: calc(0.5 * var(--transition-duration));
					transition-property: color, background-color;
					cursor: pointer;
					white-space: nowrap;

					@media (hover: hover) {
						&:hover {
							color: var(--color-bg);
							background-color: var(--color-text);
						}
					}

					&.active {
						color: var(--color-bg);
						background-color: var(--color-text);
					}
				}
			}
		}
	}

	& .posts-loop {
		& .post-loop {
			:is(body.archive) & {
				font-size: var(--p);
			}

			& .post-meta-wrap {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				gap: 10px;
				margin-top: .5em;

				& .post-meta-separator {
					display: none;
				}
			}

			&.is-featured {
				display: flex;
				flex-direction: column;
				gap: 0;

				& .featured-post-left,
				& .featured-post-right {
					flex: 1 1 50%;
					display: grid;
					position: relative;
				}

				& .featured-post-right {
					padding: calc(1.5 * var(--gap-m)) calc(1.5 * var(--gap-s)) calc(1.5 * var(--gap-s)) calc(1.5 * var(--gap-m));
					border: 1px solid currentColor;
					
					& .post-meta-wrap {
						& .post-meta {
							padding: .4em .5em;
							line-height: .8;
							border: 1px solid currentColor;
							display: grid;
							place-content: center;

							&.post-meta-date {
								background-color: var(--color-dark);
								color: var(--color-bg);
							}

							&.post-meta-tags {
								& .post-meta-tag {
									display: inline-block;
									padding: .2em .4em;
									border: 1px solid var(--color-grey-border);
									line-height: 1;
									cursor: default;
								}
							}
						}
					}

					& .post-title-wrap {
						& .post-title {
							max-width: 650px;
							margin: .5em 0 .15em;
							font-size: var(--h2);
							line-height: 1.25;
						}
					}

					& .post-more-link {
						margin-top: calc(1.5 * var(--gap-m));
						text-align: right;
						line-height: 0;
						font-size: calc(1.5 * var(--p));

						& .standout-custom-svg {
							cursor: pointer;
						}
					}
				}
			}

			& .post-thumbnail-wrap {
				height: 100%;

				& .post-link {
					display: block;
					height: 100%;
				}
			}

			& .post-link {
				text-decoration: none;

				& .post-thumbnail {
					width: 100%;
					height: 100%;
					transition: opacity var(--transition-duration);
				}

				@media (hover: hover) {
					&:hover {
						text-decoration: underline;

						& .post-thumbnail {
							opacity: .85;
						}
					}
				}
			}

			& .post-title {
				font-size: var(--h4);
				font-family: var(--h-fam);
			}

			&:not(.is-featured) {
				margin-bottom: calc(1.25 * var(--gap-s));

				& .post-meta-wrap {
					gap: .2em;
					font-size: calc(.825 * var(--p));

					& .post-meta-date {
						margin-right: auto;
					}
				}

				& .post-title-wrap {
					/* margin-top: -0.5em; */
				}

				& .post-title {
					font-size: var(--p);
					font-weight: 500;
				}
			}
		}
	}
}


/* Navigation */

.pagination {
	& .nav-links {
		display: flex;
		gap: 10px;
		align-items: center;
		justify-content: center;
	}

	& .page-numbers {
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--color-light-grey);
		color: var(--color-dark);
		line-height: 1;
		text-decoration: none;
		transition: background-color var(--transition-duration);

		@media (hover: hover) {
			&:not(.current):hover {
				color: var(--color-dark);
				background-color: var(--color-light-grey-hover);
			}
		}

		&.current {
			color: #fff;
			background-color: var(--color-1);
			cursor: default;
		}

		&.dots {
			cursor: default;
		}
	}
}

/* END Navigation */


/**
 * Larger mobile devices.
 */
@media only screen and (min-width: 480px) {

}



/**
 * Tablet devices.
 */
@media only screen and (min-width: 768px) {

}



/**
 * Smaller screen devices.
 */
@media only screen and (min-width: 960px) {
    .archive-content {
		& .posts-loop {
			& .post-loop {
				&.is-featured {
					flex-direction: row;

					& .featured-post-right {
						& .post-title-wrap {
							& .post-title {
								font-size: calc(0.5 * var(--h2-xl));
							}
						}
					}
				}
			}
		}
		
		& .standout-columns > .standout-max-container > .standout-block-inner > .acf-innerblocks-container {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: calc(1.5 * var(--gap-s));
		}

		& .standout-posts.posts-loop .standout-columns .standout-column-element:has(.is-featured) {
			grid-column: span 2;
			padding-bottom: var(--gap-s);
		}
	}
}



/**
 * Smaller laptops.
 */
@media only screen and (min-width: 1100px) {
	
}



/**
 * Laptops.
 */
@media only screen and (min-width: 1240px) {
	.archive-content {
		& .archive-header {
			& .archive-filters--container {
				& .archive-filters--list {
					margin-block: 0;
					padding-block: 0;
				}
			}
		}

		& .standout-columns > .standout-max-container > .standout-block-inner > .acf-innerblocks-container {
			grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
			gap: calc(1.5 * var(--gap-s));
		}

		& .standout-posts.posts-loop .standout-columns .standout-column-element:has(.is-featured) {
			grid-column: span 3;
		}

		& .posts-loop {
			& .post-loop.is-featured {
				& .post-thumbnail-wrap {
					& .post-thumbnail {
						aspect-ratio: unset;
					}
				}
			}
		}
	}
}



/**
 * Large screen devices.
 */
@media only screen and (min-width: 1600px) {

}