/* AudioSpillage — blog / post content
   =====================================================================
   Styles the HTML that the WordPress editor produces. Loaded by both the
   WordPress theme and the local preview harness, and it is the part that
   carries over unchanged if the blog later moves to a REST-driven page —
   the templates around it are replaceable, this is not.

   Scoped under .entry-content / .entry-summary so it can never leak into
   the main site's markup.

   Built against the real 25 posts: 373 <p>, 102 <li>, 94 <strong>, 70 <a>,
   56 <img>, h1-h3, 13 <ul>, 3 <figure>, 2 <iframe>, 1 <blockquote>,
   1 <pre>, plus WordPress alignment classes and Gutenberg blocks.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Post furniture
   --------------------------------------------------------------------- */
.post {
	margin-bottom: 3.75rem;
}
.entry-title {
	margin-bottom: 0.25rem;
}
.entry-title a {
	color: #d7d7d7;
}
.entry-title a:hover {
	color: #ff571b;
	border-bottom: none;
}
.entry-meta {
	color: #898989;
	font-size: 0.8125rem;
	margin-bottom: 1.25rem;
}
.blogBackLink {
	margin-top: 2.5rem;
}
.blogPagination {
	margin-top: 1.25rem;
	margin-bottom: 2.5rem;
}
.archive-description {
	color: #898989;
	margin-bottom: 1.25rem;
}
.entry-pages {
	margin-top: 1.25rem;
}

/* ---------------------------------------------------------------------
   Sidebar widgets — Archives, Categories, Tags, Meta, Recent Comments.

   WordPress emits these as <aside class="widget widget_*"> with an <h3
   class="widget-title">, and their content is plain <ul><li><a>. The base
   stylesheet zeroes list margins, so all of it needs restating here.
   --------------------------------------------------------------------- */
.blogSidebar {
	font-size: 0.875rem;
}
.blogSidebar .widget {
	margin-bottom: 2.5rem;
}
.blogSidebar .widget-title {
	font-size: 1rem;
	line-height: 1.25rem;
	color: #d7d7d7;
	margin-bottom: 0.75rem;
}
.blogSidebar .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.blogSidebar .widget li {
	margin-bottom: 0.4375rem;
	line-height: 1.25rem;
}
/* Nested category/archive lists */
.blogSidebar .widget li ul {
	margin-top: 0.4375rem;
	margin-left: 0.875rem;
}
.blogSidebar .widget a {
	color: #898989;
}
.blogSidebar .widget a:hover {
	color: #ff571b;
}

/* Tag cloud: WordPress writes an inline font-size on every link, scaled for
   a layout this is not. Override it — the declaration is inline, so this
   needs !important to win. Sizes are clamped to a 2-step range instead. */
.blogSidebar .wp-tag-cloud,
.blogSidebar .tagcloud {
	line-height: 1.75rem;
}
.blogSidebar .tag-cloud-link,
.blogSidebar .tagcloud a {
	font-size: 0.8125rem !important;
	display: inline-block;
	margin-right: 0.5rem;
}
/* Keep a hint of the weighting the cloud is meant to convey. */
.blogSidebar .tag-cloud-link[style*="22"],
.blogSidebar .tag-cloud-link[style*="21"],
.blogSidebar .tag-cloud-link[style*="20"],
.blogSidebar .tag-cloud-link[style*="19"] {
	font-size: 1rem !important;
	color: #d7d7d7;
}

