/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~ Product and property of Titan Informatics LLC ~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
article {
	width: calc(100% - 350px - 29px);
	margin: 0 29px 0 0;
}

article::after {
	content: "";
	height: 100%;
	position: absolute; top: 0;
	right: -15px;
	border-right: var(--border);
	pointer-events: none;
}


article ul,
article ol,
article li,
article p,
article h2,
article h3,
article h4,
article h5,
article h6 {
	width: 100%;
	margin: 10px 0 5px 0;
	position: relative;
	float: left;
}
article h2,
article h3,
article h4,
article h5,
article h6 {
	margin: 10px 0 0 0;
}
article h2,
article h3 {
	font-weight: 800;
	margin: 15px 0 0 0;
	padding: 5px 0 0 0;
}
article h2 {
	font-size: 1.375rem;
}
article h3 {
	font-size: 1.25rem;
}
article [data-part="title"] {
	font-weight: 800;
	font-size: 2rem;
	line-height: 2.125rem;
	margin: 0 0 18px 0;
	left: 50%;
	transform: translateX(-50%);
}

article p {
	font-size: 1.063rem;
	line-height: 1.875rem;
}
article p:last-of-type {
	margin: 10px 0 0 0;
}

article [data-type="poll"] {
	margin: 30px 0 0 0;
}
article [data-type="poll"]::before {
	content: "";
	height: 0;
	margin: -15px 0 15px 0;
	position: relative;
	float: left;
	border-top: var(--border);
	pointer-events: none;
}
article [data-type="poll"] h2,
article [data-type="poll"] h3,
article [data-type="poll"] ul,
article [data-type="poll"] li {
	margin: unset;
}
article [data-type="poll"] li {
	font-size: 1.063rem;
}
article [data-type="poll"] li::after {
	font-size: 1rem;
}
article [data-type="advertisement"] {
	max-width: 450px;
	margin: 10px 0;
}

article header {
	width: 100%;
	max-width: unset;
	padding: unset;
	margin: 10px 0;
	left: unset;
	transform: unset;
	background: unset;
}
article header::before,
article header::after {
	content: "";
	width: 100%;
	position: absolute; left: 0;
	pointer-events: none;
}
article header::before {
	top: -10px;
	border-top: var(--border);
}
article header::after {
	bottom: -10px;
	border-bottom: var(--border);
}

article header [data-name="byline"] {
	display: flex;
	flex-flow: column wrap;
}
article header [data-name="byline"] > section {
	line-height: 1.875rem;
}
article header [data-name="byline"] > section span {
	position: relative; float: left;
}
article header [data-name="byline"] > section time {
	font-size: 0.875rem;
	margin: 0 0 0 15px;
	position: relative; float: right;
	opacity: 0.8;
}
article header [data-name="byline"] > section time::before {
	position: relative; float: left;
	margin: 0 5px 0 0;
}
article header [data-name="byline"] [data-part="author"] time::before {content: "Published:"}
article header [data-name="byline"] [data-part="editor"] time::before {content: "Updated:"}

article header > [data-part] {
	font-size: 0.875rem;
	font-weight: 200;
	clear: left;
	display: flex;
	align-items: center;
}
article header > [data-part] span {
	font-weight: 600;
	margin: 0 10px 0 0;
	display: flex;
	align-items: center;
	text-transform: capitalize;
}
article header [data-part] > [data-headshot]::before {
	content: '';
	width: 30px;
	height: 30px;
	margin: 0 5px 0 0;
	position: relative;	float: left;
	background: no-repeat center/cover;
	background-image: var(--thumbnail-url);
	border-radius: 50%;
	overflow: hidden;
	border: var(--border);
}

article [data-name="engagements"] {
	position: absolute;
	right: 0; bottom: 0;
}
article [data-name="engagements"] > span {
	border: unset;
	background: unset;
}
article [data-name="engagements"] > span::before {
	min-width: 30px;
	line-height: 1.25rem;
}
article [data-name="engagements"] [data-name="socials"] {
	top: calc(100% - 5px);
	-webkit-box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.75);
	   -moz-box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.75);
			box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.75);
	background: var(--f2f2f2);
}
article [data-name="engagements"] [data-name="socials"] li::before {
	padding: unset;
}
article [data-name="tinypopup"] {
	top: calc(100% - 5px);
	-webkit-box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.75);
	   -moz-box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.75);
			box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.75);
}


@media (max-width: 1200px) {
	article {
		width: 100%;
		margin: unset;
	}
	article::after {
		content: unset;
	}
}