body {
	margin: 0;
	background: #f0e5cd;
	color: #2c1a14;
	font: 20px/1.6 Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
}
a { color: #6b1c2a; }

.titlepage {
	background: #5e1a27;
	color: #f0e5cd;
	padding: 5vw;
}
.frame {
	border: 1px solid #f0e5cd;
	outline: 1px solid #f0e5cd;
	outline-offset: 5px;
	text-align: center;
	padding: 11vh 16px;
}
.titlepage h1 {
	font-weight: 400;
	font-size: clamp(44px, 8vw, 96px);
	line-height: 1.05;
	margin: 8px 0 26px;
}
.small {
	margin: 0;
	font-size: 15px;
	font-variant: small-caps;
	letter-spacing: .14em;
}
.rule {
	width: 70px;
	height: 5px;
	border-top: 1px solid #f0e5cd;
	border-bottom: 1px solid #f0e5cd;
	margin: 0 auto 22px;
}

article {
	max-width: 32em;
	margin: 0 auto;
	padding: 72px 22px 30px;
}
h2 {
	font-weight: 400;
	font-style: italic;
	font-size: 34px;
	line-height: 1.2;
	margin: 0 0 26px;
	color: #5e1a27;
}
article p { margin: 0; text-indent: 1.5em; text-align: justify; hyphens: auto; }
article p.first { text-indent: 0; }
article p.first::first-letter {
	float: left;
	font-size: 4.6em;
	line-height: .82;
	padding: 6px 10px 0 0;
	color: #5e1a27;
}

.pairs {
	max-width: 54em;
	margin: 0 auto;
	padding: 50px 22px;
}
.caption { font-size: 16px; font-style: italic; margin: -14px 0 30px; }
.pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 3px double #5e1a27;
	margin-bottom: 32px;
	font-size: 17px;
	line-height: 1.5;
}
.pair h3 {
	grid-column: 1 / -1;
	font-weight: 400;
	font-size: 21px;
	margin: 12px 0 12px;
}
.col { padding: 16px 18px 20px; }
.col span {
	display: block;
	font-variant: small-caps;
	letter-spacing: .12em;
	font-size: 14px;
	margin-bottom: 6px;
}
.before { background: #e4d6b6; }
.after { background: #5e1a27; color: #f0e5cd; }

footer {
	border-top: 1px solid #5e1a27;
	max-width: 32em;
	margin: 0 auto 60px;
	padding: 22px 22px 0;
	font-size: 16px;
}
@media (max-width: 640px) {
	body { font-size: 18px; }
	.pair { grid-template-columns: 1fr; }
	article p { text-align: left; }
}