:root {
	--avatar: 3rem;
}
article:not(#blog:has(#posts) *) {
	margin: 0 auto;
}
article {
	max-width: var(--post);
	& ul {
		margin: 0;
	}
	& > .postscript::after {
		background-color: var(--primary);
	}
	& section:not(section:has(p)) {
		display: flex;
		gap: var(--pad-l);
	}
	& aside {
		float: right;
		border-radius: var(--round);
		width: 66%;
	}
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-bottom: var(--pad-m);
	}
	& .post-warning {
		display: flex;
		flex-direction: column;
		font-size: 1.4rem;
		font-weight: bold;
		text-align: center;
		&::before,
		&::after {
			content: "";
			display: inherit;
			border-width: 2px;
			border-style: dashed;
		}
	}
}
.addendum,
.post-warning,
article aside {
	margin: var(--pad-l) 0;
	padding: var(--pad-l);
}
article > .addendum {
	border-image-slice: 1;
	border-image-width: 2px;
	border-image-outset: 4px;
}

article > .postscript {
	margin: 0 0 auto auto;
	padding: 2rem 0 4rem 0;
	&::after {
		content: "";
		position: absolute;
		width: 64px;
		height: 64px;
		mask-image: var(--paw);
		mask-size: 100%;
		mask-repeat: no-repeat;
		transform: rotate(15deg);
	}
	& p {
		display: flex;
		flex-direction: column;
		transition: background-color var(--trans);
		margin-top: inherit;
		margin-left: inherit;
		margin-right: var(--avatar);
		margin-bottom: var(--pad-l);
		border-radius: var(--round);
		border-bottom-right-radius: 0;
		width: fit-content;
		padding: var(--pad-m);
		background-color: #0060df;
		color: #fff;
		font-size: 0.8rem;
		word-wrap: anywhere;
		&:hover {
			background-color: #3a76f0;
		}

		& a:has(img:nth-child(n + 2)) {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(min(100%, 40%), 1fr));
			align-items: center;
			gap: var(--pad-m);
		}
		& > img {
			transition: height var(--trans), border-radius var(--trans),
				background-color var(--trans);
			border-radius: var(--round);
			min-height: fit-content;
			max-height: var(--image);
		}
	}
	& span:has([alt]) {
		width: var(--avatar);
		height: var(--avatar);
		display: flex;
		float: right;
		& [alt="Profile picture"] {
			display: flex;
			box-sizing: content-box;
			margin: 0 0 0 auto;
			border-radius: 100%;
			width: inherit;
			height: inherit;
		}
	}
}

#posts {
	max-width: var(--post);
	& ul {
		display: flex;
		flex-direction: column;
		gap: var(--pad-l);
		margin: 0;
		padding: 0;
	}

	& a {
		display: flex;
		flex-direction: column;
		border-style: solid;
		border-width: 2px;
		border-radius: var(--round);
		padding: var(--pad-m);
		font-size: 1.125rem;
		font-weight: bold;
		text-decoration: none;
		word-break: break-word;
		& time,
		p {
			display: flex;
			font-size: 1rem;
			font-weight: normal;
		}
	}
}
@media screen and (max-width: 920px) {
	article aside {
		float: unset;
		width: fit-content;
	}
	article section {
		flex-direction: column;
	}
	#posts {
		max-width: unset;
		width: auto;
	}
	article > .postscript {
		& p {
			margin-right: var(--pad-sm);
			& > a img {
				height: auto;
				max-height: var(--view);
			}
		}
	}
}
@media (prefers-reduced-motion: reduce) {
	article > .postscript {
		& p,
		p > img {
			transition: none;
		}
	}
	#blog #posts a {
		transition: none;
	}
}