.article {
	padding: 0 10px;
	font-family: Ysabeau;
}
h1.article-title {
	text-align: center;
	font-weight: normal;
	font-size: 1.7em;
	margin: 20px auto .6em;
	max-width: 1000px;
	padding: 0 10px;
	text-shadow:
		0 0 1px #0006,
		0 0 2px #0006,
		0 0 3px #0006,
		0 0 4px #0006,
		0 0 5px #0006,
		0 0 32px #0006,
		0 0 64px #0006
	;
}
.article-subtitle {
	margin: 0 auto 30px;
	text-align: center;
	color: #d9d4c9;
}
.article-subtitle > *:not(:first-child) {
	margin-top: .5em;
}
.article-date time {
	font-weight: bold;
}
.article-image {
	margin: 0 -10px;
}
.article-image img {
	max-width: 100%;
	display: block;
}

.article-body {
	line-height: 1.48;
	margin: 0 -10px 30px;
	max-width: 740px;
	font-size: 1.19em;
	padding: 1em 10px;
	hyphens: auto;
	position: relative;
	word-break: break-word;
}
.article-body::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	backdrop-filter: blur(9px);
	background: rgba(34, 34, 34, .2);
	border-radius: 0;
	z-index: -1;
	border: 1px solid #2f2714;
	border-width: 0 0 1px;
}
.article-body p {
	text-indent: 1em;
	margin: .6em 0;
}
.article-body ol p,
.article-body ul p,
.article-body table p {
	text-indent: 0;
}
.article-body p:first-of-type {
	margin-top: 0;
}
.article-body p:last-of-type {
	margin-bottom: 0;
}
.article-body figure {
	margin: 1.8em auto;
}
.article-body figure:not(.small-figure) {
	position: relative;
}
.article-body figure.spread-wide {
	max-width: 100vw;
	width: 1000px;
	left: 50%;
	transform: translate3d(-50%, 0, 0);
}
.article-body figure.small-figure {
	margin-left: -10px;
	margin-right: -10px;
}
.article-body figure img {
	max-width: 100%;
	height: auto;
	margin: auto;
	display: block;
}
.article-body figure.spread-wide img {
	width: auto;
}
.article-body figure.table {
	overflow-x: auto;
}
.article-body figure table {
	background: rgba(35, 35, 35, .86);
	border-spacing: 0;
	margin: auto;
}
.article-body figure:not(.small-figure) table {
	min-width: 900px;
}
@supports (backdrop-filter: blur(1px)) {
	.article-body figure table {
		background: rgba(25, 23, 18, .8);
		backdrop-filter: blur(14px);
	}
}
.article-body figure table th,
.article-body figure table td {
	padding: .8em;
	border: 1px solid #5b4b25;
}
.article-body figure table th {
	border-bottom: none;
	background: #311d2e;
}
.article-body figure table tr:not(:last-child) td {
	border-bottom: none;
}
.article-body figure table th:not(:last-child),
.article-body figure table td:not(:last-child) {
	border-right: none;
}
.article-body figure table thead tr:first-child th:first-child,
.article-body figure table tr:first-child td:first-child {
	border-top-left-radius: 10px;
}
.article-body figure table thead tr:first-child th:last-child,
.article-body figure table tr:first-child td:last-child {
	border-top-right-radius: 10px;
}
.article-body figure table thead:not(:empty) + tbody tr:first-child td:first-child {
	border-top-left-radius: 0;
}
.article-body figure table thead:not(:empty) + tbody tr:first-child td:last-child {
	border-top-right-radius: 0;
}
.article-body figure table tr:last-child td:first-child {
	border-bottom-left-radius: 10px;
}
.article-body figure table tr:last-child td:last-child {
	border-bottom-right-radius: 10px;
}
.article-body figcaption {
	width: calc(740px - 2 * 10px);
	max-width: 100vw;
	margin: .4em auto 0;
	font-size: .9em;
	font-style: italic;
	width: min(100%, calc(740px - 2 * 10px), 100vw);
}
.article-body figure:not(.small-figure) figcaption {
	padding: 0 .5em;
}
.article-body figure.small-figure figcaption {
	padding: 0 .8em;
}
@media (min-width: 541px) and (max-width: 760px) {
	.article-body figure:not(.small-figure) figcaption {
		padding: 0 .7em;
	}
}
.article-body figure.table figcaption {
	position: sticky;
	left: 0;
}

