* { box-sizing: border-box; }

:root {
	--light: #F0F0F0;
	--dark: #111;

	/* Tailwind colours */
	--color-gray-300: oklch(87.2% .01 258.338);
	--color-gray-400: oklch(70.7% .022 261.325);
	--color-gray-500: oklch(55.1% .027 264.364);
	--color-gray-700: oklch(37.3% .034 259.733);
	--color-gray-800: oklch(27.8% .033 256.848);
	--color-green-400: oklch(79.2% .209 151.711);
	--color-indigo-100: oklch(93% .034 272.788);
	--color-indigo-400: oklch(67.3% .182 276.935);
	--color-indigo-800: oklch(39.8% .195 277.366);
}

body {
	background: url(/assets/images/background/interlaced.png);
	-webkit-backdrop-filter: brightness(92.5%);
	backdrop-filter: brightness(92.5%);

	margin: 0;

	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body > * {
	background: var(--light);

	padding: 2em;
	width: 80%;
	margin: 2.5em auto;
}


img {
	max-width: 100%;
}

h1 {
	margin: 0;
	margin-bottom: 1.5rem;
}

body, nav, input, textarea {
	font-family: Georgia, serif;
}

header, footer {
	background: var(--dark);
	color: var(--light);

	width: 100%;
}

header {
	margin-top: 0;
	margin-bottom: 0;

	padding: 0;

	display: flex;
	justify-content: space-between;

	background: center / cover no-repeat url(/assets/images/header/pipes.jpg);
	min-height: 25em;
}

header section#title {
	font-family:
		Rockwell,
		'Arial Black',
		'Avenir Next Condensed',
		Futura,
		'Gill Sans',
		Verdana,
		Tahoma,
		Impact,
		sans-serif;
	font-weight: 900;
	font-size: 1rem;
	line-height: 4em;

	background: rgba(0, 0, 0, .75);

	width: 25%;
	flex-shrink: 0;
	padding: 1em;

	display: flex;
	align-items: center;
}

header h1 {
	text-align: right;
	font-size: 2rem;
}

nav {
	flex-basis: 75%;
	margin: 0 2em;
	align-content: flex-end;
}

nav ul {
	list-style: none;
	padding: 0;

	display: flex;
	justify-content: flex-end;
}

nav a {
	background: rgba(0, 0, 0, .75);
	padding: 1em;
	margin: .5rem;

	color: white;

	position: relative;
	top: 1rem;
}

main {
	background: var(--light);
	max-width: 35em;
}

main#articles {
	max-width: 50em;
}

main#articles ul {
	list-style: none;
	padding: 0;
}

main#articles table {
	max-width: 100%;
	border-spacing: 0;
}

main#articles table tr td {
	line-height: 1.75em;
	padding: 0;
}

main#articles table tr td { padding: 0.25em 0.5em; }
main#articles table tr:first-child td { padding-top: 0; }
main#articles table tr:last-child td { padding-bottom: 0; }
main#articles table tr td:first-child { padding-left: 0; }
main#articles table tr td:last-child { padding-right: 0; }
main#articles table tr td.article-date {
	white-space: nowrap;
	vertical-align: top;
}

main article a.permalink img { width: .75em; }

main#services ul {
	list-style: none;
	padding: 0;

	display: grid;
	grid-auto-flow: column;

	justify-content: space-between;
	align-items: stretch;
}

main#services ul li {
	margin: 0.25em;

	aspect-ratio: 1;
	overflow: hidden;

	display: grid;

	position: relative;
}

main#services ul li img {
	justify-self: center;
	align-self: center;

	max-width: unset;

	width: 100%;
	height: 100%;
	object-fit: cover;
}

main#services ul li p {
	position: absolute;
	bottom: 0;

	margin: 0;
	padding: 0.5em;

	background: rgba(0, 0, 0, 0.4);
	color: var(--light);
}

form input, form textarea {
	display: block;
	/* Setting `width:` is enough for `<input>`s, but `<textarea>`s can be
	 * resized; allow it to be resized vertically but not horizontally. */
	min-width: 100%;
	max-width: 100%;
	margin: 1em auto;

	font-size: 1em;
	padding: 0.5em;
}

form input[type=submit] {
	cursor: pointer;

	appearance: none;
	border: none;

	background: color-mix(in srgb, var(--light), black 10%);
}

form input[type=submit]:hover {
	background: color-mix(in srgb, var(--light), black 15%);
}

form input[type=submit]:active {
	background: color-mix(in srgb, var(--light), black 20%);
}

form textarea {
	height: 10em;
}

.no-content {
	color: var(--color-gray-400);
}

footer {
	margin-top: auto;
	margin-bottom: 0;

	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

footer section p {
	margin: 0;
}

footer section#credits ul {
	padding: 0;
	margin: 0;
}

footer section#credits ul li {
	list-style: none;
}

footer section#credits ul li {
	margin: .5em 0;
}

footer section#credits a {
	color: darkcyan;
}

/* Everything past this point is Phil's styles, ported from Tailwind. */

main {
	/* Not sure what's up w/ so many (computed) zero-positioned blacks, it
	 * was what the styling was in the browser dev tools, but it works. */
	box-shadow:
		0 0 #0000,
		0 0 #0000,
		0 0 #0000,
		0 0 #0000,
		0 4px 6px -1px #0000001a,
		0 2px 4px -2px #0000001a;
	border-radius: .75rem;
}

main .article-date { color: var(--color-gray-500); }
main article .article-date {
	margin-top: -.5rem;
	margin-bottom: 2rem;
}

main article ul.tools a { text-decoration: none; }

main article h2 { color: var(--color-gray-800); }

main article p, main article ul li {
	line-height: 1.5em;
	color: var(--color-gray-700);
}

main article ul li, main article ol li {
	padding-inline-start: .375em;
	padding-top: .5em;
	padding-bottom: .5em;
}

main article ul li::marker, main article ol li::marker {
	color: var(--color-gray-300);
}

main article ul.tools {
	list-style: none;

	display: flex;
	flex-wrap: wrap;

	gap: .75rem;
	padding: 0;
	margin-top: 1rem;
	margin-bottom: 2rem;
}

main article ul.tools li.tool {
	/* This wasn't styled explicitly, it was using Tailwind's default font
	 * stack; since we use our own font stack, we can override this to the
	 * default OS sans serif font, then the default OS font as a fallback,
	 * then finally, the browser's default sans serif (& the emoji fonts).
	 * We should probably test this on various browsers & OSes, or specify
	 * a font. */
	font-family:
		ui-sans-serif,
		system-ui,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji',
		'Segoe UI Symbol',
		'Noto Color Emoji';

	margin: 0;

	background-color: var(--color-indigo-100);
	color: var(--color-indigo-800);

	font-weight: 500;
	font-size: .875rem;
	line-height: calc(1.25 / .875);

	padding-block: .25rem;
	padding-inline: .75rem;

	border-radius: 3.40282e38px;
}

main article section#steps {
	border-left: solid 4px var(--color-indigo-400);
	padding-left: 1rem;
}

main article section.epilogue {
	border-left: solid 4px var(--color-green-400);
	padding-left: 1rem;
}