@layer components {
		s-logo {
			display: grid;
			place-content: center;
			height: 20vh;

			svg {
				width: 100%;
				max-width: 100%;
				height: auto;
				max-height: 100%;
				view-transition-name: --vt-s-logo;
			}
		}
	}
@layer components {
		.header {
			z-index: 1;
			position: relative;
			padding: 1rem;
			background-color: var(--color-bg);
			view-transition-name: --vt-header;

			[data-layout='home'] & {
				background-color: var(--color-bg2);

				.logo {
					pointer-events: none;
				}
			}
		}

		.nav {
			display: flex;
			width: fit-content;
			margin: auto;
			padding: 1rem 2rem;
			gap: calc(0.1rem + 2vw);
			transform-origin: bottom center;
			border-radius: 1em / 2em;
			corner-shape: bevel;
			font-weight: 600;
			view-transition-name: --vt-nav;
			transition:
				transform 0.8s var(--curve1),
				background-color 0.3s ease;

			[data-layout='home'] & {
				&:hover,
				&:focus-within {
					transform: scale(1.1);
					background-color: var(--color-bg);
				}
			}

			a {
				position: relative;
				padding: 0.25em 0.5em;
				border-radius: inherit;
				corner-shape: inherit;
				outline-offset: 0;
				text-decoration: none;
				user-select: none;

				&:hover {
					/* background-color: var(--color-accent1); */
					/* font-weight: 900; */
					outline: var(--focus-outline-width) solid var(--color-accent1);
				}

				&:active {
					outline-offset: 0.5;
				}

				&[aria-current='page'] {
					&:after {
						position: absolute;
						right: 0.5em;
						bottom: -0.15em;
						left: 0.5em;
						height: 0.1em;
						background-color: var(--color-accent1);
						content: '';
						view-transition-name: --nav-indicator;
					}
				}
			}
		}
	}
@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
	* {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

@layer basis {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
		/* letter-spacing: clamp(-0.05em, calc((1em - 1rem) / -10), 0em); */
	}

	:root {
		--color-bg: hsl(162, 3%, 7%);
		--color-bg2: hsl(162, 15%, 9%);
		--color-fg1: hsl(45, 10%, 90%, 1);
		--color-fg2: hsl(240, 15%, 70%, 1);
		--color-accent1: hsl(162, 36%, 20%);
		/* --color-accent1: hsl(45, 20%, 40%, 1); */
		--color-strokes: darkslategrey;
		/* --color-strokes: hsl(45, 10%, 40%, 1); */
		--stroke-width: 2px;
		--focus-outline-width: 3px;
		--text-size-fliud: clamp(1.3rem, 0.3rem + 2.3vw, 1.8rem);
		--curve1: cubic-bezier(0.1, 0.9, 0, 1);
	}

	::selection {
		background-color: var(--color-strokes);
	}

	:focus-visible {
		border-radius: 1em / 2em;
		outline: var(--focus-outline-width) solid var(--color-accent1);
		corner-shape: bevel;
	}

	[hidden] {
		display: none;
	}

	html {
		-moz-text-size-adjust: none;
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
		-webkit-font-smoothing: antialiased;
		min-height: 100%;
		overflow-x: hidden;
		background-color: var(--color-bg);
		line-height: 1.5;
		font-family: 'Alegreya', sans-serif;
		scroll-behavior: smooth;
	}

	body {
		min-height: 100vh;
		margin: 0;
		color: var(--color-fg1);
		font-size: 120%;
	}

	a {
		color: inherit;
		text-decoration-color: var(--color-strokes);
		text-decoration-thickness: var(--stroke-width);
		text-underline-offset: 0.2em;
		transition: text-underline-offset 0.2s ease;

		&:hover {
			text-underline-offset: 0.3em;
		}
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	button,
	input,
	label {
		line-height: 1.4;
		text-wrap: balance;
	}

	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
	}

	p {
		text-wrap: pretty;
	}

	a[href],
	button,
	select,
	input,
	label,
	summary {
		cursor: pointer;
	}
	input[type='text'] {
		cursor: text;
	}

	picture {
		/* display: contents; */
	}

	img,
	video {
		display: block;
		width: 100%;
		height: auto;
	}

	hr {
		width: 100%;
	}

	ul,
	ol {
		margin-block-end: 2em;
	}
}
:root {
	--grid-gap: clamp(1rem, 6vw, 3rem);
	--grid-full: minmax(var(--grid-gap), 1fr);
	/* --grid-image: calc(100vw - ); */
	--grid-content: min(64ch, 100% - var(--grid-gap) * 2);
	--grid-popout: minmax(0, 10rem);
	--grid-feature: minmax(0, 10rem);

	--scrollbar-size: 0.2rem;
	--scrollbar-minlength: 1rem;
	--scrollbar-track-color: transparent;
	--scrollbar-color: rgba(100, 100, 100, 0.5);
	--scrollbar-color-parent-hover: rgba(100, 100, 100, 0.4);
	--scrollbar-color-hover: rgba(100, 100, 100, 0.7);
	--scrollbar-color-active: rgb(100, 100, 100, 0.8);
}

