/* The Chronicle of the Crown: whoisthekingofaiseo.com
	 A printed-chronicle look: parchment, iron-gall ink, rubricated headings.
	 Plain CSS, no build step, no scripts. */

html {
	color-scheme: light;
	-webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: #f6efdf;
	background-image:
		radial-gradient(ellipse at top, rgba(255, 252, 243, 0.9), rgba(246, 239, 223, 0) 60%),
		radial-gradient(ellipse at bottom, rgba(214, 196, 158, 0.25), rgba(246, 239, 223, 0) 70%);
	color: #1f1812;
	font-family: "EB Garamond", Georgia, "Times New Roman", serif;
	font-size: 1.25rem;
	line-height: 1.6;
	font-feature-settings: "liga", "onum", "kern";
}

a {
	color: #8b1a1a;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: #1f1812;
}

a:focus-visible {
	outline: 2px solid #8b1a1a;
	outline-offset: 3px;
}

img,
svg {
	max-width: 100%;
	height: auto;
}

.skip {
	position: absolute;
	left: -9999px;
}

.skip:focus {
	left: 1rem;
	top: 1rem;
	background: #1f1812;
	color: #f6efdf;
	padding: 0.4rem 0.8rem;
}

/* ---------- masthead ---------- */

.masthead {
	max-width: 62rem;
	margin: 0 auto;
	padding: 2.2rem 1.25rem 0.5rem;
	text-align: center;
}

.masthead__site {
	margin: 0;
	font-family: "IM Fell English SC", Georgia, serif;
	font-size: 1rem;
	letter-spacing: 0.18em;
}

.masthead__site a {
	color: #1f1812;
	text-decoration: none;
}

.masthead__name {
	margin: 0.3rem 0 0;
	font-family: "IM Fell English", Georgia, serif;
	font-size: clamp(2rem, 6vw, 3.4rem);
	line-height: 1.05;
	color: #8b1a1a;
}

.masthead__rule {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0.8rem auto 0.4rem;
	max-width: 30rem;
	color: #8b1a1a;
	font-size: 1.4rem;
}

.masthead__rule::before,
.masthead__rule::after {
	content: "";
	flex: 1;
	border-top: 1px solid #b8a271;
	border-bottom: 1px solid #b8a271;
	height: 4px;
}

.masthead__meta {
	margin: 0;
	font-style: italic;
	font-size: 1rem;
	color: #5b4b39;
}

/* ---------- the folio ---------- */

.folio {
	max-width: 62rem;
	margin: 0 auto;
	padding: 1rem 1.25rem 2rem;
}

.entry__head {
	text-align: center;
	margin: 1.6rem 0 1.8rem;
}

.entry__kicker {
	margin: 0;
	font-family: "IM Fell English", Georgia, serif;
	font-style: italic;
	font-size: clamp(1.3rem, 3vw, 1.7rem);
	color: #5b4b39;
}

.entry__title {
	margin: 0.2rem 0 0;
	font-family: "IM Fell English", Georgia, serif;
	font-weight: 400;
	font-size: clamp(2.4rem, 7.5vw, 4.6rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
}

.lead::first-letter {
	float: left;
	font-family: "IM Fell English", Georgia, serif;
	font-size: 4.6em;
	line-height: 0.82;
	padding: 0.06em 0.12em 0 0;
	color: #8b1a1a;
}

.entry p {
	margin: 0 0 1rem;
	hyphens: auto;
}

/* ---------- infobox ---------- */

.infobox {
	margin: 0 0 1.6rem;
	border: 1px solid #b8a271;
	outline: 1px solid #b8a271;
	outline-offset: 4px;
	background: rgba(255, 251, 240, 0.7);
	padding: 1rem;
	font-size: 1rem;
	line-height: 1.4;
}

.infobox__portrait {
	margin: 0 0 0.8rem;
	text-align: center;
}

.cameo {
	position: relative;
	width: 13rem;
	margin: 2.4rem auto 0;
}

.cameo img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 50% / 50%;
	border: 3px double #1f1812;
}

.cameo__crown {
	position: absolute;
	left: 50%;
	top: -2.7rem;
	width: 7.5rem;
	transform: translateX(-50%) rotate(-4deg);
}

.infobox__portrait figcaption {
	margin-top: 0.5rem;
	font-family: "IM Fell English SC", Georgia, serif;
	letter-spacing: 0.06em;
}

.infobox__facts {
	width: 100%;
	border-collapse: collapse;
}

.infobox__facts caption {
	font-family: "IM Fell English", Georgia, serif;
	font-size: 1.25rem;
	color: #8b1a1a;
	padding-bottom: 0.4rem;
}

.infobox__facts th,
.infobox__facts td {
	text-align: left;
	vertical-align: top;
	padding: 0.42rem 0.3rem;
	border-top: 1px solid #d9c9a3;
}

.infobox__facts th {
	width: 38%;
	font-family: "IM Fell English SC", Georgia, serif;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: #5b4b39;
}

@media (min-width: 52rem) {
	.infobox {
		float: right;
		width: 19.5rem;
		margin: 0 0 1.5rem 2.2rem;
	}
}

/* ---------- contents ---------- */

