:root {
	--colour-black: #000000;
	--colour-white: #ffffff;

	--colour-grey-700: #282828;
	--colour-grey-800: #131313;

	--colour-primary: hsl(var(--hue), 100%, var(--lightness));
	--colour-primary-offset: hsl(calc(var(--hue) + 30deg), 100%, var(--lightness));

	--font-base: "Departure Mono Regular", "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
	--font-mono: var(--font-base);
	--font-display: "Malum Illegitimi", monospace;
	--font-normal: 400;
	--font-bold: 700;

	/* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
	--type-step-000: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
	--type-step-00: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
	--type-step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
	--type-step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
	--type-step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
	--type-step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
	--type-step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
	--type-step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);

	/* Type Leading */
	--leading-micro: 0.85;
	--leading-flat: 1;
	--leading-fine: 1.2;
	--leading-standard: 1.4;
	--leading-loose: 1.7;

	/* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
	--space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
	--space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
	--space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
	--space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
	--space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
	--space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
	--space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
	--space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
	--space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);

	/* One-up pairs */
	--space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
	--space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
	--space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
	--space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
	--space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
	--space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
	--space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
	--space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);

	/* Custom pairs */
	--space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);

	/* Global Variables */
	--wrapper-max-width: 1460px;
	--sidebar-content-min-width: 60%;
	--navigation-height: var(--space-2xl);
	--gutter: var(--space-xs-s);
	--stroke-width: 1px;
	--stroke-color: var(--colour-primary);
	--stroke: var(--stroke-width) solid var(--stroke-color);
	--easing: cubic-bezier(0.885, 0.09, 0.49, 0.85);
	--border-radius: 8px;

	--distortion: none;
	--distortion-highlighted: none;
	--svg-distortion: none;
	--svg-distortion-highlighted: none;

	--body-background: var(--colour-grey-800);
	--hue-slider-thumb-background: var(--body-background);
	--hue-change-animation: 200ms ease-in-out;
}

/* Modern reset: https://piccalil.li/blog/a-more-modern-css-reset/ */

/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Prevent font size inflation */
html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol,
pre {
	margin-block: 0;
}

/* Remove list styles on ul, ol elements with a class, which suggests default styling will be removed */
ul[class],
ol[class] {
	list-style: none;
	margin-inline: 0;
	padding: 0;
}

/* Set core body defaults */
body {
	min-height: 100vh;
	line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
	line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
	text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
	-webkit-text-decoration-skip: ink;
	        text-decoration-skip-ink: auto;
	color: currentColor;
}

/* Make images easier to work with */
img,
picture {
	max-width: 100%;
	display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
	font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
	min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
	scroll-margin-block: 5ex;
}

