:root {
	--Page-pad: min(4vw, 2.2rem);
	--Rhythm-gap: 2.4525rem;
	--LogoSize-max: 4.2rem;
	--Bg-layer--0: #fffafa;
	--Bg-layer--1: #fef8f8;
	--Bg-layer--2: #f3ecec;
}


/* BASE **************************************************************/

html {
	height: 100%;
	background: #fef8f8; /* left lighter for better default reading */
	background: var(--Bg-layer--2, #f3ecec);
	font-size: 62.5%;
	color: #312323;
}

body {
	margin: 0;
	background: none;
	font-size: 1.6rem;
	min-height: 100%;
}

a:link {
	color: #c54747
}

a:visited {
	color: #d16e6e;
}

/* LAYOUT ************************************************************/

.Blog {
	display: grid;
	gap:  0;
	grid-template-columns: var(--Page-pad, 2.0rem) minmax(0, 1fr) var(--Page-pad, 2.0rem);
	max-width: 100%;
}

.SkipLink {
	display: block;
	position: absolute;
	z-index: 10000;
	top: 0;
	left: 0;
	padding: 0.5em 0.75em;
	background: #000;
	color: #fff;
	font-size: 2rem;
}

.Banner-wrapper,
.MainContent-wrapper,
.DocumentFooter-wrapper {
	display: grid;
	grid-column: 1 / 4;
	grid-template-columns: inherit;
	grid-template-columns: subgrid;
}

.Banner-wrapper,
.DocumentFooter-wrapper {
	background-color: #fffafa;
	background-color: var(--Bg-layer--0, #fff);
}

.MainContent-wrapper {
	position: relative;
}

.Banner,
.MainContent,
.DocumentFooter {
	grid-column: 2 / 3;
}

.Banner[role="banner"] {
	display: flex;
	gap: 1.0rem 2.0rem;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: space-between;
	padding-block: calc(var(--Page-pad, 2.0rem) * 0.75) var(--Page-pad, 2.0rem);
	background-color: #fffafa;
}

.Blog-title {
	color: inherit;
	text-decoration: none;
	text-transform: capitalize;
}

.Blog-title:link:is(:focus, :hover) .BlogName {
	text-decoration: underline;
}

.Blog-logo {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: var(--Page-pad);
	color: #e45b5b;
	color: var(--accent1, #e45b5b);
	font-family: "Merriweather Sans", sans-serif;
	font-size: 2.4rem;
	font-size: clamp(1.5rem, 6vw, 2.4rem);
}

.BlogLogo {
	font-size: 1.75em;
	max-width: var(--LogoSize-max);
	max-height: var(--LogoSize-max);
}

.BlogName {
	display: flex;
	flex-flow: row wrap;
	font-weight: 700;
	font-weight: 900;
}

.BlogName-word + .BlogName-word::before {
	content: ".";
	color: #312323;
}

.Navigation {
	display: flex;
	gap: var(--Page-pad, 2rem);
}

.Navigation-item {
	font-size: 1.5rem;
	font-size: clamp(1.4rem, 5vw, 1.5rem);
	text-decoration: none;
	font-weight: 600;
}

.Navigation-item,
.Navigation-item:is(:link, :visited) {
	color: #312323;
}

.Navigation-item:is(:link, :visited):is(:focus, :hover) {
	text-decoration: underline;
}


/* MAIN CONTENT ******************************************************/

.MainContent {
	display: flex;
	flex-flow: column nowrap;
	gap: var(--Page-pad, 2rem);
}

.MainContent {
	padding-block: var(--Page-pad, 2rem);
}

.Headline {
	display: flex;
	flex-flow: column nowrap;
	text-rendering: geometricprecision;
}

.Headline:not(.isSwapped) [itemprop="headline"] + [itemprop="alternativeHeadline"] {
	margin-block-start: -1.2825rem;
}

.Headline.isSwapped {
	flex-direction: column-reverse;
}

.Headline [itemprop="alternativeHeadline"] {
	line-height: 1.55;
	font-size: 2.4rem;
	font-weight: 400;
	color: inherit;
}

.Headline.isSwapped [itemprop="alternativeHeadline"] {
	font-family: "Merriweather Sans", sans-serif;
	font-size: 1.6rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--accent2, #c54747);
}

.Headline.isSwapped [itemprop="headline"] + [itemprop="alternativeHeadline"] {
	margin-block-end: 1em;
}

.Headline :last-child,
.Headline a :last-child {
	margin-block-end: 0;
}

.BlogPost {
	display: flex;
	flex-flow: column nowrap;
	gap: var(--Rhythm-gap) max(var(--Page-pad, 2.0rem), calc(2 * var(--Rhythm-gap)));
	max-width: 100%;
	line-height: 1.55;
	hanging-punctuation: first last;
}

/* HACK: not enough :has() support for .MainContent:has(.BlogPost) */
.BlogPost::before {
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fef8f8;
	background: var(--Bg-layer--1, #fef8f8);
}

.BlogPost h1 {
	line-height: 1.3025;
	margin-block: 0 2.5rem;
	font-size: 3.8rem;
}

.BlogPost h2 {
	line-height: 1.55;
	margin-block: -0.0125rem 2.4725rem;
	font-size: 3.2rem;
}

.BlogPost h3 {
	margin-block: 0 2.4625rem;
	line-height: 1.6875;
	color: #c54747;
	color: var(--accent2, #c54747);
	font-size: 2.2rem;
}

.BlogPost :where(h4, h5) {
	margin-block: 0 2.475rem;
	line-height: 1.24;
	font-family: "Merriweather Sans", sans-serif;
	font-stretch: condensed;
	text-transform: uppercase;
	font-size: 2.0rem;
}

.BlogPost h5 {
	color: inherit;
}

.BlogPost h6 {
	font-size: 1.4rem;
	margin-block: 0 2.525rem;
	line-height: 1.75;
	font-weight: 700;
}

.BlogPost :where(callout, details, dl, ol, p, ul) {
	margin-block: 0 2.4875rem;
}

.BlogPost p:empty {
	display: none;
}

.BlogPost p:blank {
	display: none;
}

.BlogPost :where(p + p, li + li > p:only-child) {
	margin-top: -1.27125rem;
}

.BlogPost :where(dt, dd, h3, h4, h5, h6, li, p) {
	max-width: 66ch;
}

.BlogPost :where(h1) {
	max-width: 64ch;
}

.BlogPost h2 {
	max-width: 65ch;
}

.BlogPost blockquote {
	box-sizing: content-box;
	position: relative;
	max-width: 49.25ch;
	padding-block: 2.4rem 2.45rem;
	padding-inline: calc(1.5 * var(--Page-pad, 2.0rem));
	border: 1px solid #e2caca;
	border-inline: 0;
	margin-block: 1.2rem 2.4rem;
	margin-inline: 0;
	line-height: 1.74;
	font-size: 2.0rem;
}

.BlogPost blockquote > * {
	box-sizing: border-box;
}

.BlogPost blockquote::before,
.BlogPost blockquote::after {
	display: block;
	position: absolute;
	z-index: 1;
	margin-inline: 0.1em;
	line-height: 0;
	color: #c54747;
	font-size: 4.125em;
	font-stretch: normal;
	font-style: normal;
	font-weight: 400;
	text-align: center;
}

.BlogPost blockquote::before {
	content: open-quote;
	margin-block-start: 0.275em;
	top: 0;
	left: 0;
}

.BlogPost blockquote::after {
	content: close-quote;
	margin-block-end: -0.3em;
	bottom: 0;
	right: 0;
}

.BlogPost blockquote p {
	line-height: inherit;
	font-size: inherit;
	font-stretch: inherit;
	font-style: inherit;
}

/*
.BlogPost p:first-of-type::first-letter {
	float: inline-start;
	font-size: 2em;
	font-family: "Merriweather", serif;
	font-style: italic;
}
*/

.BlogPost blockquote > :first-child,
.BlogPost blockquote > :first-child > :first-child,
.BlogPost blockquote > :first-child > :first-child > :first-child {
	margin-block-start: 0;
}

.BlogPost blockquote > :last-child,
.BlogPost blockquote > :last-child > :last-child,
.BlogPost blockquote > :last-child > :last-child > :last-child {
	margin-block-end: 0;
}

.BlogPost :where(img, table) {
	margin-block: 1.15rem;
}

.BlogPost img {
	max-width: 100%;
	font-style: italic;
}

/* This would look better with a class given some of the smaller
 * images. Save for later.
.BlogPost img {
	max-width: calc(100% + (2 * var(--Page-pad, 2.0rem)));
	margin-inline: calc(-1 * var(--Page-pad, 2.0rem));
}
*/

.BlogPost table {
	max-width: 100%;
}

.BlogPost caption {
	margin-bottom: 0.5em;
	font-family: "Merriweather Sans", sans-serif;
	font-stretch: condensed;
}

.BlogPost thead {
	background-color: #312323;
	background-image: none;
	color: #c54747;
	color: var(--accent1, #e45b5b);
	text-transform: uppercase;
	font-family: monospace;
}

.BlogPost :where(td, th) {
	padding: 0.5em 1em;
}

.BlogPost tr {
	border: 0 solid #e2caca;
	border-top-width: 1px;
	border-bottom-width: 1px;
}

.BlogPost tr + tr {
	margin-top: -1px;
}

.BlogPost tr:nth-child(2n) {
	background: #fef8f8;
}

.BlogPost :where(blockquote, .quoteblock) {
	font-family: "Merriweather Sans", sans-serif;
	font-stretch: condensed;
}

.BlogPost .quoteblock .attribution {
	margin-block: -1.25rem 2.45rem;
	margin-inline-end: 4.6rem;
	line-height: 1.3;
	font-size: 0.9em;
}

.BlogPost .quoteblock .attribution p {
	line-height: inherit;
}

.BlogPost :where(code, kbd, pre, samp) {
	padding: 0.125em 0.25em;
	margin-block: -0.25em;
	background-color: #fff5f5;
	border-radius: 0.125em;
	font-family: "Fira Code", monospace;
}

.BlogPost pre {
	overflow: auto;
	width: calc(100% + (2 * var(--Page-pad, 2.0rem)));
	margin-inline: calc(-1 * var(--Page-pad, 2.0rem));
	margin-block: 2.85rem;
	padding: var(--Page-pad, 2.0rem);
	border-radius: 0;
	line-height: 1.375;
	background-color: #312323;
	background-image: none;
	color: #f0f0f0;
}

.BlogPost pre :where(code, kbd, pre, samp) {
	padding: 0;
	margin: 0;
	border-radius: 0;
	background: none;
}

.BlogPost summary {
	font-family: "Merriweather Sans", sans-serif;
	font-style: italic;
	font-stretch: condensed;
}

.BlogPost summary::marker {
	color: #312323;
	color: var(--accent2, #c54747);
}

.BlogPost-header {
	display: contents;
}

.BlogPost [itemprop="headline"] {
	line-height: 1.4125;
	font-size: 4.4rem;
	font-weight: 700;
}

.BlogPost :is([itemprop="abstract"], [itemprop="backstory"]) {
	line-height: 1.5525;
	font-size: 1.8rem;
	max-width: 61.8ch;
}

.BlogPost :is([itemprop="abstract"], [itemprop="backstory"]) p {
	margin-block: 0 1.2rem;
	line-height: inherit;
	font-size: inherit;
}

.BlogPost-metadata {
	display: grid;
	gap: 1em 1.5em;
	grid-template-columns: fit-content(50%) fit-content(50%);
	margin-block: -0.05rem 0;
	margin-inline: 0;
	line-height: 1.285;
	font-size: 1.4rem;
}

.CreativeWorkMetadata {
	display: grid;
	gap: 0 0.75em;
	grid-template-columns: subgrid;
	grid-column: 1 / 3;
	padding: 0.25em 1.5em;
	background-color: #c54747;
	background-color: var(--accent2, #c54747);
	color: #fff;
}

.CreativeWorkMetadata-key {
	text-transform: uppercase;
	wrap-after: avoid;
}

.CreativeWorkMetadata-value {
	grid-column: 2 / 3;
	margin: 0;
	color: #312323;
	wrap-before: avoid;
}

.CreativeWorkMetadata-value,
.CreativeWorkMetadata--keywords [itemprop="keywords"] {
	text-align: end;
}

.CreativeWorkMetadata-value:not(:last-child) {
	margin-block-end: 1.19115rem;
}

.CreativeWorkMetadata-value + .CreativeWorkMetadata-value {
	margin-block-start: -1.19115rem;
}

.CreativeWorkMetadata-value a:link {
	color: inherit;
	text-decoration: underline;
}

.CreativeWorkMetadata-value a:link:is(:focus, :hover) {
	color: #fff;
}

.CreativeWorkMetadata--keywords [itemprop="keywords"] {
	grid-column: 2 / 3;
}

.CreativeWorkMetadata--keywords [itemprop="keywords"] .CreativeWorkMetadata-value {
	display: inline-block;
	margin: 0;
}

.CreativeWorkMetadata--keywords [itemprop="keywords"] .CreativeWorkMetadata-value:not(:last-child)::after {
	content: "|";
	display: inline-block;
}

.CreativeWorkMetadata--keywords [itemprop="keywords"] .CreativeWorkMetadata-value:not(:first-child),
.CreativeWorkMetadata--keywords [itemprop="keywords"] .CreativeWorkMetadata-value:not(:last-child)::after {
	padding-inline-start: 0.5ch;
}

.CreativeWorkMetadata a:is(:link, :visited) {
	color: inherit;
}

.CreativeWorkMetadata a:is(:link, :visited):is(:focus, :hover) {
	color: #fff;
}

/* CALLOUTS  *********************************************************/

callout, cot {
	display: block;
}

.Callout {
	--Callout-pad: 1.6rem;
	background: white;
	padding: var(--Callout-pad);
}

.Callout :last-child {
	margin-bottom: 0;
}

.BlogPost .Callout pre {
	width: calc(100% + --var(--Callout-pad));
	margin-inline: calc(-1 * var(--Callout-pad));
}

.BlogPost .Callout pre:last-child {
	margin-block-end: calc(-1 * var(--Callout-pad));
}

.Callout-title {
	margin: calc(-1 * var(--Callout-pad));
	margin-block-end: var(--Callout-pad);
	padding: calc(0.5 * var(--Callout-pad)) var(--Callout-pad);
	background: var(--black1);
	color: white;
	font-family: "Merriweather Sans", sans-serif;
	font-size: 1.4rem;
	font-weight: 700;
	font-stretch: condensed;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.Callout--tip .Callout-title {
	background-color: var(--accent2, #c54747);
}

.Callout--hint .Callout-title,
.Callout--note .Callout-title {
	background-color: #c54747;
}

.Callout--caution .Callout-title,
.Callout--danger .Callout-title {
	background-color: #f9c520;
	color: black;
}

.Callout--attention .Callout-title,
.Callout--error .Callout-title,
.Callout--important .Callout-title {
	background-color: #d23a2d;
}

/* FEEDS *************************************************************/

.Feed-items {
	display: flex;
	flex-flow: column nowrap;
	gap: var(--Page-pad, 2rem);
}

.Feed-header :first-child {
	margin-block-start: 0;
}

.Feed-header :last-child {
	margin-block-end: 0;
}

.Feed-items.Feed-items--topics {
	display: flex;
	flex-flow: row wrap;
	gap: 0.75em;
	max-width: 80ch;
	margin: 0;
	padding: 0;
}

.FeedItem {
	--FeedItem-pad: clamp(2rem, 3.5vw, 3.6rem);
	contain: content;
	display: grid;
	grid-auto-rows: auto;
	grid-template-columns: 1fr min-content;
	gap: calc(var(--Rhythm-gap, 1em) * 0.5);
	overflow: hidden;
	padding-block-start: var(--FeedItem-pad);
	border-radius: 2px;
	background: #fffafa;
	color: inherit;
}

/* because of backgrounds, padding needs to be done from the inner children */
.FeedItem-headline,
.FeedItem-metadataGrouped,
.FeedItemMetadata--keywords,
.FeedItem-readPostArrow,
.FeedItem :is([itemprop="abstract"], [itemprop="description"]) {
	padding-inline: var(--FeedItem-pad, 2rem);
}

.FeedItemMetadata--keywords {
	padding-inline-end: 0;
}

.FeedItem-readPostArrow {
	padding-inline-start: 0;
}

.FeedItem-header,
.FeedItem-metadata {
	display: contents;
}

.FeedItem-headline {
	grid-row: 2 / 3;
	grid-column: 1 / 3;
}

.FeedItem :is([itemprop="abstract"], [itemprop="description"]) {
	grid-row: 3 / 4;
	grid-column: 1 / 3;
}

.FeedItem [itemprop="headline"] {
	margin-block: -0.15rem 2.475rem;
	line-height: 1.24;
	font-size: 3.0rem;
}

.FeedItem [itemprop="alternativeHeadline"] {
	line-height: 1.375;
	font-size: 1.8rem;
}

.FeedItem-metadataGrouped {
	display: grid;
	grid-row: 4 / 5;
	grid-column: 1 / 3;
	grid-template-rows: min-content 1fr;
	grid-auto-columns: auto;
	gap: 0.975rem 0.65rem;
	justify-content: space-between;
	flex: 0 0 auto;
	padding-block: 0.8rem 1.0rem;
	color: #e45b5b;
	color: var(--accent1, #e45b5b);
	font-family: "Fira Code", monospace;
	font-size: 0.9em;
}

.FeedItemMetadata-value,
.FeedItemMetadata--dates {
	display: flex;
	flex-flow: row wrap;
	gap: 0.5ex 1ex;
}

.FeedItemMetadata-value {
	align-items: center;
}

.FeedItemMetadata--datePublished {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}

.FeedItemMetadata--readingTime {
	grid-row: 1 / 2;
	grid-column: 2 / 3;
}

.FeedItemMetadata--author {
	display: flex;
	grid-row: 2 / 3;
	grid-column: 1 / 3;
	gap: 1.2rem;
	align-items: center;
	font-family: "Merriweather", serif;
	font-weight: 700;
	font-size: 1em;
}

.FeedItemMetadata--author .FeedItemMetadata-avatarContainer {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	height: 1.75em;
	width: 1.75em;
	margin-inline-start: max(-.4em, -0.5 * 4vw);
	border-radius: 50%;
	background: #fffafa;
	text-align: center;
}

.FeedItemMetadata--author .FeedItemMetadata-avatarContainer > * {
	margin: auto;
	max-height: 100%;
	max-width: 100%;
	object-fit: scale-down;
}

.FeedItemMetadata--author [itemprop="author"] {
	color: #fff;
}

.FeedItemMetadata--keywords,
.FeedItem-readPostArrow {
	color: #c54747;
	color: var(--accent2, #c54747);
	font-family: "Merriweather Sans", sans-serif;
	font-stretch: condensed;
	text-transform: uppercase;
}

.FeedItemMetadata--keywords {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	flex: 0 0 auto;
	line-height: 1.2;
	font-size: 1.4rem;
	font-weight: 500;
}

.FeedItemMetadata--keywords [itemprop="keywords"] {
	display: flex;
	flex-flow: row wrap;
	gap: 0.875em;
}

.FeedItemMetadata--keywords .FeedItemMetadata-value:not(:last-of-type)::after {
	content: "|";
	position: relative;
	right: -0.125em;
	font-size: 1.25em;
}

.FeedItemMetadata--keywords a[rel="tag"] {
	display: inline-block;
}

.FeedItem-readPostArrow {
	display: block;
	grid-row: 1 / 2;
	grid-column: 2 / 3;
	font-size: 1.8rem;
	margin-top: -0.3rem;
}

.FeedItemMetadata-value {
	margin: 0;
}

.FeedItemMetadata-value[itemprop="dateModified"] {
	font-style: italic;
}

.FeedItem :is([itemprop="abstract"], [itemprop="description"]) {
	display: -webkit-box;
	flex: 1 0 auto;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	line-clamp: 6 auto;
}

.FeedItem-header a {
	color: inherit;
	text-decoration: none;
}

.FeedItem-header a:link:is(:focus, :hover) {
	text-decoration: underline;
}

.FeedItem.FeedItem--topic {
	display: inline-block;
	overflow: visible;
	border-radius: unset;
}

.FeedItem.FeedItem--topic a {
	display: block;
	padding: 0.25em 0.75em;
	border: 2px solid currentColor;
	border-radius: 1em;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	transition-property: background-color, color;
	transition-duration: 180ms;
	transition-timing-function: ease;
}

.FeedItem.FeedItem--topic a:link:is(:focus, :hover) {
	color: #c54747;
	color: var(--accent2, #c54747);
}


/* FOOTER FIXUPS *****************************************************/
/* the marketing site does not use the 62.5% normalization for easy
conversion, but there’s only two properies to override so NBD. */

.DocumentFooter .c10.c10 {
	font-size: 1.5rem;
}

.DocumentFooter .c15.c15 {
	flex: 1 1 auto;
}

.DocumentFooter .c41.c41 {
	padding: unset;
	gap: var(--Page-pad, 2rem);
}

.DocumentFooter .c47.c47 {
	min-width: unset;
}

.DocumentFooter .c53.c53 {
	font-size: min(1.28rem, calc(var(--scale2) * 5vw));
}

.DocumentFooter a:is(:link, :visited) {
	color: inherit;
}

/* VERTICAL RHYTHM HELPERS *******************************************/
/* activate in the browser console: devTools.toggleVerticalRhythm(bool?) */

.MainContent.withVerticalRhythm,
.MainContent.withVerticalRhythm .FeedItem {
	background-image: linear-gradient(hsla(350, 100%, 80%, 0.6) 1px, transparent 0.1em);
	background-size: 100% 1.2375rem;
	background-repeat: repeat;
}

.MainContent.withVerticalRhythm :is(.BlogPost, .FeedItem) :where(h1, h2, h3, h4, h5, h6, .CreativeWorkMetadata-key) {
	background: hsla(80, 100%, 70%, 0.33);
}

.MainContent.withVerticalRhythm :is(.BlogPost, .FeedItem) :where(p, .CreativeWorkMetadata-value) {
	background: hsla(230, 100%, 82%, 0.33);
}

.MainContent.withVerticalRhythm :is(.BlogPost, .FeedItem) :is(img, pre) {
	/* correcting rhythm for images is cumbersome/not worth;
	 * hiding while viewing */
	display: none;
}

.MainContent.withVerticalRhythm .BlogPost::before {
	content: normal;
	display: none;
}

@media (max-width: 35em) {
	.BlogPost [itemprop="headline"] {
		line-height: 1.3025;
		margin-block: 0 2.5rem;
		font-size: 3.8rem;
	}
}

@media (min-width: 36em) {
	:root {
		--Page-pad: clamp(2.4rem, 3vw, 3.6rem);
		--Pre-pad: 1.25em;
	}
	.Banner[role="banner"] {
		flex-flow: row wrap;
	}
}

@media (min-width: 46em) {
	:root {
		--Pre-pad: 1.5em;
	}
}

@media (min-width: 54em) {
	:root {
		--Pre-pad: 2em;
	}
	.Blog {
		grid-template-columns:
			minmax(var(--Page-pad), 1fr)
			var(--LogoSize-max)
			var(--Page-pad)
			13rem
			minmax(0, 84rem)
			var(--LogoSize-max)
			minmax(var(--Page-pad), 2fr)
	}
	.Banner-wrapper,
	.MainContent-wrapper,
	.DocumentFooter-wrapper {
		grid-column: 1 / 8;
	}
	.Banner, .DocumentFooter {
		grid-column: 2 / 6;
	}
	.BlogLogo {
		width: var(--LogoSize-max);
	}
	.MainContent {
		grid-column: 4 / 6;
	}
	/* TODO: subgrid logo would be more accurate
	.Banner[role="banner"] { }
	*/
	.Feed-items {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: masonry;
	}
	.BlogPost-body {
		grid-row: 3 / 4;
	}
}

@media (min-width: 58em) {
	.MainContent-wrapper {
		display: contents;
	}
	.MainContent {
		grid-column: 1 / 8;
	}
	.Banner,
	.DocumentFooter {
	}
	.CreativeWorkMetadata {
		grid-column: 1 / 4;
	}
	.MainContent {
		column-gap: 0;
		grid-template-columns: inherit;
		grid-template-columns: subgrid;
		padding: 0;
	}
	.MainContent.Feed {
		grid-column: 4 / 6;
		padding-block-end: var(--Page-pad, 2rem);
	}
	.MainContent.Feed:first-of-type {
		padding-block-start: var(--Page-pad, 2rem);
	}
	.MainContent.BlogPost {
		display: grid;
		grid-template-rows: min-content min-content minmax(0, 1fr);
	}
	.BlogPost::before {
		position: static;
		grid-row: 1 / 20;
		grid-column: 5 / 8;
	}
	.BlogPost [itemprop="headline"] {
		font-size: 4.8rem;
		line-height: 1.4175;
	}
	.BlogPost-headline,
	.BlogPost :is([itemprop="abstract"], [itemprop="backstory"]),
	.BlogPost-body {
		grid-column: 5 / 6;
		padding-inline-start: var(--Page-pad, 2rem);
	}
	.BlogPost-headline {
		grid-row: 1 / 2;
		padding-block-start: var(--Page-pad, 2rem);
	}
	.BlogPost :is([itemprop="abstract"], [itemprop="backstory"]) {
		grid-row: 2 / 3;
	}
	.BlogPost-metadata {
		grid-row: 2 / 4;
		grid-column: 1 / 5;
		text-align: end;
		align-content: start;
	}
	.CreativeWorkMetadata {
		display: flex;
		flex-flow: column nowrap;
		align-items: end;
	}
	.BlogPost-body {
		padding-block-end: var(--Page-pad, 2rem);
	}
	.BlogPost pre {
		width: calc(100% + var(--Page-pad, 2rem));
	}
}