div.articles {
	display: grid;
	/*padding-inline: 4rem;*/
	/*margin: 2rem 0 1rem;*/
	grid-template-columns: 1fr 1fr;
	gap: .5rem 2rem;

	& article {
		transition: all .15s ease-out;
		padding: 1em;

		& a {
			text-decoration: none;
			color: inherit;
		}



		& p {
			margin-block: .5em 0;

			.external &::after {
				content: "Read original article »";
			}

			&::after {
				content: "Read more »";
				margin-left: .75em;
				font-size: smaller;
				color: var(--text-color-faded);
				white-space: nowrap;
				text-transform: uppercase;

				@media (hover: none) {
					display: block;
					margin-top: .5em;
					text-align: right;
				}
			}
		}

		&:hover {
			background: var(--fill-color-2);
			scale: 1.025;
		}
	}
}

form.article-write {
	padding: 0 2rem 2rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;

	> label {
		display: grid;
		grid-template: auto auto / subgrid;
		gap: .5rem;

		> [name="excerpt"] {
			height: 10ch;
		}

		> :is(input, textarea) {
			padding: .25rem;
		}

		&.publish {
			grid-template: auto / auto auto;
			justify-content: start;
		}
	}

	> .content {
		grid-template-columns: 1fr auto;
		gap: .5rem 1rem;

		.cheat-sheet {
			font-size: .75rem;
			align-self: end;
		}
		/*> :first-child {
			grid-column: 1 / -1;
		}*/

		> textarea {
			height: 60ch;
			resize: vertical;
			font-family: "Ubuntu Mono", monospace;
		}
	}
}

.article-show {
	margin: 0 2rem 2rem;
	gap: 1rem 6rem;
	display: grid;
	grid-template:
        "pub pub" auto
        "intro intro" auto
        "hr hr" auto
        "content features" auto / 70ch fit-content(60ch);
	justify-content: center;
	justify-items: center;

	img:has(~ &) {
		width: 100%;
		aspect-ratio: 3 / 1;
		object-fit: cover;
	}

	h2.highlight:has(~ &) {
		grid-template-columns: 1fr fit-content(60ch) 1fr;
	}

	> time {
		grid-area: pub;
		display: block;
		margin-block: .25em;
		font-size: smaller;
		color: var(--text-color-faded);
	}

	> .introduction {
		grid-area: intro;
		font-size: smaller;
		color: var(--text-color-faded);
	}

	> hr {
		width: 100%;
		grid-area: hr;
	}

	> .article-content {
		justify-self: stretch;
		text-align: justify;

		> .source {
			font-size: smaller;
			text-decoration: none;
		}
	}

	/*> :not(.article-content, .features) {
		grid-column: 1 / -1;
	}*/

	> nav {
		grid-area: features;

		> h3 {
			text-transform: uppercase;
			font-weight: 300;
			color: var(--text-color-faded);
			text-align: center;
		}

		& ul {
			padding: 0;
			margin: 0;
			font-size: .75em;
			display: flex;
			flex-wrap: wrap;
		}

		& li {
			list-style: none;
			flex: 1 0 clamp(30ch, 50%, 50ch);
			padding: .5rem;

			& h3.highlight {
				font-size: 1.5em;
			}
		}
	}

	/*@media (80rem <= width < 100rem) {
		& {
			grid-template: "intro content" "features features" / minmax(40ch, min-content) 70ch;
		}
	}*/

	@media (width < 80rem) {
		& {
			grid-template: "pub" "intro" "hr" "content" "features" / minmax(100%, 70ch);
		}

		img:has(~ &) {
			aspect-ratio: 2 / 1;
			object-fit: cover;
		}
	}
}

/*section.article-content {
	width: 70ch;
}*/

article.tile {
	transition: all .15s ease-out;
	padding: 1em;
	display: grid;
	place-content: stretch;

	& > * {
		grid-area: 1 / -1 / 1 / -1;
	}

	& > img {
		contain: size;
		height: 100%;
		width: 100%;
		object-fit: cover;
		opacity: .2;
	}

	& a {
		text-decoration: none;
		color: inherit;

		& > h3 {
			font-family: "Linux Libertine Display", serif;
			font-size: 1.5em;
			margin-block: 0 .1em;
			font-weight: normal;
		}

		/*& h3 {
			font-family: "Linux Libertine Display", serif;
			font-size: 2em;
			margin-block: 0 .1em;
			font-weight: normal;
		}*/

		& > time {
			display: block;
			margin-bottom: .25em;
			margin-left: 4em;
			font-size: .75em;
			color: var(--text-color-faded);
		}

		& > p {
			grid-area: intro;
			margin-block: .5em 0;

			&::after {
				content: "Read more »";
				margin-left: .75em;
				font-size: smaller;
				color: var(--text-color-faded);
				white-space: nowrap;
				text-transform: uppercase;

				@media (hover: none) {
					display: block;
					margin-top: .5em;
					text-align: right;
				}
			}
		}
	}

	&:hover {
		background: var(--fill-color-2);
		scale: 1.025;
	}

	&.unpublished {
		position: relative;

		&::before {
			content: 'Unpublished';
			position: absolute;
			font-weight: 500;
			align-content: center;
			text-align: center;
			inset: 0;
		}

		> a {
			opacity: .5;
		}
	}
}


h2 .material-symbols-outlined {
	justify-self: start;
	font-size: 1em;
	align-self: center;
	cursor: pointer;
	color: var(--text-color-faded);
	text-decoration: none;

	h2:not(:hover) & {
		visibility: hidden;
	}
}