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

:root {
	--fore-colour: #f4ede4;
	--back-colour: #1d1d1d;
	--hot-colour: #f87;
	--cold-colour: #fba;
	--code-back-colour: #2f2f2f;
}
@media (prefers-color-scheme: light) {
	:root {
		--fore-colour: #000;
		--back-colour: #f4ede4;
		--hot-colour: #826;
		--cold-colour: #416;
		--code-back-colour: #d4cfc8;
	}
}

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

*,
::before,
::after {
	box-sizing: border-box;
}
::marker {
	font-family: inherit;
}
img, video, audio {
	max-inline-size: 100%;
	display: block;
}

/* ==========
	FONTS
========== */

@font-face {
	font-family: Dicier;
	src: url("./Dicier-General.Bookwove.2026-04-11.woff2") format("woff2");
}
@font-face {
	font-family: "Dicier polyhedrals";
	src: url("./Dicier-Polyhedrals.Bookwove.2026-04-11.woff2") format("woff2");
}
@font-feature-values "Dicier polyhedrals" {
	@styleset { d4: 4; }
	@styleset { d6: 6; }
	@styleset { d8: 8; }
	@styleset { d10: 10; }
	@styleset { d12: 12; }
	@styleset { d20: 20; }
}

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

:root {
	--line: 1px solid var(--fore-colour);
	--line-padding: 8px;
	--indent: 1lh;
	--font-stack-serif: Georgia, serif;
	font-size: 100%;
	overflow: auto;
	scroll-padding: 16px;
}
body {
	min-block-size: 100svh;
	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: 80px;
	margin-inline: auto;
	padding-inline: 16px;
	line-height: 1.5;
}
.post-list {
	list-style-type: "";
	display: grid;
	gap: 1lh;
	margin-inline-start: 1lh;
}

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

header {
	color: var(--back-colour);
	background-color: var(--hot-colour);
	& > nav {
		padding: 16px;
	}
	& a {
		color: inherit;
		&[rel="index"] {
			font-weight: bold;
		}
	}
}
footer {
	text-align: end;
}

/* ==============
	POST-META
============== */

#post-meta > dl {
	margin-block-start: 0;
}
#post-meta::before {
	content: "";
	inline-size: 50%;
	margin-block-start: 2lh;
	padding-block-start: 2lh;
	display: block;
	margin-inline: auto;
	border-block-start: 1px solid var(--hot-colour);
}

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

.post-date {
	font-size: 0.8em;
	font-weight: normal;
}
h1, h2, h3 {
	text-wrap: balance;
	& + * { /* enforced by using :where() on various baseline tag selectors*/
		margin-block-start: 0;
	}
}
h1 {
	margin-block-start: 0;
	margin-block-end: 1em;
}
:where(h2, h3) {
	margin-block-start: 3em;
	margin-block-end: 0.5em;
}
:where(p) {
	margin-block: 0;
	text-align: justify;
	text-indent: 1lh;
	hyphens: auto;
	hyphenate-limit-chars: 7;
}
:is(h1, h2, h3, hr) + p, p:first-child {
	text-indent: 0;
}
:where(ul, ol) {
	margin-block: 1lh;
	margin-inline-start: 1lh;
	padding-inline-start: 0;
}
:where(dl) {
	margin-block: 1lh;
}
dt {
	font-weight: bold;
	&:not(:first-child) {
		margin-block-start: 0.5lh;
	}
}
dd {
	margin-inline-start: 1lh;
}
hr {
	margin-block-start: 1lh;
	margin-block-end: 0;
	border: unset;
	&.line {
		inline-size: 50%;
		margin-block: 2lh;
		margin-inline: auto;
		border-block-start: 1px solid var(--hot-colour);
	}
}
:where(blockquote) {
	margin-block: 1lh;
	margin-inline-start: 2lh;
	margin-inline-end: 0;
}
:where(img, video, audio) {
	margin-block: 1lh;
	margin-inline: auto;
	border: 1px solid var(--fore-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);
	}
}
code, kbd {
	padding-inline: 0.2em;
	hyphens: manual;
	font-family: monospace, monospace;
	background-color: var(--code-back-colour);
}
:where(pre) {
	max-inline-size: 100%;
	margin-block: 1lh;
	overflow-inline: auto;
}
pre.poem {
	font-family: inherit;
}
pre > code {
	display: block;
}

/* SCROLL SHADOW */

pre {
	--scroll-shadow-thickness: 20px;
	--scroll-shadow-colour: var(--fore-colour);
	background-image:
		linear-gradient(var(--back-colour)),
		linear-gradient(var(--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;
}

/* =================
	PLAY JOURNAL
================= */

.game-piece {
	font-family: Dicier;
}
.game-piece-poly {
	font-family: "Dicier polyhedrals";
}
.d4 {
	font-variant-alternates: styleset(d4);
}
.d6 {
	font-variant-alternates: styleset(d6);
}
.d8 {
	font-variant-alternates: styleset(d8);
}
.d10, .d12, .d20 {
	font-variant-ligatures: common-ligatures;
}
.d10 {
	font-variant-alternates: styleset(d10);
}
.d12 {
	font-variant-alternates: styleset(d12);
}
.d20 {
	font-variant-alternates: styleset(d20);
}
#post-play-journal-notes {
	margin-block-start: 90svh;
}