@font-face {
	font-family: 'Departure Mono Regular';
	src: url('/fonts/departuremono-regular-webfont.woff2') format('woff2'),
	url('/fonts/departuremono-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Malum Illegitimi';
	src: url('/fonts/malumillegitimi-webfont.woff2') format('woff2'),
	url('/fonts/malumillegitimi-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

body {
	background: var(--body-background);
	color: var(--colour-primary);
	font-size: var(--type-step-0);
	font-family: var(--font-base);
	line-height: var(--leading-standard);
	font-size-adjust: from-font;
	margin: 0;
	padding-block: var(--gutter);
	text-shadow: var(--distortion);
	transition: color var(--hue-change-animation), border var(--hue-change-animation);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:is(h1, h2, h3) {
	line-height: var(--leading-fine);
	text-wrap: balance;
	font-weight: var(--font-normal);
}

h1 {
	font-size: var(--type-step-3);
}

h2 {
	font-size: var(--type-step-2);
}

h3 {
	font-size: var(--type-step-1);
}

:is(h4, h5, h6) {
	font-size: var(--type-step-0);
	font-weight: var(--font-normal);
}

small {
	font-size: var(--type-step-00);
}

ins {
	text-decoration: none;
	background: var(--colour-primary);
	color: var(--colour-black);
	padding-inline: 0.3em;
}

:is(code, kbd, samp) {
	font-family: var(--font-mono);
	padding: 0.2em 0.2em 0.05em 0.2em;
	-webkit-hyphens: none;
	        hyphens: none;
	text-align: left;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	-webkit-box-decoration-break: clone;
	        box-decoration-break: clone;
	background: var(--colour-grey-700);
}

/* This is quite a new property, so we want code styles to at least, not be huge or tiny */
@supports not (font-size-adjust: from-font) {
	:is(code, kbd, samp) {
		font-size: 0.8em;
	}
}

pre {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	background: var(--colour-grey-700);
	padding: var(--flow-space, 1em);
	-moz-tab-size: 4ch;
	  -o-tab-size: 4ch;
	     tab-size: 4ch;
}

pre code {
	border: none;
	background: none;
	padding: 0;
}

kbd {
	border: 1px solid;
	padding-block-end: 0.1em;
}

var {
	font-style: normal;
	font-weight: var(--font-normal);
}

ul:not([class]) {
	padding-inline-start: 1.7ch;
	list-style-type: disc;
}

ul:not([class]) > li {
	padding-inline-start: 0.9ch;
}

ol:not([class]) {
	padding-inline-start: 2.1ch;
}

ol:not([class]) > li {
	padding-inline-start: 0.5ch;
}

:is(ol, ul):not([class]) li + * {
	margin-block-start: var(--space-3xs);
}

ul ::marker {
	font-size: 0.8lh;
}

ol ::marker {
	font-size: 1em;
	font-weight: var(--font-bold);
}

dt {
	font-weight: var(--font-normal);
}

dt + dd {
	margin-block-start: var(--space-xs);
}

dd + dt {
	margin-block-start: var(--space-s);
}

dd {
	margin-inline-start: 1.5ch;
}

blockquote {
	margin-inline: 0;
}

blockquote footer {
	margin-block-start: var(--space-s);
}

blockquote q {
	font-style: normal;
}

q {
	display: inline-block;
	font-style: italic;
}

q:before {
	content: "\201C";
}

q:after {
	content: "\201D";
}

:is(video, iframe[src*='youtube'], iframe[src*='vimeo']) {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
}

.youtube {
	border: 2px solid var(--colour-primary);
	box-shadow: var(--distortion);
	transition: border var(--hue-change-animation);
}

img {
	height: auto;
	max-width: 100%;
	display: block;
}

figure {
	margin-inline: var(--space-s);
}

figcaption {
	padding-block-start: 0.5em;
	font-size: var(--type-step-0);
	font-family: monospace;
}

table {
	border: var(--stroke);
	border-collapse: collapse;
	width: 100%;
}

th {
	text-align: left;
	font-weight: var(--font-bold);
	line-height: var(--leading-fine);
}

thead th {
	padding-block: var(--space-s);
}

td,
th {
	padding: var(--space-xs) var(--space-s);
}

th:not(:only-of-type) {
	border-block-end: var(--stroke);
}

th:only-of-type {
	border-inline-end: var(--stroke);
}

:is(th, td) ~ :is(th, td) {
	border-inline-start: var(--stroke);
}

tr + tr :is(th, td) {
	border-block-start: var(--stroke);
}

caption {
	caption-side: bottom;
	margin-block-start: var(--space-s);
}

a:not([class]) {
	color: var(--colour-primary);
}

a:not([class]),
a[aria-current] {
	transition: color var(--hue-change-animation), background var(--hue-change-animation), text-shadow var(--hue-change-animation);
}

a:not([class]):hover,
a:not([class]):focus-visible,
a[aria-current] {
	background: var(--colour-primary);
	color: var(--colour-black);
	text-shadow: var(--distortion-highlighted);
}

:focus {
	outline: none;
}

/* Firefox is the only browser that doesn't outline the whole element unless you make it display: inline-block.
 * That in itself causes multiple flow issues so we can detect it, using its own vendor prefix and reduce focus offset
 */
@supports (-moz-appearance: none) {
	:root {
		--focus-offset: 0.08em;
	}
}

:target {
	scroll-margin-block: 5lh;
}

::-moz-selection {
	color: var(--colour-black);
	background: var(--colour-primary);
	text-shadow: var(--distortion-highlighted);
}

::selection {
	color: var(--colour-black);
	background: var(--colour-primary);
	text-shadow: var(--distortion-highlighted);
}

hr {
	border: none;
	border-block-start: var(--hr-stroke, var(--stroke));
	margin-block: var(--flow-space, var(--space-xl));
}

svg:not([class]) {
	flex-shrink: 0;
	filter: var(--svg-distortion);
}

svg[role='img'][width][height] {
	width: revert;
	height: revert;
	background: var(--colour-white);
	padding: var(--space-xs);
}

svg * {
	transition: fill var(--hue-change-animation), stroke var(--hue-change-animation);
}

/* There's a .flow composition, but this prevents forms from having to have that applied where markup is harder to
 * control in certain systems. It still uses the --flow-space variables though to make managing space easier
 */
:is(form, [role='form']) > * + * {
	margin-top: var(--flow-space, var(--space-l));
}

:is(input, select, textarea) {
	accent-color: var(--colour-primary);
}

/* We hide the focus styles on radios and checkboxes because the enclosing label with be the visual indicator
 */
:is(:not([type='checkbox'], [type='radio'])):focus-visible {
	--form-field-border-color: var(--colour-primary);
	outline: 2px solid var(--colour-primary, currentColor);
}

:is(input:not([type='checkbox'], [type='radio'], [type='color']), select, textarea),
label:has([type='radio']) {
	padding: 0.5em;
	border: 1px solid var(--form-field-border-color, var(--color-grey-300));
	border-radius: var(--border-radius);
	background-color: var(--color-white);
	color: var(--color-black);
	width: 100%;
	font-family: var(--font-base);
	max-width: var(--form-field-max-width);
	line-height: var(--leading-standard);
}

label:has([type='checkbox']) {
	max-width: var(--form-field-max-width);
}

:is([type='checkbox'], [type='radio']) {
	--radio-size: var(--space-s);

	flex-shrink: 0;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	width: var(--radio-size);
	height: var(--radio-size);
	border: 3px solid var(--form-field-border-color, var(--colour-primary));
	position: relative;
	background: var(--colour-grey-800);
}

:is([type='checkbox'], [type='radio']):checked {
	background: var(--colour-primary);
}

:is([type='checkbox'], [type='radio']):before {
	content: '';
	position: absolute;
}

[type='radio'] {
	margin: 0.4ex 0 0;
}

[type='radio'],
[type='radio']:before {
	border-radius: 50%;
}

[type='radio']:before {
	background: var(--colour-primary);
	height: 40%;
	width: 40%;
	top: 30%;
	left: 30%;
	border-radius: 50%;
}

[type='checkbox'] {
	margin: 0.2ex 0 0;
	border-radius: 2px;
}

[type='checkbox']:before {
	height: 80%;
	width: 40%;
	top: 2%;
	left: 30%;
	transform: rotateZ(45deg);
	border-color: var(--colour-grey-800);
	border-width: 0 3px 3px 0;
	border-style: solid;
}

label:has([type='checkbox'], [type='radio'])::-moz-placeholder {
	color: var(--colour-primary);
	opacity: 1;
}

label:has([type='checkbox'], [type='radio'])::placeholder {
	color: var(--colour-primary);
	opacity: 1;
}

label:has([type='checkbox'], [type='radio']):hover {
	cursor: pointer;
}

label {
	line-height: var(--leading-fine);
	font-weight: var(--font-bold);
}

label::after {
	content: '\A';
	white-space: pre;
}

/* Usually label wraps checkbox and radio buttons, so we give ourselves more layout and text-flow control with flex */
label:has(input) {
	display: flex;
	gap: 0.5em;
	font-weight: var(--font-normal);
}

label:has([type='checkbox']:focus, [type='radio']:focus) {
	--form-field-border-color: var(--colour-primary);
	outline: 2px solid var(--colour-primary, currentColor);
}

label:has([type='checkbox']:checked, [type='radio']:checked) {
	--form-field-border-color: var(--colour-primary);
}

input:disabled {
	opacity: 0.5;
}

input:disabled,
label input:disabled + * {
	cursor: not-allowed;
}

fieldset {
	border: 0;
	padding: 0;
}

/* We consider the legend element to be the main "label" in fieldsets so actual labels should not be bold */
fieldset:has(legend) label {
	font-weight: var(--font-normal);
}

button:not([disabled]) {
	cursor: pointer;
}

legend {
	font-weight: var(--font-bold);
}

summary {
	cursor: pointer;
}

/*
 * Webkit has issues when you try define mixed selectors so the FF and Webkit styles need to be applied separately
 * To make this easier to maintain we define the shared rules as vars
 */
input[type="range"] {
	--border: 3px solid var(--colour-primary);
	--track-background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
	--track-width: 100%;
	--track-height: var(--space-m);
	--track-radius: 1rem;
	--thumb-background: var(--hue-slider-thumb-background);
	--thumb-background-focus: var(--colour-grey-800);
	--thumb-height: var(--space-l);
	--thumb-width: var(--space-l);
	--thumb-radius: 50%;

	-webkit-appearance: none;
	width: var(--track-width);
	height: var(--track-height);
	background: transparent;
	padding-inline: 0;
}

input[type="range"]:focus {
	outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
	width: var(--track-width);
	height: var(--track-height);
	cursor: pointer;
	background: var(--track-background);
	border-radius: var(--track-radius);
	border: var(--border);
}

input[type="range"]::-webkit-slider-thumb {
	border: var(--border);
	height: var(--thumb-height);
	width: var(--thumb-width);
	border-radius: var(--thumb-radius);
	background: var(--thumb-background);
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: calc((var(--thumb-height) - var(--track-height) - 3px) * -1);
}

input[type="range"]:focus::-webkit-slider-thumb {
	background: var(--thumb-background-focus);
}

input[type="range"]::-moz-range-track {
	width: var(--track-width);
	height: var(--track-height);
	background: var(--track-background);
	border-radius: var(--track-radius);
	border: var(--border);
	cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
	border: var(--border);
	height: var(--thumb-height);
	width: var(--thumb-width);
	border-radius: var(--thumb-radius);
	background: var(--thumb-background);
	cursor: pointer;
}

/* This doesn't work */
input[type="range"]:focus::-moz-range-thumb {
	background: var(--thumb-background-focus);
}

input[type="range"].hue {
	--track-background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

input[type="range"].lightness {
	--track-background: linear-gradient(to right, #808080 0%, #ffffff 100%);
}


@keyframes flicker-scan-lines {
    0% {
        opacity: 0.3;
        background-position: 0 0;
    }
    20% {
        opacity: 0.8;
    }
    40% {
        opacity: 0.4;
    }
    60% {
        opacity: 0.7;
    }
    80% {
        opacity: 0.6;
    }
    100% {
        opacity: 0.8;
        background-position: 0 1%;
    }
}

:root.show-CRT {
    --distortion-highlighted: 0.1px 0 1px rgba(0, 30, 255, 0.1), -0.1px 0 1px rgba(255, 0, 80, 0.1), 0 0 3px;
    --distortion: 2.2px 0 1px rgba(0, 30, 255, .5), -2.2px 0 1px rgba(255, 0, 80, .3), 0 0 3px;
    --svg-distortion: drop-shadow(2.2px 0 1px rgba(0, 30, 255, .5)) drop-shadow(-2.2px 0 1px rgba(255, 0, 80, .3)) drop-shadow(0 0 1px);
    --svg-distortion-highlighted: drop-shadow(0.1px 0 1px rgba(0, 30, 255, 0.1)) drop-shadow(-0.1px 0 1px rgba(255, 0, 80, 0.1));
}

:root.show-CRT body::before {
    content: '';
    display: block;
    position: fixed;
    inset: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(89, 255, 0, 0.06), rgba(85, 0, 255, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
    animation: flicker-scan-lines 10s infinite;
    animation-timing-function: linear;
}
.skip-link {
	background-color: var(--colour-grey-800);
	color: var(--colour-primary);
	display: block;
	top: var(--gutter);
	left: var(--gutter);
	padding-inline: var(--space-xs);
	padding-block: var(--space-2xs);
	position: fixed;
	z-index: 99;
}

.skip-link:not(:focus):not(:active) {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	width: 1px;
}
.show-vignette .vignette {
	background-image: url(/images/crt.png), radial-gradient(ellipse at center, hsla(var(--hue), 85.52%, 43.33%, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
	position: fixed;
	inset: 0;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	z-index: 98;
	pointer-events: none;
	transition: background-image 200ms ease-in-out;
}

:root:not(.show-vignette) .vignette {
	display: none;
}
/* 
VISUALLY HIDDEN UTILITY
Info: https://piccalil.li/quick-tip/visually-hidden/ 
*/
.visually-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 0;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}


/*
CLUSTER
More info: https://every-layout.dev/layouts/cluster/
A layout that lets you distribute items with consitent
spacing, regardless of their size

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-m)): This defines the space
between each item.

--cluster-horizontal-alignment (flex-start): How items should align
horizontally. Can be any acceptable flexbox aligmnent value.

--cluster-vertical-alignment (center): How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gutter, var(--space-m));
	justify-content: var(--cluster-horizontal-alignment, flex-start);
	align-items: var(--cluster-vertical-alignment, center);
}

/* 
FLOW COMPOSITION 
Like the Every Layout stack: https://every-layout.dev/layouts/stack/
Info about this implementation: https://piccalil.li/blog/my-favourite-3-lines-of-css/ 
*/
.flow > * + * {
	margin-block-start: var(--flow-space, 1em);
}

/* AUTO GRID
Related Every Layout: https://every-layout.dev/layouts/grid/
More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
A flexible layout that will create an auto-fill grid with configurable grid item sizes

The grid will distribute its child elements evenly into rows and columns. It will try to fit all items into one row, but will create
new rows and distribute the items across the rows, until each item in a row is at least --grid-min-item-size units wide.

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-m)): This defines the space
between each item.

--grid-min-item-size (14rem): How large each item should be
ideally, as a minimum.

--grid-placement (auto-fill): Set either auto-fit or auto-fill
to change how empty grid tracks are handled */

.grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-placement, auto-fill), minmax(var(--grid-min-item-size, 16rem), 1fr));
	gap: var(--gutter, var(--space-l));
}

/* A split 50/50 layout that sizes */
.grid[data-layout='50-50'] {
	--grid-placement: auto-fit;
	--grid-min-item-size: clamp(8rem, 50vw, 24rem);
}

.grid[data-layout='halves'] {
	--grid-placement: auto-fit;
	--grid-min-item-size: clamp(10rem, 40%, 24rem);
}

/* Three column grid layout */
.grid[data-layout='thirds'] {
	--grid-placement: auto-fit;
	--grid-min-item-size: clamp(16rem, 33%, 20rem);
}

.grid[data-layout='quarters'] {
	--grid-min-item-size: clamp(5rem, 20%, 18rem);
}

.grid__item-full-width {
	grid-column-start: 1;
	grid-column-end: -1;
}

/*
REPEL
Repel is used when you need 2 elements in a row that align to the left and right
edges but will stack once there is not enough space for them.

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-m)): This defines the space
between each item.

--repel-vertical-alignment (center): How items should align vertically.
Can be any acceptable flexbox alignment value.
*/
.repel {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: var(--repel-vertical-alignment, center);
	gap: var(--gutter, var(--space-m));
}

.repel[data-nowrap] {
	flex-wrap: nowrap;
}

/* 
SIDEBAR
More info: https://every-layout.dev/layouts/sidebar/
A layout that allows you to have a flexible main content area
and a "fixed" width sidebar that sits on the left or right.
If there is not enough viewport space to fit both the sidebar
width *and* the main content minimum width, they will stack
on top of each other

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between the sidebar and main content.

--sidebar-target-width (20rem): How large the sidebar should be

--sidebar-content-min-width(50%): The minimum size of the main content area

EXCEPTIONS
.sidebar[data-direction='rtl']: flips the sidebar to be on the right 
*/
.sidebar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gutter, var(--space-s-l));
}

.sidebar:not([data-direction]) > :first-child {
	flex-basis: var(--sidebar-target-width, 20rem);
	flex-grow: 1;
}

.sidebar:not([data-direction]) > :last-child {
	flex-basis: 0;
	flex-grow: 999;
	min-width: var(--sidebar-content-min-width, 50%);
}

.sidebar[data-reversed] {
	flex-direction: row-reverse;
}

.sidebar[data-direction='rtl'] > :last-child {
	flex-basis: var(--sidebar-target-width, 20rem);
	flex-grow: 1;
}

.sidebar[data-direction='rtl'] > :first-child {
	flex-basis: 0;
	flex-grow: 999;
	min-width: var(--sidebar-content-min-width, 50%);
}

/*
SWITCHER
More info: https://every-layout.dev/layouts/switcher/
A layout that allows you to lay **2** items next to each other
until there is not enough horizontal space to allow that.

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between each item

--switcher-target-container-width (40rem): How large the container
needs to be to allow items to sit inline with each other

--switcher-vertical-alignment (flex-start): How items should align vertically.
Can be any acceptable flexbox alignment value.
*/
.switcher {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gutter, var(--space-l));
	align-items: var(--switcher-vertical-alignment, flex-start);
}

.switcher > * {
	flex-grow: 1;
	flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
}

/* Max 2 items,
so anything greater than 2 is full width */
.switcher > :nth-child(n + 3) {
	flex-basis: 100%;
}

/* CONTENT WRAPPER COMPOSITION
A common wrapper/container. Usually used for the top-level elements on the page (children of `body`) to center them horizontally.

Note: This is called `.content-wrapper` only because some ad-blockers target the class `.wrapper`
*/
.wrapper {
	margin-inline: auto;
	width: 100%;
	max-width: var(--wrapper-max-width, 1360px);
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	position: relative;
}


.blurb {
	align-items: center;
	font-size: var(--type-step-1);
}

.blurb h1 {
	font-size: var(--type-step-1);
}
.box {
	border: 2px solid var(--colour-primary);
	box-shadow: var(--distortion);
	transition: border var(--hue-change-animation), background var(--hue-change-animation);
	padding: var(--gutter);
	width: 100%;
}

.box[data-filled] {
	background: var(--colour-primary);
	color: var(--colour-black);
	text-shadow: var(--distortion-highlighted);
}

.box[data-filled] a:not([class]) {
	color: var(--colour-grey-800);
}

.box[data-filled] ::-moz-selection {
	background: var(--colour-black);
	color: var(--colour-primary);
	text-shadow: var(--distortion);
}

.box[data-filled] ::selection {
	background: var(--colour-black);
	color: var(--colour-primary);
	text-shadow: var(--distortion);
}

.box[data-filled] a:not([class]):hover,
.box[data-filled] a:not([class]):focus-visible {
	color: var(--colour-primary);
	background: var(--colour-grey-700);
	text-shadow: var(--distortion);
}

.button {
	--button-background: var(--colour-primary);
	--button-color: var(--colour-black);
	--height: var(--space-xl);
	--text-shadow: var(--distortion-highlighted);

	display: flex;
	justify-content: stretch;
	align-items: center;
	border: 0;
	font-family: var(--font-display);
	font-size: var(--type-step-2);
	background: transparent;
	height: var(--height);
	line-height: var(--height);
	color: var(--button-color);
	text-decoration-thickness: 0.1ex;
	text-underline-offset: 0.2ex;

	transition: text-underline-offset 200ms ease-in-out, filter 200ms ease-in-out, transform 200ms ease-in-out, color var(--hue-change-animation);
}

.button:hover,
.button:focus-visible {
	background: transparent;
	color: var(--button-color);
	text-underline-offset: 0.1lh;
	filter: brightness(1.1);
	transform: scale(1.01);
}

.button span {
	background: var(--button-background);
	text-shadow: var(--text-shadow);
	flex-grow: 1;
	height: 100%;
	white-space: nowrap;
	text-align: center;
	margin: 0 -1px;
	transition: background var(--hue-change-animation);
}

.button svg {
	width: auto;
	flex-shrink: 0;
	aspect-ratio: 17/70;
}

.button[data-inverted] {
	--button-background: var(--colour-grey-700);
	--button-color: var(--colour-primary);
	--text-shadow: var(--distortion);
}

.button[data-large] {
	--height: var(--space-2xl);
}
.game-cta h2 {
	font-size: var(--type-step-1);
}

.game-cta__grid {
	display: grid;
	grid-template-rows: repeat(auto-fill, 1fr);
	grid-template-columns: repeat(auto-fill, 20%);
}

.game-cta__heading {
	z-index: 1;
}

.game-cta__heading:first-of-type {
	grid-row: 1;
	grid-column: 1/3;
}

.game-cta__img {
	grid-row: 1/3;
	grid-column: 3/5;
	transform: translateX(-20%);
}

.game-cta__heading:last-of-type {
	grid-row: 2/4;
	grid-column: 4/6;
}

.game-cta__links {
	grid-row: 4;
	grid-column: 1/6;
	text-align: center;
}

.game-cta__links a:not([class]) {
	display: inline-block;
	font-size: var(--type-step-00);
}

@media screen and (min-width: 60rem) {
	.game-cta__links {
		grid-row: 3;
		grid-column: 1/3;
	}
}
.header__logo {
	display: flex;
	align-items: center;
	gap: var(--gutter);
	text-decoration: none;
	color: var(--colour-primary);
	transition: color var(--hue-change-animation);
}

.header__logo svg {
	width: var(--space-xl-2xl);
}

.header__logo-text {
	display: flex;
	flex-direction: column;
}

.header__logo-text span:first-child {
	font-size: var(--type-step-5);
	line-height: var(--leading-flat);
	font-family: var(--font-display);
}

.header__logo-text span:last-child {
	font-size: var(--type-step-00);
	display: none;
}

.icon-text {
	display: flex;
}

.icon-text:not(:has(h1, h2, h3)) {
	--icon-size: calc(var(--type-step-0) * var(--leading-standard));
	--icon-gutter: 1ch;
}

.icon-text:has(h1) {
	--icon-size: calc(var(--type-step-3) * var(--leading-fine));
}

.icon-text:has(h2) {
	--icon-size: calc(var(--type-step-2) * var(--leading-fine));
}

.icon-text:has(h3) {
	--icon-size: calc(var(--type-step-1) * var(--leading-fine));
}

.icon-text__icon {
	margin-inline-end: var(--icon-gutter, var(--gutter));
	height: var(--icon-size);
	width: var(--icon-size);
	display: flex;
	align-items: center;
}
.list-article {
	--flow-space: var(--space-2xs);
	margin-block-start: var(--space-2xl);
}

.list-article ul {
	--flow-space: var(--space-xs);
}

.nav {
	text-transform: uppercase;
	padding-right: var(--space-m);
}

.nav a {
	text-decoration: none;
	padding: var(--space-3xs);
}
.pagination {
	margin-block-start: var(--space-2xl);
	--cluster-horizontal-alignment: center;
}

.pagination [aria-disabled] {
	pointer-events: none;
	opacity: 0.5;
}
.profile {
	--sidebar-target-width: clamp(6.75rem, 4.3977rem + 10.4545vw, 12.5rem);
}
.tag {
	background: var(--colour-primary);
	border: 3px solid var(--colour-primary);
	color: var(--colour-black);
	text-shadow: var(--distortion-highlighted);
	text-decoration: none;
	transition: background var(--hue-change-animation);
	padding: var(--space-3xs);
}

.tag:hover,
.tag:focus-visible {
	color: var(--colour-primary);
	background: var(--colour-grey-800);
}
.theme {
    --summary-marker-fill: var(--colour-grey-800);
    --flow-space: var(--space-xs);
}

.theme summary {
    --svg-distortion: var(--svg-distortion-highlighted);

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

.theme .icon-text__icon {
    --icon-gutter: var(--space-3xs);
    padding: 3px;
}

.theme[open] summary svg {
    transform: rotateZ(90deg);
}

.theme__toggle {
    background: var(--colour-primary);
    color: var(--colour-black);
    text-shadow: var(--distortion-highlighted);
    padding-inline-end: var(--space-2xs);
}

.theme[open] + * {
    margin-block-start: var(--gutter);
}
.thing-box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.thing-box .button {
	margin-block-start: var(--gutter);
	justify-self: flex-end;
}

.thing-box__icon {
	display: inline-block;
	position: relative;
	top: 6px;
	height: 32px;
	width: 32px;
	background: var(--colour-primary);
	border-radius: 50%;
	margin-inline-end: 10px;
}

/* Background */ .bg { color: #ebdbb2; background-color: #282828; }
/* PreWrapper */ .chroma { color: #ebdbb2; background-color: #282828; }
/* Other */ .chroma .x {  }
/* Error */ .chroma .err {  }
/* CodeLine */ .chroma .cl {  }
/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
/* LineHighlight */ .chroma .hl { background-color: #3d3d3d }
/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; -moz-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #756d59 }
/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; -moz-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #756d59 }
/* Line */ .chroma .line { display: flex; }
/* Keyword */ .chroma .k { color: #fe8019 }
/* KeywordConstant */ .chroma .kc { color: #fe8019 }
/* KeywordDeclaration */ .chroma .kd { color: #fe8019 }
/* KeywordNamespace */ .chroma .kn { color: #fe8019 }
/* KeywordPseudo */ .chroma .kp { color: #fe8019 }
/* KeywordReserved */ .chroma .kr { color: #fe8019 }
/* KeywordType */ .chroma .kt { color: #fabd2f }
/* Name */ .chroma .n {  }
/* NameAttribute */ .chroma .na { color: #b8bb26; font-weight: bold }
/* NameBuiltin */ .chroma .nb { color: #fabd2f }
/* NameBuiltinPseudo */ .chroma .bp {  }
/* NameClass */ .chroma .nc {  }
/* NameConstant */ .chroma .no { color: #d3869b }
/* NameDecorator */ .chroma .nd {  }
/* NameEntity */ .chroma .ni { color: #fabd2f }
/* NameException */ .chroma .ne { color: #fb4934 }
/* NameFunction */ .chroma .nf { color: #fabd2f }
/* NameFunctionMagic */ .chroma .fm {  }
/* NameLabel */ .chroma .nl { color: #fb4934 }
/* NameNamespace */ .chroma .nn {  }
/* NameOther */ .chroma .nx {  }
/* NameProperty */ .chroma .py {  }
/* NameTag */ .chroma .nt { color: #fb4934 }
/* NameVariable */ .chroma .nv {  }
/* NameVariableClass */ .chroma .vc {  }
/* NameVariableGlobal */ .chroma .vg {  }
/* NameVariableInstance */ .chroma .vi {  }
/* NameVariableMagic */ .chroma .vm {  }
/* Literal */ .chroma .l {  }
/* LiteralDate */ .chroma .ld {  }
/* LiteralString */ .chroma .s { color: #b8bb26 }
/* LiteralStringAffix */ .chroma .sa { color: #b8bb26 }
/* LiteralStringBacktick */ .chroma .sb { color: #b8bb26 }
/* LiteralStringChar */ .chroma .sc { color: #b8bb26 }
/* LiteralStringDelimiter */ .chroma .dl { color: #b8bb26 }
/* LiteralStringDoc */ .chroma .sd { color: #b8bb26 }
/* LiteralStringDouble */ .chroma .s2 { color: #b8bb26 }
/* LiteralStringEscape */ .chroma .se { color: #b8bb26 }
/* LiteralStringHeredoc */ .chroma .sh { color: #b8bb26 }
/* LiteralStringInterpol */ .chroma .si { color: #b8bb26 }
/* LiteralStringOther */ .chroma .sx { color: #b8bb26 }
/* LiteralStringRegex */ .chroma .sr { color: #b8bb26 }
/* LiteralStringSingle */ .chroma .s1 { color: #b8bb26 }
/* LiteralStringSymbol */ .chroma .ss { color: #83a598 }
/* LiteralNumber */ .chroma .m { color: #d3869b }
/* LiteralNumberBin */ .chroma .mb { color: #d3869b }
/* LiteralNumberFloat */ .chroma .mf { color: #d3869b }
/* LiteralNumberHex */ .chroma .mh { color: #d3869b }
/* LiteralNumberInteger */ .chroma .mi { color: #d3869b }
/* LiteralNumberIntegerLong */ .chroma .il { color: #d3869b }
/* LiteralNumberOct */ .chroma .mo { color: #d3869b }
/* Operator */ .chroma .o { color: #fe8019 }
/* OperatorWord */ .chroma .ow { color: #fe8019 }
/* Punctuation */ .chroma .p {  }
/* Comment */ .chroma .c { color: #928374; font-style: italic }
/* CommentHashbang */ .chroma .ch { color: #928374; font-style: italic }
/* CommentMultiline */ .chroma .cm { color: #928374; font-style: italic }
/* CommentSingle */ .chroma .c1 { color: #928374; font-style: italic }
/* CommentSpecial */ .chroma .cs { color: #928374; font-style: italic }
/* CommentPreproc */ .chroma .cp { color: #8ec07c }
/* CommentPreprocFile */ .chroma .cpf { color: #8ec07c; font-style: italic }
/* Generic */ .chroma .g {  }
/* GenericDeleted */ .chroma .gd { color: #282828; background-color: #fb4934 }
/* GenericEmph */ .chroma .ge { color: #83a598; text-decoration: underline }
/* GenericError */ .chroma .gr { background-color: #fb4934; font-weight: bold }
/* GenericHeading */ .chroma .gh { color: #b8bb26; font-weight: bold }
/* GenericInserted */ .chroma .gi { color: #282828; background-color: #b8bb26 }
/* GenericOutput */ .chroma .go { color: #504945 }
/* GenericPrompt */ .chroma .gp {  }
/* GenericStrong */ .chroma .gs {  }
/* GenericSubheading */ .chroma .gu { color: #b8bb26; font-weight: bold }
/* GenericTraceback */ .chroma .gt { background-color: #fb4934; font-weight: bold }
/* GenericUnderline */ .chroma .gl {  }
/* TextWhitespace */ .chroma .w {  }