:root {
	--font-sans-serif: Arial, Helvetica, sans-serif;
	--font-serif: Georgia, serif;
	--font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
	--font-size-small: .83rem;
	--font-size-large: 1.1rem;
	--container: calc(800px + var(--2x) * 2);
	--container-small: calc(80ch + var(--2x) * 2);
	--1x: 6px;
	--2x: 12px;
	--3x: 18px;
	--4x: 36px;
	--5x: 48px;
	--6x: 72px;
	--7x: 128px;
	--color-text: #000;
	--color-text-invert: #fff;
	--color-text-gray: #545454;
	--color-background: #f7f7f7;
	--color-highlight: #907e0f; /* Original colour: #2a6d07 */
	--color-highlight-light: color-mix(in srgb, var(--color-highlight), var(--color-text-invert) 85%);
	--color-highlight-dark: color-mix(in srgb, var(--color-highlight), var(--color-text) 60%);
	--color-gray: #ccc;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-text: #ddd;
		--color-text-invert: #171717;
		--color-text-gray: #afafaf;
		--color-background: #222;
		--color-highlight: #c5b863;
		--color-highlight-light: 
	color-mix(in srgb, var(--color-highlight), var(--color-text-invert) 85%);
		--color-highlight-dark: 
	color-mix(in srgb, var(--color-highlight), var(--color-text) 60%);
		--color-gray: #444;
	}
}

* { box-sizing: border-box; line-height: inherit; -webkit-font-smoothing: antialiased; }
*:focus-visible { outline: 4px solid var(--color-highlight); outline-offset: 4px; }

html, 
body { padding: 0; margin: 0; font-family: var(--font-serif); line-height: 1.3; color: var(--color-text); background-color: var(--color-background); color-scheme: light dark; }
html { font-size: 120%; }

::selection { background-color: var(--color-highlight-light); }

h1, h2, h3, h4, h5, h6 { margin-block: var(--2x); font-weight: 400; }
h1, .h1 { font-size: 2.4rem; }
h2, .h2 { font-size: 1.8rem; }
h3, .h3 { font-size: 1.25rem; font-weight: 600; }
h4, .h4 { font-size: 1.1rem; font-weight: 600; }

a { color: inherit; text-decoration: underline 1px; text-underline-offset: 2px; transition: color .05s ease; }
a:hover { color: var(--color-highlight); }

p { margin-block-start: 0; }
blockquote { padding-inline: var(--3x); margin-inline: var(--3x); border-left: 3px solid var(--color-gray); }
hr { display: block; max-width: 120px; height: 1px; margin: var(--7x) 0; background-color: var(--color-gray); border: none; }
time small { font-size: 75%; }

button, .button { padding: var(--1x) var(--2x); font-size: var(--font-size-small); line-height: 1; text-decoration: none; color: var(--color-text); background-color: var(--color-text-invert); border: 1px solid var(--color-text); border-bottom-width: 2px; border-radius: 3px; }
button:hover, .button:hover { background-color: var(--color-highlight-light); }
button:active, .button:active:not(.disabled) { margin-bottom: 1px; border-bottom-width: 1px; position: relative; top: 1px; }
button[disabled], .button.disabled { color: color-mix(in srgb, var(--color-text), transparent 50%); background-color: color-mix(in srgb, var(--color-text-invert), transparent 100%); border-color: color-mix(in srgb, var(--color-text), transparent 50%); }
button.large, .button.large { padding: var(--2x) var(--4x); }
button svg, .button svg { width: 1em; height: 1em; }

