:root {
	--red: #ff0000;

    --beige: #c19b76;
    --text: #858585;

    --black: #000;
    --dgray: #1c1c1c;
    --border: #e1e1e1;
    --gray: #333;
    --lgray: #f8f8f8;
    --white: #FFF;
}

body {
	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: var(--text);
	line-height: 26px;
}

section.m8 {
	max-width: 800px;
	margin: 0 auto;
}

.content h1,
.content h3 {
	font-family: "Playfair Display", serif;
	font-style: normal;
	color: var(--dgray);
}

.content h1 {
	font-size: 54px;
	font-weight: 400;
}

.content h3 {
	font-size: 28px;
	font-weight: 400;
}

.content h4 {
	font-size: 14px;
	text-transform: uppercase;
	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: var(--beige);
	letter-spacing: 5px;
}

.content h4 + h1 {
	margin-top: -10px;
}

.content a {
	color: var(--dgray);
	text-decoration: underline;
	transition: color .5s ease;
}

.content a:hover { color: var(--beige); }

/*
main .anchor {
	height: 60px;
	margin-top: -60px;
	z-index: -1;
}
*/

.content p,
.content li {
	line-height: 26px;
	font-size: 16px;
}

.content ul li,
.content ol li {
	padding: 5px;
	color: var(--text);
}

.content ul li {
	list-style: none;
	position: relative;
}

.content ul li::before {
	position: absolute;
	display: block;
	content: ' ';
	border-bottom: 1px solid var(--beige);
	border-right: 1px solid var(--beige);
	width: 6px;
	height: 12px;
	top: 14px;
	left: -20px;
	transform: translateY(-50%) rotate(45deg);
}

/* IFNO: https://stackoverflow.com/questions/14593415/how-to-strike-through-obliquely-with-css */
.content del {
    position: relative;
    text-decoration: none;
    padding: 0 5px;
}

.content del::after {
    content: '';
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--beige);
    transform: rotate(-10deg);
}
/* <-- */

.content a.button {
	display: inline-block;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	/*font-weight: bold;*/
	margin-top: 20px;
}

.content a.button.gray {
	padding: 10px 25px;
	background-color: var(--text);
	color: var(--white);
	font-size: 12px;
	letter-spacing: 2px;
	cursor: default;
}

.content a.button.beige {
	padding: 15px 40px 13px 40px;
	background-color: var(--beige);
	color: var(--white);
	transition: background-color .3s;
}

.content a.button.beige:hover {
	background-color: var(--dgray);
}

.content a.button.white {
	padding: 15px 40px 13px 40px;
	background-color: var(--white);
	color: var(--dgray);
	transition: background-color .3s;
}

.content a.button.white:hover {
	background-color: var(--lgray);
}

.content a.button.border {
	padding: 14px 39px 12px 39px;
	background-color: var(--white);
	border: 1px solid var(--dgray);
	transition: background-color .3s, color .3s;
}

.content a.button.border:hover {
	background-color: var(--dgray);
	color: var(--white);
}

.content a.button.more {
	padding: 15px 20px 13px 20px;
	color: var(--dgray);
	transition: color .3s;
}

.content a.button.more:hover { color: var(--beige); }

main > div.lgray {
    background-color: var(--lgray);
}

main > div.lgray h1 {
	color: var(--gray);
}

.content div.quote {
	background-color: var(--beige);
	font-style: italic;
	font-size: 16px;
	line-height: 26px;
	color: var(--white);
	text-align: right;

	margin: 20px 0;
	padding: 20px 30px;
}


/* Page Gallery */
.xPageGallery { padding: 5px; }

.xPageGallery a {
    display: inline-block;
    padding: 5px;
    box-sizing: border-box;
}

.xPageGallery img { transition: transform .2s; }

.xPageGallery img:hover {
    z-index: 1;
    transform: scale(1.03);
}

.xPageGallery a img {
    object-fit: cover;
    width: 100%;
    aspect-ratio: 1/1;
    transition: transform .5s;
}

@media (max-width: 640px) {
    .xPageGallery a { width: 50%; }
}

@media (min-width: 640px) and (max-width: 900px) {
    .xPageGallery a { width: 33.333%; }
}

@media (min-width: 900px) and (max-width: 1160px) {
    .xPageGallery a { width: 25%; }
}

@media (min-width: 1160px) and (max-width: 1440px) {
    .xPageGallery a { width: 20%; }
}

@media (min-width: 1440px) {
    .xPageGallery a { width: 16.666%; }
}
/* <<< */