/*
 * Draftsperson.net entry page
 * Self-contained stylesheet — reproduces the look of the original
 * Genesis / Magazine Pro (StudioPress) theme without the WordPress dependency.
 */

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

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

body {
	margin: 0;
	background-color: #fff;
	color: #222;
	font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.625;
	overflow-x: hidden;
}

img {
	height: auto;
	max-width: 100%;
	border: 0;
}

/* ---------- Links ---------- */
a {
	color: #008285;
	font-weight: 400;
	text-decoration: none;
	transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
}

a:focus,
a:hover { color: #222; }

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6 {
	font-family: Raleway, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 16px;
}

h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }

/* ---------- Layout containers ---------- */
.site-inner,
.wrap {
	margin: 0 auto;
	max-width: 1140px;
}

.site-header,
.site-inner,
.site-footer {
	padding-left: 5%;
	padding-right: 5%;
}

.site-inner {
	clear: both;
	padding-top: 40px;
	padding-bottom: 40px;
}

/* clearfix for floated header rows */
.wrap::after {
	clear: both;
	content: " ";
	display: table;
}

/* ---------- Skip link (visible only on keyboard focus) ---------- */
.genesis-skip-link {
	margin: 0;
	padding: 0;
	list-style: none;
}

.genesis-skip-link li {
	list-style: none;
}

.genesis-skip-link a {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.genesis-skip-link a:focus {
	background: #fff;
	clip: auto;
	color: #008285;
	display: block;
	height: auto;
	left: 5px;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* ---------- Header ---------- */
.site-header .wrap {
	border-bottom: 2px solid #222;
	padding: 30px 0;
}

.title-area {
	float: left;
	max-width: 380px;
	padding: 0;
	text-align: center;
}

.custom-logo-link {
	display: block;
	margin: 0 auto;
}

.custom-logo { width: auto; }

/* Site title & description are shown to screen readers only,
   because the logo image carries the branding (as on the original site). */
.site-title,
.site-description {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.header-widget-area {
	float: right;
	max-width: 570px;
	text-align: right;
}

.header-widget-area p { margin: 0; }

/* ---------- Entry content ---------- */
.entry-content h2 { margin-bottom: 16px; }

.entry-content blockquote {
	color: #888;
	margin: 24px 40px;
}

.entry-content blockquote p { margin: 0; }

.entry-content p { margin: 0 0 16px; }

/* Short site history / trust line under the intro */
.entry-content p.site-about {
	color: #555;
	font-style: italic;
}

/* Featured / highlighted content under each section heading */
.featured-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.featured-list li {
	border-left: 2px solid #008285;
	color: #555;
	margin: 0 0 10px;
	padding: 2px 0 2px 16px;
}

.featured-list li a {
	font-weight: 400;
}

/* Wide separator, as used by the WordPress block editor */
hr.wp-block-separator {
	border: none;
	border-top: 2px solid #222;
	margin: 24px 0;
	opacity: 0.15;
}

hr.wp-block-separator.is-style-wide { width: 100%; }

.has-text-align-left { text-align: left; }

/* ---------- Footer ---------- */
.site-footer {
	background-color: #222;
	font-family: Raleway, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	text-align: center;
}

.site-footer,
.site-footer a { color: #aaa; }

.site-footer a:focus,
.site-footer a:hover { color: #fff; }

.site-footer .wrap {
	border-top: 1px solid #444;
	padding: 60px 0;
}

.site-footer p { margin: 0; }

/* ---------- Responsive ---------- */
@media only screen and (max-width: 860px) {
	.title-area,
	.header-widget-area {
		float: none;
		max-width: 100%;
		text-align: center;
	}

	.header-widget-area {
		margin-top: 20px;
	}

	h1 { font-size: 30px; }
	h2 { font-size: 26px; }

	.entry-content blockquote { margin: 24px 20px; }
}