code { display: inline-block; padding: var(--1x) var(--2x); font-family: var(--font-mono); font-size: .75rem; color: #e7e7e7; background-color: #161218; border-radius: 3px; }
code::selection { background-color: var(--color-highlight-dark); }

iframe { width: 100%; }

input { display: block; width: 100%; padding: var(--1x) var(--2x); font-size: 1rem; border: 1px solid; border-radius: 3px; }
input:focus { border-color: var(--color-highlight); outline: 1px solid var(--color-highlight); outline-offset: 0; }
label { font-size: var(--font-size-small); }
label:has(+ input:focus) { color: var(--color-highlight-dark); }

.text-gray { color: var(--color-text-gray); }

[popover] { margin: 0; padding: 0; background-color: var(--color-text-invert); border: 0; }
.dropdown { --dropdown-anchor: --unknown; }
.dropdown button[popovertarget] { anchor-name: var(--dropdown-anchor); }
.dropdown [popover] { max-width: min(90%, var(--container)); padding: var(--2x) var(--3x); border: 1px solid var(--color-text); border-radius: 3px; border-top-right-radius: 0; position: absolute; position-anchor: var(--dropdown-anchor); inset: unset; top: calc(anchor(var(--dropdown-anchor) bottom) - 2px); right: anchor(var(--dropdown-anchor) right); }
.dropdown:has([popover]:popover-open) button[popovertarget] { color: var(--color-text-invert); background-color: var(--color-text); border-bottom-right-radius: 0; }

body > header { max-width: var(--container); padding: var(--4x) var(--2x); margin: auto; margin-bottom: var(--6x); }
body > header nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--1x); }
body > header nav a { padding: var(--2x); }
body > header nav a:first-child { font-size: 1.25em; text-decoration: none; translate: calc(var(--2x) * -1); }
body > header nav button { margin-left: var(--1x); }
body > header nav button svg { translate: 0 1px; }
body > header nav .spacer { flex: 1 1; }

@media (max-width: 500px) {
	body > header nav { justify-content: center; }
	body > header nav a:first-child { width: 100%; text-align: center; translate: none; }
	body > header nav .spacer { display: none; }
}

main { max-width: var(--container); padding: 0 var(--2x); margin: auto; }
main section > header { display: flex; flex-direction: column; }

body > footer { max-width: var(--container); padding: var(--3x) var(--2x); margin: auto; margin-top: var(--7x); font-size: var(--font-size-small); }
body > footer p { margin: 0; }
body > footer a { margin-right: var(--1x); }

#skip { padding: var(--2x) var(--3x); color: var(--color-text); background-color: var(--color-text-invert); border: 2px solid; border-top: none; border-radius: 0 0 1px 1px; position: absolute; top: 0; left: 50%; translate: -50% 0; z-index: 100; }
#skip:not(:focus) { top: -100vh; }

.split { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--2x) var(--5x); }

#hero h1 { font-size: 1.45rem; }
#hero h1 .big { font-size: 2.5em; }

@media (max-width: 767px) {
	#hero h1 .big { font-size: 2em; }
}

#search-modal { width: min(40ch, 90vw); padding: var(--3x) var(--4x); background-color: var(--color-background); border: 1px solid var(--color-text); border-radius: 3px; overflow: visible; }
#search-modal::backdrop { background-color: rgba(0, 0, 0, .5); backdrop-filter: blur(3px); }
#search-modal form[method="dialog"] { position: absolute; bottom: calc(100% + var(--1x)); right: 0; }
#search-modal button[type="submit"] { display: block; margin-top: var(--1x); margin-left: auto; margin-right: 0; }

ul.posts { list-style: none; padding: 0; }
ul.posts li { margin-block: var(--6x); }
ul.posts .h3 { margin-bottom: var(--1x); font-family: var(--font-sans-serif); font-weight: 600; }
ul.posts li p { margin-bottom: var(--2x); }
ul.posts footer { font-size: var(--font-size-small); color: var(--color-text-gray); }
ul.posts footer time { display: block; }
ul.posts footer a { font-style: italic; }

nav.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--2x); margin: var(--4x) 0; font-family: var(--font-sans-serif); }
nav.pagination > * { padding: var(--1x) var(--2x); }

nav.breadcrumbs { margin-top: -1.3em; font-size: var(--font-size-small); color: var(--color-text-gray); }

#categories[popover] ul { padding: 0; margin: 0; list-style: none; }
#categories[popover] ul li:not(:first-child) { margin-top: var(--2x); }

@media (max-width: 1024px) {
	body > header,
	main,
	body > footer { padding-inline: var(--3x); }
}

@media (max-width: 767px) {
	h1, .h1 { font-size: 1.9rem; }
	h2, .h2 { font-size: 1.6rem; }
	h3, .h3 { font-size: 1.15rem; }

	hr { margin-block: var(--6x); }

	body > header { padding-block: var(--3x); margin-bottom: var(--5x); }
}