:root {
	--brand: var(--blue-6);
	--font-sans: "M+ 2", "Seravek", "Gill Sans Nova", "Ubuntu", "Calibri", "DejaVu Sans", source-sans-pro, sans-serif;
	--font-mono: "M+ Code 60", monospace;
	--surface-1: Canvas;
	--surface-2: color-mix(in oklch, Canvas, CanvasText 7.5%);
	--surface-3: color-mix(in oklch, Canvas, CanvasText 12.5%);
	--surface-4: color-mix(in oklch, Canvas, CanvasText 17.5%);
	--text: CanvasText;
	--text-2: CanvasText;
	--text-2: color-mix(in oklch, CanvasText, Canvas 40%);
	--Azure-grad-1: linear-gradient(to left in oklch, var(--cyan-2), var(--blue-6), var(--indigo-10));
	--Azure-grad-2: linear-gradient(to right, var(--indigo-1), var(--blue-1), var(--cyan-1));
	--surface-color-1: var(--Azure-grad-2);
	--surface-color-2: var(--Azure-grad-1);
	--Page-pad: var(--size-fluid-2);
	font-size: 62.5%;
	font-family: var(--font-sans);
	background-color: Canvas;
	background-color: var(--surface-1);
	color: CanvasText;
}

body {
	font-size: var(--font-size-2);
}

.DocWrapper {
	display: flex;
	flex-flow: column nowrap;
	gap: var(--size-8);
	min-block-size: 100%;
	inline-size: 100%;
	max-inline-size: 90rem;
}

.Banner, .Main, .Footer {
	padding-inline: var(--Page-pad);
}

.Banner {
	display: flex;
	gap: var(--size-4);
	flex-flow: row wrap;
	justify-content: space-between;
	padding-block: var(--size-2);
}

:is(.Banner, .Headline) abbr[title]:not(:hover) {
	text-decoration: none;
}

.Banner-brailleFlair {
	display: none;
}

.SiteLogo-image {
	inline-size: auto;
	min-inline-size: 2.5em;
	block-size: 1em;
	fill: currentColor;
	font-size: var(--font-size-8);
}

a.Site-logo,
a.Navigation-item {
	color: inherit;
}

.Navigation {
	display: flex;
	flex-flow: row wrap;
	gap: var(--size-2) var(--size-4);
	justify-content: space-evenly;
	font-size: var(--font-size-1);
	font-variant: small-caps;
	letter-spacing: 0.125em;
}

.Footer {
	color: var(--text-2);
	text-align: center;
	text-wrap-style: balance;
}

.Headline {
	display: flex;
	flex-flow: row wrap;
	align-items: baseline;
	gap: 0 1ch;
	font-family: var(--font-mono);
	font-size: var(--font-size-8);
}

.Headline [itemprop="headline"] {
	font-weight: var(--font-weight-8);
	line-height: 1.05;
}

.Headline [itemprop="alternativeHeadline"] {
	color: var(--text-2);
	font-size: var(--font-size-3);
}

.Main a:link {
	text-decoration: underline;
}

.Main abbr[title] {
	text-decoration: var(--text-2);
}

.Main {
	h1, h3, h4, h5, h6 {
		font-weight: var(--font-weight-7);
	}
	h2 {
		color: var(--indigo-10);
		font-weight: var(--font-weight-3);
	}
	hr {
		border: 1.5px solid var(--blue-10);
		border-image: var(--surface-color-2);
		border-image-slice: 1;
	}
}

.Callout {
	--Callout-padBlock: var(--size-2);
	--Callout-padInline: var(--size-3);
	display: block;
	padding-block: var(--Callout-padBlock);
	padding-inline: var(--Callout-padInline);
	background-color: var(--blue-1);
	background-image: var(--surface-color-1);
}

.Callout-title {
	display: block;
	margin-block-start: calc(-1 * var(--Callout-padBlock));
	margin-block-end: var(--Callout-padBlock);
	margin-inline: calc(-1 * var(--Callout-padInline));
	padding-block: var(--Callout-padBlock);
	padding-inline: var(--Callout-padInline);
	background-color: var(--blue-6);
	background-image: var(--surface-color-2);
	color: var(--gray-1);
	font-family: var(--font-mono);
	font-weight: var(--font-weight-8);
	text-transform: uppercase;
}

.Callout, .Article figure {
	font-size: var(--font-size-1);
}

.Article {
	--Stack-gap: var(--size-4);
}

.Article-metadata {
	display: grid;
	gap: var(--size-1) var(--size-fluid-3);
	grid-template-columns: auto 1fr;
	font-size: var(--font-size-1);
}

.CreativeWorkMetadata {
	display: contents;
}

.CreativeWorkMetadata-key {
	color: var(--cyan-10);
	/*font-family: var(--font-mono);*/
	font-weight: var(--font-weight-4);
}

.CreativeWorkMetadata-value {
	font-weight: var(--font-weight-3);
}

.Content {
	> * + *:not(hr) {
		margin-block-start: var(--size-6);
	}

	> section > * + *:not(hr) {
		margin-block-start: var(--size-3);
	}
}

.FeedItem-separator {
	margin-block: 0;

	&:not(:first-of-type) {
		margin-block-start: var(--size-10);
	}
}

.FeedItem {
	--Stack-gap: var(--size-4);
}


.FeedItem-headline a:link {
	display: contents;

	&:not(:hover, :focus-within) {
		text-decoration: initial;
	}
}

.FeedItem-description {
	color: var(--text-2);
}

.FeedItem-metadata {
	display: grid;
	gap: var(--size-2) var(--size-fluid-4);
	grid-template-columns: masonry;
}

.FeedItem-metadata .CreativeWorkMetadata {
	display: initial;
}

/* These are just used for TUIs */
.Banner-separator {
	display: none;
}
/* /for TUIs */