/* Search form, if one is ever added as a widget */
.blogSidebar .widget input[type="search"],
.blogSidebar .widget input[type="text"] {
	width: 100%;
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------
   Comments — reachable only when WordPress has them enabled, but styled
   so they are not unstyled if they ever are.
   --------------------------------------------------------------------- */
.commentsArea {
	margin-top: 3.75rem;
}
.commentsTitle {
	margin-bottom: 1.25rem;
}
.commentList,
.commentList .children {
	list-style: none;
	margin-left: 0;
}
.commentList .children {
	margin-left: 1.5rem;
}
.commentList li.comment {
	border-top: 1px solid #242424;
	padding-top: 1.25rem;
	margin-bottom: 1.25rem;
}
.commentList .comment-meta,
.commentList .comment-metadata {
	font-size: 0.8125rem;
	color: #898989;
	margin-bottom: 0.5rem;
}
.commentsClosed {
	color: #898989;
}
.commentsArea input[type="text"],
.commentsArea input[type="email"],
.commentsArea input[type="url"],
.commentsArea textarea {
	max-width: 100%;
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------
   Post body typography — the base stylesheet zeroes UA margins, so
   anything the editor emits needs its spacing re-established here.
   --------------------------------------------------------------------- */
.entry-content,
.entry-summary {
	color: #898989;
	/* Several posts contain bare URLs 90-105 characters long. Without this
	   they refuse to wrap and push the whole document wider than the
	   viewport (post 60 overflowed by 89px at 375px). */
	overflow-wrap: break-word;
	word-wrap: break-word;     /* legacy spelling, for older Safari */
}
.entry-content p,
.entry-summary p {
	margin-bottom: 1.25rem;
	line-height: 1.5rem;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}
/* Editor h1s inside a post body compete with the post title — step them down. */
.entry-content h1 {
	font-size: 1.875rem;
	line-height: 2.25rem;
}
.entry-content h2 {
	font-size: 1.5rem;
	line-height: 2rem;
}
.entry-content h3 {
	font-size: 1.25rem;
	line-height: 1.75rem;
}
.entry-content ul,
.entry-content ol,
.entry-summary ul {
	margin-bottom: 1.25rem;
	margin-left: 1.25rem;
}
.entry-content li {
	line-height: 1.5rem;
	margin-bottom: 0.375rem;
}
.entry-content strong {
	color: #d7d7d7;
}
.entry-content blockquote {
	border-left: 2px solid #393939;
	padding-left: 1.25rem;
	margin: 0 0 1.25rem 0;
	color: #acacac;
}
.entry-content pre {
	background: #242424;
	padding: 1rem;
	overflow-x: auto;          /* long lines scroll, never widen the page */
	margin-bottom: 1.25rem;
	font-size: 0.875rem;
}
.entry-content del {
	opacity: 0.6;
}
.entry-content hr {
	margin: 2.5rem 0;
}

/* ---------------------------------------------------------------------
   Media — 56 images across the posts, so this is the part most likely to
   break the layout if left alone.
   --------------------------------------------------------------------- */
.entry-content img,
.entry-summary img {
	max-width: 100%;
	height: auto;
}
.entry-content figure {
	margin: 0 0 1.25rem 0;
	max-width: 100%;
}
.entry-content figcaption,
.entry-content .wp-caption-text {
	font-size: 0.8125rem;
	color: #898989;
	margin-top: 0.5rem;
}

/* WordPress alignment classes */
.entry-content .alignnone {
	margin: 0 0 1.25rem 0;
}
.entry-content .aligncenter {
	display: block;
	margin: 0 auto 1.25rem auto;
}
.entry-content .alignleft {
	float: left;
	margin: 0 1.25rem 1rem 0;
}
.entry-content .alignright {
	float: right;
	margin: 0 0 1rem 1.25rem;
}
/* Floats must not escape the post body. */
.entry-content:after {
	content: "";
	display: table;
	clear: both;
}

/* Embeds: iframes and the one legacy <object> both need to scale down. */
.entry-content iframe,
.entry-content object,
.entry-content embed {
	max-width: 100%;
}

/* ---------------------------------------------------------------------
   Narrow screens — floats and fixed-width media stop working first.
   Breakpoint matches responsive.css.
   --------------------------------------------------------------------- */
@media only screen and (max-width: 1059px) {
	.post {
		margin-bottom: 2.5rem;
	}
	.entry-content .alignleft,
	.entry-content .alignright {
		float: none;
		display: block;
		margin: 0 0 1.25rem 0;
	}
	.entry-content h1 {
		font-size: 1.5rem;
		line-height: 1.875rem;
	}
	.entry-content h2 {
		font-size: 1.3125rem;
		line-height: 1.6875rem;
	}
	.entry-content iframe,
	.entry-content object,
	.entry-content embed {
		width: 100%;
	}
}