/** @see http://cube.fyi */
@layer base, composition, utility, block, exception;

@layer base {
	*, ::before, ::after {
		box-sizing: border-box;
	}

	:root {
		--color-accent: hsl(160 80% 20%);
		--color-canvas-muted: hsl(160 20% 95%);
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--color-canvas: hsl(160 10% 5%);
			--color-canvas-muted: hsl(160 20% 10%);
			--color-accent: hsl(160 54% 70%);
		}
	}

	html {
		background-color: var(--color-canvas);
		color-scheme: light dark;
		font-family: system-ui;
	}

	body {
		--padding: clamp(1rem, 0.9rem + 4vw, 2rem);
		padding: var(--padding);
	}

	:focus-visible {
		outline: 0.125em dashed var(--color-accent, currentColor);
		outline-offset: 0.125em;
		border-radius: 0.25em;
	}

	/* Text Elements */

	/** NOT ALL USED: The last three aren’t used on every page */
	h1, h2, h3, h4 {
		font-weight: 300;
		font-variation-settings: "wdth" var(--fvs-wdth, 100);
	}

	h1 { --fvs-wdth: 120; }
	h2 { --fvs-wdth: 110; }

	a {
		color: var(--color-accent);
	}
	a[aria-current="page"] {
		text-decoration: none;
	}

	:is(a, button, label, input[type="checkbox"], input[type="radio"]) {
		cursor: pointer;
	}

	a svg {
		pointer-events: none;
	}
}

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

	.visually-hidden:focus {
		height: unset;
		width: unset;
		clip: unset;
	}
}

@layer block {
	.skip-link {
		background-color: Canvas;
		padding-block: 0.25em;
		padding-inline: 0.5em;
	}

	nav ul {
		list-style: none;
		padding-inline-start: 0;
		display: flex;
		align-items: baseline;
		column-gap: 0.5rem;
	}

	main :is(p, li) {
		max-inline-size: 52ch;
	}

	html {
		block-size: 100%;
		color-scheme: light dark;
		font-family: system-ui, sans-serif;
		line-height: 1.5;
	}

	body {
		align-items: start;
		block-size: 100%;
		display: grid;
		grid-template:
			"message" min-content
			"header" max-content
			"main" auto
			"footer" max-content / 100%;
		margin: 0;
	}

		/** On every page for now, but not always. */
	body > aside:only-of-type {
		grid-area: message;
		background-color: hsl(0deg 0% 20% / 0.2);
		margin-block-start: -1rem;
		margin-block-end: 1rem;
		justify-self: center;
		inline-size: 100%;
		box-sizing: content-box;
		padding: 1rem;
		display: flex;
		column-gap: 0.5em;
	}

	body aside:only-of-type > p:only-of-type {
		margin-block: 0;
	}

	header {
		display: grid;
		gap: 0.5rem;
		grid-area: header;
	}

	header > a:only-of-type {
		text-decoration: none;
		justify-self: start;
		text-transform: lowercase;
		font-variation-settings: "wdth" 125;
		font-weight: 200;
		font-size: 1.75rem;
	}

	main {
		grid-area: main;
	}

	footer {
		background-color: var(--color-canvas-muted);
		grid-area: footer;
		padding-block: calc(var(--padding) + 0.25rem);
		padding-inline: var(--padding);
		margin-inline: calc(-1 * var(--padding));
		margin-block-end: calc(-1 * var(--padding));
		margin-block-start: 1rem;
		margin-trim: block;
	}

	@supports not (margin-trim: block) {
		footer > :first-child {
			margin-block-start: 0;
		}
		footer > :last-child {
			margin-block-end: 0;
		}
	}

	:where(header, footer) > nav > ul {
		list-style: none;
		padding-inline-start: 0;
		margin-block: 0;
		display: flex;
		font-variation-settings: "wdth" 110;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem;
		line-height: 1;
	}

	pre {
		tab-size: 2ch;
	}
}