/*
	AnashUK tweaks — layered on top of Stellar's main.css.
	Colours are taken from the logo.
*/

:root {
	--accent: #c99a6b;
	--ink: #3f4649;
	--text: #5b6366;
	--line: #e4ddd5;
}

/* Base */

	body {
		background: #e7dfd5;
	}

/* Shell */

	.site {
		position: relative;
		width: 80em;
		max-width: calc(100% - 4em);
		margin: 1.25em auto 0 auto;
		padding-bottom: 2.5em; /* room for the fixed footer */
	}

		@media screen and (max-width: 736px) {

			.site {
				max-width: calc(100% - 2em);
				margin-top: 0.75em;
				padding-bottom: 2em;
			}

		}

/* Nav */

	#nav {
		background-color: #f6f2ed;
		border-bottom: 1px solid var(--line);
		border-top-left-radius: 0.4em;
		border-top-right-radius: 0.4em;
	}

		#nav ul li a {
			border-radius: 0.3em;
			color: var(--text);
		}

			#nav ul li a.active {
				background-color: #ffffff;
				box-shadow: inset 0 0 0 1px var(--line);
				color: var(--ink);
			}

		#nav.alt {
			left: 0;
			background-color: rgba(246, 242, 237, 0.97);
		}

/* Main */

	#main {
		border-radius: 0.4em;
		color: var(--text);
	}

		#main h1, #main h2, #main h3, #main h4, #main h5, #main h6 {
			color: var(--ink);
		}

		#main header.major h2 {
			font-weight: 400;
			line-height: 1.35;
		}

			#main header.major h2:after {
				background-image: none;
				background-color: var(--accent);
			}

/* Intro */

	#main > #intro.main {
		padding-top: 2.25em;
		padding-bottom: 2em;
	}

	#intro header.major {
		margin-bottom: 1.5em;
	}

		#intro header.major h2:after {
			margin-bottom: 0;
		}

	#intro p {
		margin-bottom: 1.25em;
	}

	#intro ul {
		columns: 2;
		column-gap: 2em;
		margin-bottom: 0;
	}

	#intro .spotlight .image {
		border-color: var(--line);
	}

		#intro .spotlight .image img {
			width: 13em;
		}

	#intro ul li::marker {
		color: var(--accent);
	}

		@media screen and (max-width: 980px) {

			#intro ul {
				display: inline-block;
				columns: 1;
				text-align: left;
			}

			#intro .spotlight .image {
				margin-bottom: 1em;
			}

				#intro .spotlight .image img {
					width: 7.5em;
				}

			#main > #intro.main {
				padding-top: 1.75em;
				padding-bottom: 1.5em;
			}

			#intro header.major h2 {
				font-size: 1.6em;
			}

		}

/* Footer (thin bar pinned to the bottom of the viewport) */

	.site #footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10000;
		display: block;
		width: 100%;
		margin: 0;
		padding: 0.4em 1em;
		background-color: #f6f2ed;
		border-top: 1px solid var(--line);
	}

		.site #footer .copyright {
			width: 100%;
			margin: 0;
			font-size: 0.7em;
			line-height: 1.5;
			text-align: center;
			color: var(--text);
		}