@font-face {
	font-family: "IBM Plex Mono";
	src: url('../fonts/IBMPlexMono-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url('../fonts/IBMPlexMono-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "Garamond";
	src: url('../fonts/EBGaramond.woff') format('woff');
	font-style: normal;
}

@font-face {
	font-family: "Garamond";
	src: url('../fonts/EBGaramond-Italic.woff') format('woff');
	font-style: italic;
}
@font-face {
	font-family: "Nimbus Sans";
	src: url('../fonts/NimbusSanL.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face {
    font-family: 'Nimbus Sans';
    src: url('../fonts/NimbusSanL.woff') format('woff');
	font-weight: 400;
	font-style: italic;
}

@font-face {
    font-family: 'Nimbus Sans';
    src: url('../fonts/NimbusSanL.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}

@font-face {
    font-family: 'Nimbus Sans';
    src: url('../fonts/NimbusSanL-Italic.woff') format('woff');
	font-weight: 700;
	font-style: italic;
}

@font-face {
	font-family: 'Instrument Serif';
	src: url('../fonts/InstrumentSerif.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}


:root {
	--font-sans: "Helvetica Neue", "Nimbus Sans L", sans-serif;
	--font-serif: "Garamond", "Times New Roman", serif;
	--font-serif-accent: "Instrument Serif", var(--font-serif);
	--font-mono: "IBM Plex Mono", "Courier Prime", monospace;

	--size-h1: clamp(2.75rem, 1.5rem + 4vw, 3.75rem);
	--size-h2: clamp(2rem, 1.375rem + 2vw, 2.5rem);
	--size-h3: clamp(1.375rem, 0.75rem + 2vw, 1.875rem);
	--size-base: clamp(1.125rem, 0.6563rem + 1.5vw, 1.5rem);

color-scheme: light;
	--fg-default: #111111;
	--fg-subtle: #6c6c6c;
	--bg-default: #fcfcfc;
	--bg-subtle: #eeeeee;
	--border-subtle: #d8d8d8;
	--fg-gradient: #fcfcfc;
	--bg-gradient: #111111;
}

[data-theme="dark"] {
	--fg-default: #f5f5f5;
	--fg-subtle: #9d9d9d;
	--bg-default: #1c1c1c;
	--bg-subtle: #313131;
	--border-subtle: #3d3d3d;
	--fg-gradient: #F6F5F2;
	--bg-gradient: #161616;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.hidden {
	display: none !important;
}

*:focus-visible {
	outline: 2px solid var(--fg-default);
	outline-offset: 2px;
	border-radius: 2px;
}

body {
	font-size: var(--size-base);
	line-height: 1.7;
	font-family: var(--font-sans);
	font-weight: 300;
	text-wrap: pretty;
	color: var(--fg-default);
	background: var(--bg-default);
	margin:0;
	padding-top: 3.75rem;
}

hr {
	border: none;
	border-top: 1px solid var(--border);
	margin: 24px 0;
}

h1 {
	font-size: var(--size-h1);
	font-weight: 600;
	line-height: 1.1;
	margin: 64px 0;
	text-align: center;
}

h2 {
	font-size: var(--size-h2);
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: 0;
}

h3 {
	font-size: var(--size-h3);
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: 0;
}

p {
	letter-spacing: 0.5px;
}

ul {
	padding-left: 20px
}

li {
	list-style-type: "–  ";
}

img {
	max-width: 100%;
	border-radius: 4px;
}

main {
	max-width: 800px;
	margin: 0 auto;
	padding: 16px;
	display: flex;
    flex-direction: column;
	min-height: 66vh;
}

nav {
	/* display: grid;
	grid-template-columns: 1fr 3fr;
	align-items: center;
	padding: 16px; */
	font-weight: 500;
	background-color:var(--bg-default);
	width: 100%;
	font-family: var(--font-sans);
    height: 3.75rem;
    border-bottom: 1px solid var(--border-subtle);
    position: fixed;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
	box-sizing: border-box;
	z-index: 100;
}

nav ul{
	margin: 0;
	padding: 0;
	display: flex;
	gap: 16px;
	justify-content: flex-end;
}

nav li {
	vertical-align: middle;
	list-style-type: none !important;
	margin: auto 0;
	font-size: 0.875rem;
}

nav a {
	text-decoration: none;
	color: var(--fg-default);
	font-size: 0.875rem;
}
nav .brand-wrapper {
	margin: auto 0;
	display: flex;
	align-self: center;
}
nav a:hover {
	text-decoration: underline;
}
nav button {
    background: none;
    border: var(--fg-default) solid 1px;
    padding: 7px 11px;
    border-radius: 100px;
    color: var(--fg-default);
	font-size: 0.875rem;
	font-weight: 500;
	font-family: var(--font-sans);
	cursor: pointer;
}

code {
	font-family: var(--font-mono);
	font-weight: 400;
	background: darkslategrey;
	color: #f7f7f7;
	padding: 0.2rem 0.4rem;
	border-radius: 4px;
}

a {
	color: var(--fg-default);
	text-decoration-color: var(--fg-subtle);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: 
		text-decoration-color 300ms,
		text-decoration-thickness 300ms;
}

a:hover,
a:focus {
	color: var(--fg-default);
	text-decoration-color: var(--fg-default);
	text-decoration-thickness: 2px;
}


.avatar {
    max-width: 200px;
    border-radius: 4px;
	filter:grayscale(100%);
}

bb-card {
	display: block;
	padding: 16px 0;
	border-bottom: 1px solid var(--border);
}

.introduction {
	padding: 24px 0;
	max-width: 600px;
}

bb-intro p {
	font-size: var(--size-h3);
	line-height: 1.6;
	margin-bottom: 0;
	width: 100%;
	text-align: start;
	margin: 0;
}

bb-tags p {
	font-size: 0.9rem;
	font-family: var(--font-mono);
	width: 100%;
	text-align: start;
	margin: 12px 0;
	text-transform: uppercase;
	color: var(--fg-subtle)
}

.posts-metadata {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-family: var(--font-mono);
	font-size: 1rem;
}

.posts-list {
	padding: 0;
	margin: 0;
}

.posts-list-item {
	margin-bottom: 64px;
	list-style-type: none;
}

.posts-list-item > a {
	font-size: var(--size-h3);
}

.posts-description {
	margin: 0;
	font-family: var(--font-serif);
}

footer {
	color: var(--fg-gradient);
    background-color: var(--bg-gradient);
    min-height: 40vh;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

footer a {
	color: var(--fg-gradient);
	text-decoration-color: var(--fg-subtle);
}
footer a:hover,
footer a:focus {
	color: var(--fg-gradient);
	text-decoration-color: var(--fg-gradient);
	text-decoration: underline;
}

footer > div {
    display: flex;
	align-items: center;
    gap: 16px;
}

footer > h2 {
    font-size: clamp(3em, 8vw, 8em) !important;
    line-height: 1;
    margin: 32px 0;
	text-align: left;
}
footer svg {
    fill: var(--fg-gradient);
}

table {
	width: 100%;
	margin-top: 1.5em;
    margin-bottom: 2.5em;
    max-width: 600px;
    border-collapse: collapse;
    border-spacing: 0;
	border-top: 1px solid var(--border-subtle);
}
th {
	color: var(--fg-subtle);
	font-weight: 300;
}

th,
td {
	padding: 1em 1em 1em 0;
	text-align: start;
}
tr {
    border-bottom: 1px solid var(--border-subtle);
}
.back-link::before {
	content: "← ";
	font-family: var(--font-mono);
	font-weight: 100;
}


@media screen and (min-width: 600px) {
	main,
	nav {
		margin: 0 auto;
	}
	footer {
		margin: 0px;
		padding: 40px;
	}
	.wide {
		width: 200%;
		max-width: calc(100vw - 80px);
		align-self: center;
		text-align: center;
	}
	p {
		display: block;
	}
	p:has(> img) {
		display: flex;
		justify-content: center;
		padding: 0 40px;
	}
}


/* ARTICLE SPECIFIC STYLES */

.posts-list > .posts-list-item {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 32px;
	align-items: start;
}
.posts-list > .posts-list-item h3 {
	margin-top: 0;
	margin-bottom: 16px;
}

.posts-list-item a img {
	aspect-ratio: 5 / 4;
	object-fit: cover;
	filter: grayscale(100%);
}

.posts-list-item .posts-description {
	font-size: calc(var(--size-base) * 0.875);
	line-height: 1.2;
	font-family: var(--font-sans);
}

.article-intro{
	padding-bottom: 32px;
	border-bottom: 1px solid var(--border-subtle);
	margin-bottom: 32px;
}

.article-intro * {
	font-family: var(--font-sans);
	font-weight: 400;
}

article h1,
article h2,
article h3 {
	text-align: center;
	font-weight: 500;
}

article p {
	font-family: var(--font-serif);
	font-weight: 300;
	hyphens: auto;
	text-wrap: pretty;
}

article > main > p:not(:has(*:not(a))) {
	text-indent: 2.5rem;
}

article bb-intro p {
	text-indent: 2.5rem;
}

article .back-link {
	font-family: var(--font-sans);
	font-weight: 400;
}

series-heading {
	margin-top: 48px;
}
series-heading h1 {
	font-family: var(--font-serif-accent);
	font-size: clamp(4rem, 3rem + 3vw, 5rem);
	margin-top:0;
	font-weight: 300;
	letter-spacing: -2px;
}

series-heading h2 {
	margin-top: 0;
	letter-spacing: -1px;
}

article series-heading bb-tags p {
	font-family: var(--font-mono);
	margin: 32px 0 0 0;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--fg-subtle);
	text-align: center;
}

article blockquote {
	margin: 64px 0;
	text-align: center;
}

article blockquote p{
	font-size: var(--size-h3);
	font-family: var(--font-sans);
	font-weight: 700;
	margin: auto;
}
article p:has(img) {
	width: 100%;
	box-sizing: border-box;
	align-self: center;
}

article p > img {
	max-height: 600px;
	object-fit: contain;
	background-color: var(--bg-subtle);
}

article img-caption,
article figcaption {
	display: block;
	color: var(--fg-subtle);
	text-align: center;
	margin-top: -16px;
}
img-caption > p,
figcaption > p {
	font-size: calc(var(--size-base) * 0.875);
}
@media screen and (min-width: 600px) {
	article main{
		max-width: 35rem;
	}
	article blockquote,
	article p > img {
		width: 200%;
		max-width: calc(100vw - 80px);
		align-self: center;
	}
	article series-heading {
	margin-top: 32px;
	}

	article series-heading bb-tags p {
	margin-top: 80px;

	}
}

article footer > h2 {
	text-align: left;
}

sources ol > li {
	font-size: calc(var(--size-base) * 0.875);
	color: var(--fg-subtle);
	list-style-type: auto;
	list-style: lower-roman;
	font-family: var(--font-serif);
}

/* FOUNDRY PAGE SPECIFIC STYLES */
.foundry-about {
	text-align:center;
}
.foundry-about bb-intro p {
	text-align:center;
}

.foundry-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
	padding-left: 0px;
}