@layer layout {
	.tcl {
		display: grid;
		grid-template-columns:
			[full-start] minmax(var(--gutter), 1fr)
			[padding-start] var(--padding)
			[main-start] minmax(0, calc(var(--max-width) - 2 * var(--padding)))
			[main-end]
			var(--padding) [padding-end]
			minmax(var(--gutter), 1fr) [full-end];
		grid-template-rows: auto 1fr auto;
		height: 100%;

		> * {
			display: grid;
			grid-template-columns:
				var(--padding)
				[main-start] auto [main-end] var(--padding);
			grid-template-columns: subgrid;
			grid-column: padding;
			align-content: start;
			> * {
				grid-column: main;
			}
		}
	}
}

html,
body {
	height: 100%;
	padding: 0;
	margin: 0;
}

body {
	font-family: 'DM Sans', sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	overflow-y: scroll;
	/* background: #222533; */
	color: #c0c5d3;
}

header,
main,
footer {
	padding-block: 1rem;
}

/* HEADER */

header {
	h1 {
		/* --font-size-h1: 2.074rem; */
		font-weight: 200;
		margin-block: 1.5rem 0rem;
		margin-left: -0.075em;
		--color-link: currentColor;
	}

	.role {
		font-family: 'Bricolage Grotesque', sans-serif;
		font-optical-sizing: auto;
		font-weight: 500;
		font-style: normal;
		font-variation-settings: 'wdth' 100;
		/* --font-size: var(--font-size-h6); */
		/* font-weight: 700; */
		color: #ffe1c7;
	}

	.tagline {
		font-size: var(--font-size-small);
		line-height: var(--line-height-baseline);
		color: #c0c5d3;
	}
}

/* MAIN CONTENT */

/* FOOTER */

footer > div {
	display: flex;
	justify-content: space-between;
}

h2 {
	font-weight: 200;
}

#background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}