@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Cutive+Mono&family=Domine:wght@400..700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Vollkorn+SC:wght@400;600;700;900&display=swap');

/* FONT WEIGHTS
	Courier Prime			400, 700
	Crimson Text			400, 600, 700
	Cutive Mono				400
	EB Garamond				400-800
	Lato					100, 300, 400, 700, 900
	Spectral 				200-800
	Times New Roman			400, 700
	Vollkorn SC				400, 600, 700, 900
*/

:root {
	--callout: 				#F7F7F7;
	--color-black: 			#111111;
	--color-black-2: 		#222222;
	--color-black-3: 		#333333;
	--color-black-4: 		#444444;
	--color-black-5: 		#555555;
	--color-black-6: 		#666666;
	--color-black-7: 		#777777;
	--color-black-8: 		#888888;
	--color-black-9: 		#999999;
	--color-grey-dk: 		#B1B1B1;
	--color-grey-lt: 		#E0DEDC;
	--color-grey-md: 		#CCCCCC;
	--color-pink: 			#DA5556;
	--color-pink-lt: 		#F3CAC4;
	--color-pink-md: 		#DB9388;
	--color-white: 			#FFFFFF;
	--color-off-white: 		#FFFDFB;
	--color-ivory: 			#F7F5F0;
	--color-gold:			#FCEAAF;
	--color-brown:	 		#403734;
	--color-brown-dk: 		#2C2624;
	--font-courier: 		'Courier Prime', monospace;
	--font-crimson: 		'Crimson Text', serif;
	--font-cutive: 			'Cutive Mono', monospace;
	--font-domine:			'Domine', serif; /* magazine font */
	--font-garamond: 		'EB Garamond', serif;
	--font-lato: 			'Lato', sans-serif;
	--font-montserrat: 		'Montserrat', sans-serif;
	--font-opens: 			'Open Sans', sans-serif;
	--font-spectral:		'Spectral', serif; /* palatino copy */
	--font-times: 			'Times New Roman', serif;
	--font-vollkorn: 		'Vollkorn SC', serif;
	--weight-thin: 			100;
	--weight-extra-light:	200;
	--weight-light: 		300;
	--weight-regular: 		400;
	--weight-medium: 		500;
	--weight-semi-bold: 	600;
	--weight-bold: 			700;
	--weight-extra-bold: 	800;
	--weight-black: 		900;
	--g: 					1px;
}

/* ===============================================
1. BASE STYLES
================================================== */
html, body {
	height: 100%;
	margin: 0;
	overflow-x: hidden;
}
html {
	font-size: 100%;
}
body {
	display: flex;
	flex-direction: column;
	font-family: var(--font-lato);
	color: var(--color-black);
	background-color: var(--color-white);
}
main { flex: 1; }
h1, h2, h3, h4, h5, h6 { 
	font-family: var(--font-crimson); 
	font-weight: 200; 
}
h2 { font-size: 2rem; }
h3 { font-size: 1.85rem; }
h4 { font-size: 1.7rem; }
h5 { font-size: 1.5rem; }
b, strong { font-weight: 600 !important; }
i, em {
	font-style: italic;
	font-style: oblique 14deg;
}
ul ul { margin: 0 !important; }
li:not(.archive-category-posts li, .dropdown-menu-sections li) { padding-left: 10px !important; }
li::marker { font-size: 0.85rem; }
*, *::before, *::after { box-sizing: border-box; }
::selection { background: var(--color-pink-lt); }
blockquote {
	display: block;
	margin: 3rem 0;
	padding: 1rem 3rem 2rem;
	border: 0;
	background-color: var(--callout);
}
blockquote p, 
cite {
	font-family: var(--font-crimson) !important;
}
blockquote p {
	font-size: 1.4rem !important;
	line-height: 1.6 !important;
	font-style: normal;
}
cite {
	font-size: 1.1rem;
	font-style: italic;
	text-align: center;
}
sup { 
	line-height: 0; 
	font-size: 0.7em;
}
button {
	background-color: transparent !important;
	border: none !important;
}
button:hover, 
input[type="submit"] { cursor: pointer; }
table, 
thead { border: 0.5px solid var(--color-black-7) !important; }

.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.alignleft {
    float: left;
    margin: 0 1.5em 1.5em 0;
}
.alignright {
    float: right;
    margin: 0 0 1.5em 1.5em;
}
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.lowercase { text-transform: lowercase; }
.uppercase { text-transform: uppercase; }
.hide { display: none !important; }

.screen-reader-text {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    overflow: hidden;
    white-space: nowrap;
}
.screen-reader-text:focus {
    clip: auto;
    clip-path: none;
    height: auto;
    width: auto;
    position: static;
}

.has-drop-cap:not(:focus)::first-letter,
.has-drop-cap:not(:focus):first-letter {
	float: left;
	text-align: left;
	vertical-align: text-bottom;
	text-transform: uppercase !important;
	font-size: 5rem !important;
	line-height: 0.5;
	margin: 15px 0.9rem 0 0;
	padding: 0;
	font-variant: none !important;
}
.has-drop-cap::first-line {
	text-transform: lowercase;
	font-variant: small-caps;
	letter-spacing: 0.03em;
	font-size: 1.4rem;
}
.caps {
	text-transform: lowercase;
	font-variant: small-caps;
	letter-spacing: 0.03em;
}
@supports (font-variant-caps: all-small-caps) {
	.has-drop-cap::first-line, 
	.caps {
		font-variant: normal; 
		font-variant-caps: all-small-caps;
		font-weight: 600;
	}
	.caps {
		font-weight: 400 !important;
	}
}

.pagination {
	margin: 0;
	padding: 20px;
	text-align: center;
}
.pagination .page-numbers, 
.pagination .first-page, 
.pagination .last-page {
	padding: 10px;
	font-family: var(--font-lato);
	font-size: 0.8rem;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--color-black-2);
}
.pagination .first-page, 
.pagination .last-page, 
.pagination .next, 
.pagination .prev { font-size: 1rem; }
.pagination .page-numbers.current { font-weight: 600; }
.pagination a { text-decoration: none; }

h3 a {
	color: inherit;
	text-decoration: none;
}