.article-body-footer {
	margin-top: 40px;
	font-size: .9em;
	font-style: italic;
	color: #999;
}
.article-body-footer::before {
	content: '';
	display: block;
	/* width: 180px; */
	height: 1px;
	background: #464335;
	margin-bottom: .4em;
}




/*********************/
/*   MEDIA QUERIES   */
/*********************/

@media (min-width: 541px) {
	h1.article-title {
		margin-top: 40px;
	}
	.article-subtitle {
		margin: 0 auto 50px;
	}
	.article-image {
		margin: 0 auto;
	}
	.article-image img {
		width: 100%;
		max-height: 320px;
		object-fit: cover;
		margin: auto;
		border-radius: 10px;
	}
	.article-body {
		margin: 30px auto;
	}
	.article-body::before {
		border-radius: 20px;
		border-width: 1px;
	}
	.article-body figure.small-figure {
		margin-left: auto;
		margin-right: auto;
		max-width: max-content;
	}
	.article-body figure.small-figure img {
		border-radius: 10px;
	}
	.article-body figure:not(.small-figure) figcaption {
		padding: 0 1.7em;
	}
	.article-body figure.small-figure figcaption {
		padding: 0;
	}
}

@media (min-width: 621px) {
	.article-image {
		margin: 0 auto;
	}
	.article-image img {
		width: 100%;
		max-height: 320px;
		object-fit: cover;
		margin: auto;
		border-radius: 10px;
	}
	.article-body {
		margin: 30px auto;
		padding: 1em 20px;
	}
}

@media (min-width: 721px) {
	.article-body figure:not(.small-figure) figcaption {
		padding: 0;
		max-width: min(100%, calc(740px - 2 * 15px), 100vw);
	}
	
	@media (max-width: 760px) {
		.article-body figure:not(.small-figure) figcaption {
			padding: 0 25px;
			max-width: initial;
			width: 100%;
		}
	}
}

@media (min-width: 801px) {
	h1.article-title {
		margin-top: 50px;
	}
	.article-subtitle {
		margin: 0 auto 60px;
	}
}

@media (min-width: 911px) {
	h1.article-title {
		font-size: 2.2em;
	}
	.article-image img {
		width: auto;
		height: 520px;
		max-height: initial;
	}
}

@media (min-width: 1001px) {
	.article-body figure img {
		border-radius: 20px;
	}
	.article-body figure.small-figure img {
		border-radius: 10px;
	}
}

@media (min-width: 1011px) {
	h1.article-title {
		margin-top: 70px;
	}
	.article-subtitle {
		margin: 0 auto 80px;
	}
	.article-image img {
		width: auto;
		height: 520px;
		max-height: initial;
	}
}

@media (max-width: 900px) {
	.article-body figure:not(.small-figure) table thead tr:first-child th:first-child,
	.article-body figure:not(.small-figure) table tr:first-child td:first-child,
	.article-body figure:not(.small-figure) table thead tr:first-child th:last-child,
	.article-body figure:not(.small-figure) table tr:first-child td:last-child,
	.article-body figure:not(.small-figure) table tr:last-child td:first-child,
	.article-body figure:not(.small-figure) table tr:last-child td:last-child {
		border-radius: 0;
	}
}

@media (max-width: 540px) {
	.article-body figure.small-figure table thead tr:first-child th:first-child,
	.article-body figure.small-figure table tr:first-child td:first-child,
	.article-body figure.small-figure table thead tr:first-child th:last-child,
	.article-body figure.small-figure table tr:first-child td:last-child,
	.article-body figure.small-figure table tr:last-child td:first-child,
	.article-body figure.small-figure table tr:last-child td:last-child {
		border-radius: 0;
	}
}