/* ===========
	THEMES
=========== */

:root {
	--fore-colour: #d5f2f3;
	--back-colour: #0b3739;
	--hot-colour: #8affa9;
	--cold-colour: #98cbbe;
}
@media (prefers-color-scheme: light) {
	:root {
		--fore-colour: #010;
		--back-colour: #ffe;
		--hot-colour: #306335;
		--cold-colour: #5a4526;
	}
}

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

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

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

:root {
	--line: 1px dotted var(--fore-colour);
	--line-margin: 48px;
	--line-padding: 8px;
	--indent: 1lh;
	--decorative-break-font-size: 1.5rem;
	--font-stack-serif: Georgia, serif;
	font-size: 100%;
	overflow: auto;
	scroll-padding: 16px;
}
body {
	margin: 0;
	font-size: clamp(1rem, calc(0.8rem + 1vi), 1.2rem);
	font-family: var(--font-stack-serif);
	color: var(--fore-colour);
	background-color: var(--back-colour);
}
main {
	max-inline-size: 70ch;
	margin-block: 5rem;
	margin-inline: auto;
	padding-inline: 1rem;
	line-height: 1.5;
}
#group-index {
	list-style-type: "";
	column-count: auto;
	column-width: 13rem;
	gap: 1rem;
	padding-inline-start: 0;
}
#poem-index {
	list-style-type: "";
	display: grid;
	gap: 1rem;
	padding-inline-start: 0;
}

/* ===========
	BANNER
=========== */

#banner {
	color: var(--back-colour);
	background-color: var(--hot-colour);
	& > nav {
		padding: 1rem;
	}
	& a {
		color: inherit;
		&[rel="index"] {
			font-weight: bold;
		}
	}
}

/* ============
	CONTENT
============ */

h1 {
	margin-block: 0;
	line-height: 1.2;
	text-align: center;
	font-size: 1.7em;
	& + * {
		margin-block-start: 1rem;
		padding-block-start: var(--line-padding);
	}
	&::after {
		content: "⟡ ⟡ ⟡ ⟡ ⟡";
		display: block;
		margin-block: 48px;
		text-align: center;
		font-size: var(--decorative-break-font-size);
		font-weight: normal;
		color: var(--hot-colour);
	}
}
h2 {
	font-size: 1.5em;
}
h3 {
	font-size: 1em;
}
:is(h2, footer)::before {
	content: "⟡ ⟡ ⟡";
	display: block;
	margin-block: 48px;
	text-align: center;
	font-size: var(--decorative-break-font-size);
	font-weight: normal;
	color: var(--hot-colour);
}
dl, dd {
	margin-inline-start: var(--text-indent);
}
#poem-index > li,
#poem-list h3 {
	font-family: monospace, monospace;
	& cite {
		font-family: var(--font-stack-serif);
	}
}
#poem-list {
	& pre {
		font-family: unset;
		white-space: pre-wrap;
		tab-size: 4ch;
	}
}
.pattern {
	font-family: monospace;
}
pre.pattern {
	margin-inline-start: var(--indent);
}
hr {
	margin-block: 32px;
	border: unset;
	&::before {
		content: "⟡";
		display: block;
		text-align: center;
		font-size: var(--decorative-break-font-size);
		color: var(--hot-colour);
	}
}
main a {
	color: var(--hot-colour);
	text-underline-offset: 0.15em;
	&:visited {
		color: var(--cold-colour);
	}
	&:active {
		color: var(--back-colour);
		background-color: var(--cold-colour);
		border-radius: 0.15rem;
	}
}
#poem-list {
	list-style-type: "";
	padding-inline-start: 0;
}
#poem-list > li {
	--decoration-block-margin: 24px;
	--decoration-block-size: 20px;
	--border-width: 2px;
	& > * {
		padding-inline: 20px;
	}
	/* create the same border arrangement in ::before and ::after, then rotate ::before 180 degrees */
	&:not(:first-child)::before,
	&:not(:last-child)::after {
		content: "";
		block-size: calc(var(--decoration-block-size) + var(--decoration-block-margin));
		display: block;
		border-width: 0;
		border-block-end-width: calc(var(--border-width) / 2);
		border-inline-end-width: var(--border-width);
		border-style: solid;
		border-image-source: linear-gradient(
			to top,
			var(--hot-colour) calc(var(--border-width) / 2),
			transparent var(--indent)
		);
		border-image-slice: 1;
	}
	&:not(:first-child)::before {
		transform-origin: center;
		transform: rotate(0.5turn);
	}
	& > :first-child {
		margin-block-start: 0;
	}
	& > :last-child {
		margin-block-end: 0;
	}
	&:target {
		border-inline-width: var(--border-width);
		border-inline-style: solid;
		border-inline-color: var(--hot-colour);
		&:first-child:not(:only-child) {
			border-inline-color: transparent;
			border-image-source: linear-gradient(
				to top,
				var(--hot-colour),
				transparent
			);
			border-image-slice: 1;
		}
		&:last-child:not(:only-child) {
			border-inline-color: transparent;
			border-image-source: linear-gradient(
				to bottom,
				var(--hot-colour),
				transparent
			);
			border-image-slice: 1;
		}
		&:only-child {
			border-inline-color: transparent;
			border-image-source: linear-gradient(
				to bottom,
				transparent,
				var(--hot-colour) var(--decoration-block-size) calc(100% - var(--decoration-block-size)),
				transparent
			);
			border-image-slice: 1;
		}
		&:not(:first-child):not(:only-child)::before,
		&:not(:last-child):not(:only-child)::after {
			border-inline-end-width: 0;
		}
	}
}