/*-------------------------------------------------------------------------*/
/* Site pages: Content wrapper (card)
/*-------------------------------------------------------------------------*/
.site-page {
	max-width: 860px;
	margin: 0 auto;
	background: rgba(16, 10, 7, 0.72);
	border: 1px solid rgba(59, 43, 29, 0.65);
	border-radius: 16px;
	padding: 1.75rem 2rem;
	-webkit-box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

/*-------------------------------------------------------------------------*/
/* Site pages: Prose content (TinyMCE output)
/*-------------------------------------------------------------------------*/
.site-page p,
.site-page li,
.site-page td {
	color: var(--color-base);
	font-family: var(--font-family-tertiary, Roboto, sans-serif);
	font-size: .96rem;
	line-height: 1.75;
}

.site-page p {
	margin-bottom: 1rem;
}

.site-page h1,
.site-page h2,
.site-page h3,
.site-page h4 {
	color: var(--color-idle);
	font-family: var(--font-family-nav, LoraBold, serif);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	line-height: 1.2;
	margin: 1.75rem 0 .65rem;
}

.site-page > h1:first-child,
.site-page > h2:first-child,
.site-page > h3:first-child,
.site-page > h4:first-child,
.site-page > *:first-child > h1:first-child,
.site-page > *:first-child > h2:first-child {
	margin-top: 0;
}

.site-page > p:last-child {
	margin-bottom: 0;
}

.site-page h1 { font-size: 1.6rem; }
.site-page h2 { font-size: 1.3rem; }
.site-page h3 { font-size: 1.1rem; }
.site-page h4 { font-size: .95rem; }

.site-page a {
	color: var(--color-inactive);
	text-decoration: underline;
	-webkit-text-decoration-color: rgba(193, 154, 87, 0.35);
	text-decoration-color: rgba(193, 154, 87, 0.35);
	-webkit-transition: color 150ms;
	-o-transition: color 150ms;
	transition: color 150ms;
}

.site-page a:hover {
	color: var(--color-active);
}

.site-page img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
	margin: 1rem auto;
}

.site-page ul,
.site-page ol {
	padding-left: 1.4rem;
	margin-bottom: 1rem;
}

.site-page li {
	margin-bottom: .3rem;
}

.site-page hr {
	border: 0;
	border-top: 1px solid rgba(193, 154, 87, 0.18);
	margin: 1.75rem 0;
}

.site-page blockquote {
	border-left: 3px solid rgba(193, 154, 87, 0.4);
	margin: 1.25rem 0;
	padding: .6rem 1.1rem;
	background: rgba(193, 154, 87, 0.05);
	border-radius: 0 8px 8px 0;
	color: var(--color-base);
	font-style: italic;
	opacity: .9;
}

.site-page table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1rem;
}

.site-page table th,
.site-page table td {
	padding: .55rem .75rem;
	border: 1px solid rgba(193, 154, 87, 0.18);
	text-align: left;
}

.site-page table th {
	color: var(--color-inactive);
	font-family: var(--font-family-nav, LoraBold, serif);
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	background: rgba(193, 154, 87, 0.06);
}

.site-page strong,
.site-page b {
	color: var(--color-idle);
	font-weight: 700;
}

/*-------------------------------------------------------------------------*/
/* Site pages: Optional background
/*-------------------------------------------------------------------------*/
body.page-site-active .section-page {
	position: relative;
}

body.page-site-active .site-page {
	position: relative;
	z-index: 1;
}

body.page-site-active .section-page::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: var(--page-bg);
	background-size: cover;
	background-position: center top;
	opacity: .12;
	pointer-events: none;
	z-index: 0;
}