@layer reset, defaults, user, utilities, print;



/* ====================================
	USER
==================================== */

@layer user {

:root {
	--fore-colour: #222;
	--back-colour: #fff;
	--warning-colour: #a00;
	--link-colour: #3030ff;
	--visited-link-colour: #838;
	--code-back-colour: #ddd;

	--logo-main-colour: var(--fore-colour);
	--logo-shadow-colour: var(--fore-colour);
	--logo-arch-glow-colour: #310;
}
@media (prefers-color-scheme: light) and (prefers-contrast: more) {
	:root {
		--link-colour: #22a;
	}
}
@media (prefers-color-scheme: dark) {
	:root {
		--fore-colour: #fff;
		--back-colour: #282828;
		--warning-colour: #f8a;
		--link-colour: #8ff;
		--visited-link-colour: #dbf;
		--code-back-colour: #2f4f6f;

		--logo-main-colour: #000;
		--logo-shadow-colour: var(--back-colour);
		--logo-arch-glow-colour: var(--warning-colour);
	}
	#svg-logo-arch-background {
		opacity: 0.3;
	}
	#svg-logo-tower {
		filter: drop-shadow(0 0.05rem 0 var(--fore-colour));
	}
	mark {
		color: var(--back-colour);
	}
}

/* ================= END USER */ }



/* ====================================
	UTILITIES
==================================== */

@layer utilities {

.visually-hidden {
	block-size: 1px;
	inline-size: 1px;
	position: fixed;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

/* ================= END UTILITIES */ }



/* ====================================
	RESET
==================================== */

@layer reset {

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

/* ================== END RESET */ }



/* ====================================
	DEFAULTS
==================================== */

@layer defaults {

/* ==============
	VARIABLES
============== */

:root {
	--line-width: 2px;
	--line: var(--line-width) solid var(--fore-colour);
	--textbox-padding-block-start: 0.3rem;
	--textbox-padding-block-end: 0.2rem;
	--textbox-padding-inline: 0.5rem;
	--textbox-padding: var(--textbox-padding-block-start) var(--textbox-padding-inline) var(--textbox-padding-block-end);
	--monospaced-font-size: 0.9em;
	--monospaced-inline-padding-inline: 0.2em;
	--tab-size: 2ch;

	font-size: 100%;
	scroll-padding: 1rem;
}

/* ==============
	STRUCTURE
============== */

body {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.5;
	font-family: sans-serif;
	color: var(--fore-colour);
	background-color: var(--back-colour);
}
#skip-link {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	color: var(--back-colour);
	background-color: var(--fore-colour);
	clip-path: inset(50%);
	&:focus {
		clip-path: unset;
	}
}
#container {
	max-inline-size: 100%;
}
header {
	margin-block-end: 2rem;
	text-align: center;
}
#sidebar {
	margin-block-end: 2.5rem;
	padding-inline: 1rem;
}
#main-content {
	padding-inline: 1rem;
}
footer {
	margin-block-start: 3rem;
	margin-block-end: 1rem;
	padding-inline: 1rem;
	text-align: end;
	border-block-start: var(--line);
}

/* =========
	LOGO
========= */

#logo {
	max-inline-size: 20rem;
	display: block;
	margin-block: 1rem;
	margin-inline: auto;
	fill-rule: evenodd;
	fill: var(--fore-colour);
}
#svg-logo-shadow-strong-colour {
	stop-color: var(--logo-shadow-colour);
}
#svg-logo-shadow-fade-colour {
	stop-color: #0000;
}
#svg-logo-arch-background {
	fill: var(--logo-arch-glow-colour);
}
#svg-logo-flame {
	fill: #f60;
}
#svg-logo-arch-glow {
	fill: #a33;
}
#svg-logo-tower {
	fill: var(--logo-main-colour);
}

/* ============
	SIDEBAR
============ */

[rel="index"]::before {
	content: "\2190  " / ""; /* left arrow */
}
nav {
	& ol {
		list-style-type: "";
	}
	& li > ol {
		padding-inline-start: 1em;
		font-size: 0.9em;
	}
	& a:not(:hover) {
		text-decoration-line: none;
	}
}
#contents {
	display: grid;
	row-gap: 0.5rem;
	margin-block: 1rem;
	padding-inline-start: 0;
}

/* =============
	HEADINGS
============= */

h1 {
	margin-block-start: 1.5rem;
	padding-inline: 1.5rem;
	padding-block-end: 1.2rem;
	border-block-end: var(--line);
}
h2 {
	margin-block-start: 0;
	margin-block-end: 0.3rem;
	line-height: 1.25;
	&:not(:first-child)::before {
		content: "+" / "";
		display: block;
		margin-block: 6rem;
		text-align: center;
	}
}
#main-content > h2 {
	border-block-end: var(--line);
}
h3 {
	margin-block-start: 3rem;
	margin-block-end: 0.6rem;
	line-height: 1.15;
}
:is(h2, h3) + * {
	margin-block-start: 0.5rem;
}

/* ==============
	BODY TEXT
============== */

a {
	text-underline-offset: 0.15em;
	color: var(--link-colour);
}
a:visited {
	color: var(--visited-link-colour);
}
.uppercase {
	text-transform: uppercase;
}
cite cite {
	font-style: normal;
}
time {
	font-size: var(--monospaced-font-size);
	font-family: monospace;
}
details {
	padding: var(--textbox-padding);
	border: var(--line);
	& > summary + * {
		margin-block-start: 0;
	}
	& > :last-child {
		margin-block-end: 0;
	}
	& + details {
		border-block-start: unset;
	}
}

/* LISTS */

