/* Blog-specific styles */

:root
{
	/* --nav-link: var(--link-subtle); */
}

/* Post page */

.indexLink h1
{
	font-size: 1.5em;
	letter-spacing: -.01em;
	padding-top: .4em;
}

main.post,
footer
{
	max-width: 40rem;
}

.post-header
{
	margin-bottom: 1rem;
}

.post-header time
{
	/* color: var(--subtle); */
}

/* Post body typography */

.post-body {
	margin-top: 2em;
}

.post-body p { margin: 0 0 1em; }
.post-body h2,
.post-body h3
{
	font-weight: 700;
	margin: 2em 0 0.5em;
	color: var(--accent-strong);
}
.post-body h2 { font-size: 1.25em; }
.post-body h3 { font-size: 1em; }
.post-body blockquote
{
	margin: 1.5em 0;
	padding-left: 1.25em;
	border-left: 3px solid var(--subtle);
	color: var(--light-gray);
}
.post-body img
{
	max-width: 100%;
	height: auto;
	display: block;
	margin: 1.5em 0;
}
.post-body a
{
	color: var(--link);
	border-bottom-color: var(--link-subtle);
}
.post-body a:hover
{
	color: var(--link-strong);
	border-bottom-color: var(--link);
}
.post-body ul,
.post-body ol
{
	padding-left: 1.5em;
	margin: 0 0 1.25em;
	list-style: initial;
}
.post-body ol { list-style: decimal; }
.post-body li { margin-bottom: 0.5em; }
.post-body hr
{
	border: 0;
	border-top: .1em solid var(--subtle);
	margin: 2em 0;
}

/* Blog index */

.post-list h1
{	
	margin-bottom: 1.5rem;
}

.post-list ol
{
	list-style: none;
	padding: 0;
	margin: 0;
}
.post-list li
{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 0.6rem 0;
	/* border-bottom: .1em solid var(--subtle); */
	gap: 1rem;
}
.post-list h3
{
	font-size: 1.25em;
	font-weight: bold;
}
.post-list h3 a
{
	color: var(--link);
	border-color: var(--link-subtle);
}
.post-list h3 a:hover
{
	color: var(--link-strong);
	border-color: var(--link);
}
.post-list time
{
	color: var(--subtle);
	font-size: 0.875em;
	white-space: nowrap;
}

@media (max-width: 500px)
{
	.post-list li
	{
		flex-direction: column;
		align-items: flex-start;
		gap: 0.1rem;
	}
}

/* Back link */

.site-footer a
{
	color: var(--light-gray);
	border: 0;
}
.site-footer a:hover
{
	color: var(--link);
}