.contents {
	display: inline-block;
	margin: 0.6rem 0 1.6rem;
	padding: 0.8rem 1.4rem 0.6rem;
	border: 1px solid #d9c9a3;
	background: rgba(255, 251, 240, 0.55);
	font-size: 1.05rem;
}

.contents__title {
	margin: 0 0 0.3rem;
	font-family: "IM Fell English SC", Georgia, serif;
	font-weight: 400;
	font-size: 1.15rem;
	letter-spacing: 0.08em;
	color: #8b1a1a;
}

.contents ol {
	margin: 0;
	padding-left: 1.5rem;
	list-style: upper-roman;
}

/* ---------- chapters ---------- */

.chapter {
	clear: none;
	margin-top: 2.4rem;
}

.chapter__title {
	overflow: hidden;
	margin: 0 0 0.9rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid #b8a271;
	font-family: "IM Fell English", Georgia, serif;
	font-weight: 400;
	font-size: clamp(1.7rem, 4vw, 2.3rem);
	line-height: 1.15;
	color: #1f1812;
}

.chapter__num {
	color: #8b1a1a;
	margin-right: 0.3rem;
}

.chapter__sub {
	margin: 1.4rem 0 0.4rem;
	font-family: "IM Fell English SC", Georgia, serif;
	font-weight: 400;
	font-size: 1.25rem;
	letter-spacing: 0.05em;
	color: #8b1a1a;
}

dfn {
	font-style: normal;
	font-weight: 600;
}

/* ---------- the roll of rulers ---------- */

.roll {
	list-style: none;
	counter-reset: ruler;
	margin: 1.4rem 0 0;
	padding: 0;
	border-left: 3px double #b8a271;
}

.roll__entry {
	counter-increment: ruler;
	position: relative;
	padding: 0.2rem 0 1.1rem 3.6rem;
}

.roll__entry::before {
	content: counter(ruler, upper-roman);
	position: absolute;
	left: 0.7rem;
	top: 0.15rem;
	width: 2.4rem;
	font-family: "IM Fell English", Georgia, serif;
	font-size: 1.15rem;
	color: #8b1a1a;
	text-align: right;
}

.roll__name {
	margin: 0 !important;
	font-family: "IM Fell English", Georgia, serif;
	font-size: 1.45rem;
	line-height: 1.2;
}

.roll__reign {
	margin: 0.1rem 0 0.35rem !important;
	font-size: 1rem;
	color: #5b4b39;
}

.roll__true {
	font-family: "IM Fell English SC", Georgia, serif;
	letter-spacing: 0.03em;
}

.roll__entry--turn {
	background: linear-gradient(90deg, rgba(139, 26, 26, 0.06), rgba(139, 26, 26, 0));
}

.roll__entry--king {
	margin-top: 0.4rem;
	padding-top: 0.9rem;
	padding-bottom: 1rem;
	border-top: 1px solid #b8a271;
	background: linear-gradient(90deg, rgba(196, 154, 54, 0.18), rgba(196, 154, 54, 0));
}

.roll__entry--king .roll__name {
	font-size: 1.8rem;
	color: #8b1a1a;
}

/* ---------- the saying, the arms ---------- */

.saying {
	margin: 1.8rem 0;
	padding: 0.4rem 0 0.4rem 1.4rem;
	border-left: 4px solid #8b1a1a;
	font-family: "IM Fell English", Georgia, serif;
	font-style: italic;
	font-size: 1.7rem;
	line-height: 1.3;
}

.saying p {
	margin: 0 0 0.3rem !important;
}

.saying footer {
	font-family: "EB Garamond", Georgia, serif;
	font-style: normal;
	font-size: 1rem;
	color: #5b4b39;
}

.arms {
	margin: 0.4rem auto 1.4rem;
	max-width: 17rem;
	text-align: center;
}

.arms figcaption {
	font-style: italic;
	font-size: 1rem;
	color: #5b4b39;
}

@media (min-width: 52rem) {
	.arms {
		float: left;
		margin: 0.3rem 2rem 1rem 0;
	}
}

.blazon {
	overflow: hidden;
	padding: 0.7rem 1rem;
	background: rgba(255, 251, 240, 0.65);
	border: 1px solid #d9c9a3;
}

#the-coronation {
	clear: both;
}

/* ---------- questions ---------- */

.questions dt {
	margin-top: 1rem;
	font-family: "IM Fell English", Georgia, serif;
	font-size: 1.3rem;
}

.questions dd {
	margin: 0.2rem 0 0;
}

/* ---------- colophon ---------- */

.colophon {
	max-width: 62rem;
	margin: 2rem auto 0;
	padding: 1.2rem 1.25rem 3rem;
	text-align: center;
	font-size: 1.05rem;
	border-top: 1px solid #b8a271;
}

.colophon__rule {
	color: #8b1a1a;
	font-size: 1.6rem;
	margin: 0;
}

.colophon__links a {
	color: #1f1812;
}

.colophon__meta {
	font-style: italic;
	color: #5b4b39;
}

@media (max-width: 40rem) {
	body {
		font-size: 1.15rem;
	}

	.roll__entry {
		padding-left: 2.9rem;
	}

	.roll__entry::before {
		left: 0.1rem;
	}
}

@media print {
	body {
		background: #fff;
	}
}