@layer utils {
	.page-grid {
		display: grid;
		grid-template-columns:
			[full-start] var(--grid-full)
			/* [image-start] var(--grid-image) */
			[feature-start] var(--grid-feature)
			[popout-start] var(--grid-popout)
			[content-start] var(--grid-content) [content-end]
			var(--grid-popout) [popout-end]
			var(--grid-feature) [feature-end]
			/* var(--grid-image) [image-end] */
			var(--grid-full) [full-end];

		> * {
			grid-column: content;
		}
	}

	.grid-popout {
		grid-column: popout;
	}
	.grid-feature {
		grid-column: feature;
	}
	.grid-full {
		grid-column: full;
	}
	.grid-full-limited {
		grid-column: full;
		max-width: 100rem;
		margin-inline: auto;
	}

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

	.display-contents {
		display: contents;
	}

	.styled-scrollbar {
		/* firefox */
		scrollbar-color: var(--scrollbar-color) var(--scrollbar-track-color);
		scrollbar-width: thin;

		/* webkit */
		&::-webkit-scrollbar {
			width: var(--scrollbar-size);
			height: var(--scrollbar-size);
		}
		&::-webkit-scrollbar-track {
			background-color: var(--scrollbar-track-color);
		}
		&::-webkit-scrollbar-thumb {
			border-radius: 0.2rem;
			background-color: var(--scrollbar-color);
		}
		&:hover::-webkit-scrollbar-thumb,
		&:focus::-webkit-scrollbar-thumb {
			background-color: var(--scrollbar-color-parent-hover);
		}
		&::-webkit-scrollbar-thumb:hover {
			background-color: var(--scrollbar-color-hover);
		}
		&::-webkit-scrollbar-thumb:active {
			background-color: var(--scrollbar-color-active);
		}
		&:-webkit-scrollbar-thumb:vertical {
			min-height: var(--scrollbar-minlength);
		}
		&:-webkit-scrollbar-thumb:horizontal {
			min-width: var(--scrollbar-minlength);
		}
	}
}

@layer components {
	.codeblock {
		position: relative;
		border: 1px solid #ffffff18;
		border-radius: 0.5rem;
		font-size: 80%;
		/* border-top-right-radius: 0.5rem;
			border-top-left-radius: 0.5rem; */

		&:before {
			display: block;
			padding: 0.5em;
			background-color: #ffffff10;
			content: attr(data-language);
		}

		> code {
			display: block;
			padding: 1rem;
			overflow-y: auto;
			/* border: 1px solid #ffffff18; */
			/* background-color: #00000090; */
			background-color: #ffffff08;
		}
	}

	.skip-link {
		z-index: 100;
		position: absolute;
		top: 1rem;
		left: 1rem;
		padding: 0.5rem;
		transform: translateY(-150%);
		transition: transform ease-out 160ms;
	}

	.skip-link:focus {
		transform: translateY(0);
	}

	.post-facts {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 2rem;
		row-gap: 1rem;
	}
}
@layer layout {
		.main {
			z-index: 1;
			position: relative;
			margin-bottom: 10rem;
			padding-top: 2rem;
			padding-bottom: 5rem;
			/* border-top: var(--stroke-width) solid var(--color-accent1);
			border-bottom: var(--stroke-width) solid var(--color-accent1); */
			background-color: var(--color-bg2);
			view-transition-name: --vt-main;
		}

		.footer {
			position: fixed;
			bottom: 0;
			width: 100%;
			margin-inline: auto;
			padding: 1rem;

			/* temporary solution to links not being visible when focused, in future scrollintoview when focus? */
			&:focus-within {
				z-index: 100;
				background-color: var(--color-bg);
			}
		}
	}