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

div.articles article {
	transition: all .15s ease-out;
	padding: 1em;
}

div.articles article a {
	text-decoration: none;
	color: inherit;
}


div.articles article p {
	margin-block: .5em 0;
}

.external div.articles article p::after {
	content: "Read original article »";
}

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

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

div.articles article:hover {
	background: var(--fill-color-2);
	scale: 1.025;
}

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

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

form.article-write > label > [name="excerpt"] {
	height: 10ch;
}

form.article-write > label > :is(input, textarea) {
	padding: .25rem;
}

form.article-write > label.publish {
	grid-template: auto / auto auto;
	justify-content: start;
}

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

form.article-write > .content .cheat-sheet {
	font-size: .75rem;
	align-self: end;
}

form.article-write > .content > 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(~ .article-show) {
	width: 100%;
	aspect-ratio: 3 / 1;
	object-fit: cover;
}

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

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

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

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

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

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

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

.article-show > nav {
	grid-area: features;
}

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

.article-show > nav  ul {
	padding: 0;
	margin: 0;
	font-size: .75em;
	display: flex;
	flex-wrap: wrap;
}

.article-show > nav  li {
	list-style: none;
	flex: 1 0 clamp(30ch, 50%, 50ch);
	padding: .5rem;
}


.article-show > nav  li h3.highlight {
	font-size: 1.5em;
}


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

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

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

article.tile > * {
	grid-area: 1 / -1 / 1 / -1;
}

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

article.tile a {
	text-decoration: none;
	color: inherit;
}

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

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

article.tile a > p {
	grid-area: intro;
	margin-block: .5em 0;
}

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

@media (hover: none) {
	article.tile a > p::after {
		display: block;
		margin-top: .5em;
		text-align: right;
	}
}

article.tile:hover {
	background: var(--fill-color-2);
	scale: 1.025;
}

article.tile.unpublished {
	position: relative;
}

article.tile.unpublished::before {
	content: "Unpublished";
	position: absolute;
	font-weight: 500;
	align-content: center;
	text-align: center;
	inset: 0;
}

article.tile.unpublished> 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) h2 .material-symbols-outlined {
	visibility: hidden;
}