:root {
	--primer-color: ivory;
	--body-font-size: 17px;
	--leading: 24px;
	--space-before: calc(2 * var(--leading));
}
body {
	font-size: var(--body-font-size);
	font-family: Bitter, Palatino, serif;
	background-color: var(--primer-color);
	line-height: 32px;
	max-width: 720px;
	margin: auto;
	padding-left: 18px;
	padding-right: 18px;
}
name, pearl {
	font-variant: small-caps;
	text-decoration: none;

}
name {
	display: block;
	margin-top: var(--leading);
	margin-bottom: var(--leading);
	font-size: 36px;
	font-weight: normal;
	text-align: center;
}
pearl > a {
	color: black;
	text-decoration: none;
}
pearl > a:hover {
	text-decoration: underline;
}
context {
	margin-top: var(--leading);
	display: block;
}
context::before {
  content: "…";
}
constitution {
	display: block;
	margin-top: var(--leading);
}
constitution::after {
  content: "…";
}
therefore, wish {
	font-weight: bold;
	display: block;
	margin-top: var(--leading);
}
therefore::before {
	content: "Therefore:";
	font-weight: normal;
	display: block;
	margin-top: var(--leading);
	margin-bottom: var(--leading);
}
context::after, rationale::before, constitution::before {
	content: "❖ ❖ ❖"; //"✣ ✣ ✣";
	text-align: center;
	display: block;
	font-weight: normal;
	font-size: larger;
	margin-top: var(--leading);
	margin-bottom: var(--leading);
}
rationale {
	display: block;
}
rationale::after, fin::after {
	content: "❦";
	display: block;
	text-align: center;
}
hero, sketch, photo {
	display: flex;
	justify-content: center;
	margin-top: var(--leading);
}
publication {
	font-style: italic;
}
hero {
	border: 2px solid black;
}
hero > img {
	width: 100%;
}
sketch > figure > img {
	width: 324px;
}
figure {
	display: inline-block;
	margin: 0;
}
figure figcaption {
	text-align: center;
	font-size: smaller;
}
.section {
	font-variant: small-caps;
	text-align: center;
}