:root {
	--color-primary:   #C3975A;
	--color-secondary: #14213D;
	--color-tertiary:  #3E442B;
	--color-accent:    #489FB5;
	--color-contrast:  #eee;
}

html {
	scroll-behavior: smooth;

	font-size: 1.2rem;
}

body {
	margin: 0;
	min-height: 100vh;

	display: grid;
	grid: auto 1fr auto / 1fr 6fr 1fr;

	> * {
		grid-column: 1 / -1;
	}
}

header {
	display: grid;
	grid: auto / subgrid;

	background: var(--color-secondary);
	color:      var(--color-primary);

	box-shadow: 0 0 5px #ccc;

	nav {
		grid-column: 2 / -2;

		display: grid;
		grid: auto / 1fr 1fr;
	}

	h1 {
		margin: 0;
		place-self: center start;
	}

	a {
		--a-color:  var(--color-primary);
		--a-bg:     none;

		background: var(--a-bg);
		color: var(--a-color);

		text-decoration: none;
	}

	ol {
		margin: 0;
		padding: 0;
		place-self: stretch end;

		list-style: none;

		display: flex;
		justify-content: stretch;

		a {
			--a-border: transparent;

			display: block;
			box-sizing: border-box;
			padding: 6px 12px;
			align-content: center;

			height: 100%;
			min-height: 75px;

			font-size: 1.25em;

			border-top: 4px solid var(--a-border);

			&:is(:hover, :focus, .active) {
				--a-border: hsl(from var(--a-bg) h s calc(l - 25));
			}

			&:is(:hover, :focus) {
				&, &.active {
					--a-color: hsl(from var(--color-tertiary) h s calc(l + 10));
					--a-bg:    hsl(from var(--color-accent)   h s calc(l + 10));
				}
			}

			&.active {
				--a-color: var(--color-tertiary);
				--a-bg:    var(--color-accent);
			}
		}
	}
}

footer {
	background: var(--color-tertiary);

	display: grid;
	grid: auto / subgrid;

	&, a {
		color: var(--color-contrast);
	}

	> :nth-child(1) {
		grid-column: 2 / -2;
	}

	> :last-child {
		background: hsl(from var(--color-tertiary) h s calc(l - 10));
		grid-column: 1 / -1;
		display: grid;
		grid: auto / subgrid;

		p {
			grid-column: 2 / -2;
		}
	}

	dl {
		display: grid;
		grid: auto-flow / 1fr 4fr;
		gap: 8px;
	}

	dt {
		font-weight: bold;
	}

	dd {
		margin: 0;
	}
}

:where(h1) {
	margin-block: 0.67em;
	font-size: 2em;
}

main {
	grid-column: 2 / -2;

	li {
		padding: 4px 0;
	}
}

@media screen and (max-width: 1000px) {
	body {
		grid: auto 1fr auto / 1fr 12fr 1fr;
	}
}

@media screen and (max-width: 900px) {
	:where(h1) {
		font-size: 1.5em;
	}
}

@media screen and (max-width: 750px) {
	body {
		grid: auto 1fr auto / 1fr;
	}

	header {
		nav {
			grid: 1fr 1fr / 1fr;
		}

		h1 {
			padding: 6px 12px;
		}

		ol {
			grid-row: 2;
			place-self: stretch;

			li {
				flex: 1 1 auto;
				text-align: center;
			}

			a {
				min-height: initial;
			}
		}
	}

	main, footer section {
		padding: 0 8px;
	}

	footer {
		dl {
			grid: auto-flow / min-content auto;
		}
	}
}