#changelog-list {
	list-style-type: "";
}
dt {
	font-weight: bold;
}
.figure-set {
	--figure-columns: 2;
	display: grid;
	grid-template-columns: repeat(var(--figure-columns), 1fr);
	padding-inline-start: 0;
	row-gap: 1.2rem;
	column-gap: 0.5rem;
	list-style-type: "";
	& > li {
		& > :first-child {
			margin-block-start: 0;
		}
		& > :last-child {
			margin-block-end: 0;
		}
	}
}

/* CODE */

code {
	padding-inline: var(--monospaced-inline-padding-inline);
	font-size: var(--monospaced-font-size);
	background-color: var(--code-back-colour);
}
.code-block {
	padding: var(--textbox-padding);
	overflow-x: auto;
	background-color: var(--code-back-colour);
}
samp {
	padding-inline: var(--monospaced-inline-padding-inline);
	font-size: var(--monospaced-font-size);
	color: var(--back-colour);
	background-color: var(--fore-colour);
}
samp mark {
	color: unset;
	background-color: unset;
	text-decoration-line: underline;
	text-decoration-style: wavy;
	text-decoration-color: var(--back-colour);
}
.samp-block {
	padding: var(--textbox-padding);
	overflow-x: auto;
	color: var(--back-colour);
	background-color: var(--fore-colour);
}
.code-block > code,
.samp-block > samp {
	padding-inline: 0;
	tab-size: var(--tab-size);
	background-color: unset;
}

/* CODE-BLOCK SCROLL SHADOW */

.code-block {
	--scroll-shadow-back-colour: var(--code-back-colour);
}
.samp-block {
	--scroll-shadow-back-colour: var(--fore-colour);
}
.code-block, .samp-block {
	--scroll-shadow-thickness: 20px;
	--scroll-shadow-colour: color(from var(--fore-colour) srgb r g b / 0.2);
	background-image:
		linear-gradient(var(--scroll-shadow-back-colour)),
		linear-gradient(var(--scroll-shadow-back-colour)),
		linear-gradient(to right, var(--scroll-shadow-colour), transparent),
		linear-gradient(to left, var(--scroll-shadow-colour), transparent);
	background-position:
		left center,
		right center,
		left center,
		right center;
	background-repeat: no-repeat;
	background-size:
		calc(2 * var(--scroll-shadow-thickness)) 100%,
		calc(2 * var(--scroll-shadow-thickness)) 100%,
		var(--scroll-shadow-thickness) 100%,
		var(--scroll-shadow-thickness) 100%;
	background-attachment:
		local,
		local,
		scroll,
		scroll;
}
:not(kbd) > kbd {
	margin-inline: calc(var(--line-width) * 2);
	white-space: nowrap;
	font-size: var(--monospaced-font-size);
	outline: var(--line);
	outline-width: calc(var(--line-width) / 2);
	outline-offset: var(--line-width);
}

/* CALL-OUTS */

.call-out {
	padding: var(--textbox-padding);
	border: var(--line);
	&::before {
		float: left;
		line-height: 0;
	}
}
.call-out.warning {
	border-color: var(--warning-colour);
	&::before {
		content: "\26a0" / "Warning: "; /* warning sign */
		margin-block-start: 1em;
		margin-inline-end: 0.3em;
		font-size: 1.6em;
		color: var(--warning-colour);
	}
}
.call-out.info {
	&::before {
		content: "\24d8" / "Info: "; /* circled-i info sign */
		margin-block-start: 0.55em;
		margin-inline-end: 0.15em;
		font-size: 3em;
	}
}

/* ==========
	MEDIA
========== */

img, video, svg {
	block-size: auto;
	inline-size: 100%;
	display: block;
}
audio {
	display: block;
}
:not(header) > img, video, audio {
	border: var(--line);
}
.sharp-image {
	image-rendering: pixelated;
}
figure {
	margin-inline: 2rem;
}
figcaption {
	margin-block-start: 0.5rem;
	text-align: center;
	font-size: 1rem;
}
iframe {
	max-inline-size: 100%;
}

/* =================
	RESPONSIVITY
================= */

/* FOR TABLET */

@media (min-width: 32rem) {
	:root {
		--tab-size: 3ch;
	}
	.three-columns, .four-columns {
		--figure-columns: 2;
	}
	figure {
		margin-inline: 0;
	}
}

/* FOR DESKTOP */

@media (min-width: 45rem) {
	:root {
		--tab-size: 4ch;
	}
	#container {
		max-inline-size: 56rem;
		margin-inline: auto;
		padding-inline: 1rem;
	}
	#content {
		max-inline-size: 56rem;
		display: flex;
		gap: 2rem;
		margin-block-start: 0;
		padding-inline: 0;
	}
	#sidebar {
		flex-basis: 12.5rem;
		flex-grow: 0;
		flex-shrink: 0;
		inset-block-start: 0;
		position: sticky;
		max-block-size: 100vb;
		overflow: auto;
		margin-block: 0;
		padding-inline: 0;
		font-size: 1rem;
	}
	#main-content {
		min-inline-size: 0; /* prevents overflow by inline children e.g. code-blocks */
		padding-inline: 0;
	}
	footer {
		padding-inline: 0;
	}
	.three-columns {
		--figure-columns: 3;
	}
	.four-columns {
		--figure-columns: 4;
	}
}

/* ================== END DEFAULTS */ }



/* ====================================
	PRINT
==================================== */

@layer print {

@media print {
	#container {
		display: block;
	}
	#content {
		padding-inline: 0;
	}
	nav, audio {
		display: none;
	}
	h2:not(:first-of-type) {
		break-before: page;
	}
	h2::before {
		content: unset;
	}
	.two-columns {
		--figure-columns: 2;
	}
	.three-columns {
		--figure-columns: 3;
	}
	.four-columns {
		--figure-columns: 4;
	}
}

/* ================== END PRINT */ }