@font-face {
	font-family: eb-garamond;
	font-style: italic;
	src: local("EB Garamond Italic"), url(/assets/fonts/ebgaramond_italic.ttf);
}

@font-face {
	font-family: playfair-display;
	src: local("Playfair Display"), url(/assets/fonts/playfair_display.ttf);
}

@font-face {
	font-family: coral-pixels;
	src: local("Coral Pixels"), url(/assets/fonts/coral_pixels.ttf);
}

:root {
	--white: #e2d8ca;
	--black: #201c10;
	--accent: #f69cac;
	--paper: #e6dede;
	--text-color: color-mix(in srgb, var(--black), var(--accent) 25%);
	--text-accent: color-mix(in srgb, var(--text-color), var(--accent) 25%);
	--gradient-color: rgb(from var(--accent) r g b / 10%);
	--border-color: rgb(from color-mix(in srgb, var(--black), var(--accent) 75%) r g b / 75%);
	--border: 1px dashed var(--border-color);
	--page-width: 464px;
	--page-height: calc(var(--page-width) * 1.456);
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--text-color);
	font-family: mspgothic;
	min-height: 100vh;
	background:
		url(assets/bg_maps.png) no-repeat calc(50% + var(--page-width) - 50px) center,
		url(assets/bg_rosebed.png) no-repeat center calc(50% + 35px) / calc(var(--page-width) * 2.55),
		url(assets/bg_daisy.png) no-repeat calc(50% - var(--page-width) + 10px) calc(50% + 185px),
		url(assets/bg_daisy.png) no-repeat calc(50% + var(--page-width) - 32px) calc(50% - 195px) / 192px,
		radial-gradient(at center, var(--black), transparent 75%),
		linear-gradient(to top, var(--black), transparent 50%) fixed,
		linear-gradient(to right, #ffffff10 1px, transparent 1px) center / 64px 64px,
		linear-gradient(to top, #ffffff10 1px, transparent 1px) center / 64px 64px,
		url(assets/bg.jpg) center / cover fixed var(--paper);
	image-rendering: pixelated;
	overflow: hidden;

	&::before {
		--green: #a7cd64;
		content: "";
		background:
			radial-gradient(circle at calc(50% + var(--page-width) / 2 + 50px) calc(50% - var(--page-height) / 2), var(--paper) 200px, transparent 400px),
			radial-gradient(circle at calc(50% - var(--page-width) / 2 + 50px) calc(50% + var(--page-height) / 2 - 200px), var(--paper) 100px, transparent 200px),
			radial-gradient(400px 200px at calc(50% + 100px) calc(50% - 300px), rgb(from var(--green) r g b / 0.25), transparent),
			radial-gradient(300px 200px at calc(50% - 250px) calc(50% - 150px), rgb(from var(--green) r g b / 0.125), transparent),
			radial-gradient(200px 400px at calc(50% + var(--page-width)) center, rgb(from var(--green) r g b / 0.25), transparent),
			radial-gradient(200px 400px at calc(50% - var(--page-width)) center, rgb(from var(--green) r g b / 0.125), transparent),
			radial-gradient(500px 200px at calc(50% + 100px) calc(50% + 300px), rgba(205, 181, 100, 0.33), transparent),
			radial-gradient(at center, transparent 75%, var(--black));
		position: fixed;
		inset: 0;
		z-index: 2;
		pointer-events: none;
	}
}

#index, #content {
	width: var(--page-width);
	height: var(--page-height);
	box-sizing: border-box;
	padding-block: 64px;
	rotate: -1deg;
}

#bg-credit {
	color: rgb(from var(--white) r g b / 0.5);
	font-size: 0.75em;
	text-align: right;
	width: 7em;
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 2;

	&:hover {text-decoration: underline}
}

#post-nav ul ul a, .page-nav a {
	display: block;
	font-family: "Coral Pixels";
	font-size: 0.75em;
	text-decoration: none;
	padding: 0.5em 0.67em;
	background-color: rgb(from var(--accent) r g b / 25%);
	border: 1px solid rgb(from var(--accent) r g b / 50%);
	border-radius: 6px;
	transition: background-color 0.1s, border-color 0.1s;

	&:hover {
		background-color: rgb(from var(--accent) r g b / 33%);
		border-color: color-mix(in srgb, var(--accent), var(--white) 75%);
	}

	&:active {
		background-color: color-mix(in srgb, var(--accent), var(--white) 75%);
		transition: none;
	}

	&[rel="prev"]::before {content: "← "}
	&[rel="next"]::after {content: " →"}
}

/* index */

#index {
	background:
		radial-gradient(closest-side at center, var(--paper) 50%, transparent),
		url(assets/notebook.png) left / auto 100%;
	padding-inline: 56px 48px;
	transform-origin: right;
	z-index: 1;

	&::after {
		content: "";
		background: url(assets/pen.png) left / auto 100%;
		aspect-ratio: 166 / 364;
		position: absolute;
		left: -72px;
		top: 0;
		bottom: 0;
		pointer-events: none;
	}
}

h1 {
	font: 5em / 1 playfair-display, eb-garamond, serif;
	text-transform: uppercase;
	text-shadow:
		0.025em 0.025em var(--paper),
		0.5em 0.25em 8px rgb(from var(--accent) r g b / 0.5);
	white-space: nowrap;
	margin-top: -1em;

	span {display: block}
}

#post-nav {
	text-shadow: 0 0 8px var(--paper);
	max-height: 400px;
	height: 100%;
	box-sizing: border-box;
	padding-inline: 1em;
	padding-bottom: 75%;
	border-radius: 6px;
	margin: 1em;
	overflow: hidden auto;

	ul {
		list-style-type: none;
		padding-left: unset;
		margin-block: unset;
	}

	li {
		padding-left: unset;
	}

	> ul > li {
		background-image: radial-gradient(farthest-side at top left, var(--gradient-color) 50%, transparent);
		padding: 1em;
		border: var(--border);
		border-right: none;
		border-radius: 4px;
		border-top-left-radius: 16px;
		border-bottom-left-radius: 8px;
		margin-block: 0.5em;
		position: relative;

		> a {
			color: var(--text-accent);
			font: italic 2em eb-garamond, serif;
			letter-spacing: 0.125em;
			text-decoration: underline dotted rgb(from currentcolor r g b / 0.5);
			scale: 1 0.75;
			position: absolute;
			top: -0.625em;
			left: -0.25em;
			z-index: 1;
		}

		> ul {
			display: inline;

			> li {
				display: inline;

				> a {
					display: inline-block;
					font-size: 0.875em;
					margin-block: 0.25em;
				}
			}
		}
	}

	/* > ul {
		> li {
			> a {

			}
			> ul {
				> li {
					> a {
						display: block;
						color: var(--white);
						background-color: var(--text-color);
						padding: 1em;
						border-radius: 8px;
						margin-block: 2px;
					}
				}
			}
		}
	} */
}

#now {
	dt {
		font-family: wildpines;
	}

	dd::after {
		content: "";
		display: block;
	}
	
	dt, dd {
		display: inline;
	}
}

#hammer {
	filter: drop-shadow(2px 3px 4px rgb(from var(--black) r g b / 0.5));
	position: absolute;
	right: -40px;
	bottom: 0;
}

#back {
	font: italic 4em / 0.75 eb-garamond, serif;
	letter-spacing: 0.25em;
	background-image: radial-gradient(at bottom right, var(--gradient-color) 50%, transparent);
	width: min-content;
	border-block: var(--border);
	position: absolute;
	bottom: 64px;
	transition: text-shadow 0.1s, translate 0.1s;

	&::first-line {
		font-size: 0.875em;
	}

	&:hover {
		color: var(--accent);
		text-shadow: 4px 4px var(--text-color);
		translate: -4px -4px;
	}
}

/* content */

#content {
	background:
		radial-gradient(closest-side at center, var(--paper) 50%, transparent),
		url(assets/notebook.png) right / auto 100%;
	padding-inline: 24px 40px;
	transform-origin: left;
	overflow: hidden auto;
}

main {
	line-height: 1.2;
	text-align: justify;
	text-shadow: 0 0 8px var(--paper);
	hyphens: auto;
	height: 100%;
	box-sizing: border-box;
	padding-inline: 40px;
	padding-top: 160px;
	border-radius: 64px;
	overflow: hidden auto;
	scroll-padding-top: 200px;
	rotate: 1deg;
}

.page-nav {
	padding-block: 2em;

	ul {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 2em;
		color: color-mix(in srgb, var(--black), var(--accent));
		list-style-type: none;
		padding-left: unset;
		margin-block: unset;
	}

	&:has(+ article) {
		background-image: radial-gradient(closest-side at center, var(--gradient-color) 50%, transparent);
		margin-bottom: -2em;
	}

	article + & {
		background-image: radial-gradient(farthest-side at top, var(--gradient-color) 50%, transparent);
		margin-top: -2em;
	}
}

/* posts */

article {
	padding-bottom: 0.5em;
	border-bottom: var(--border);
	margin-block: 2em;
	position: relative;

	a {
		color: var(--text-accent);
		text-decoration: underline;
	}

	&::after {
		content: "✄";
		color: var(--border-color);
		font-size: 0.75em;
		background-image: radial-gradient(closest-side at center, var(--paper) 50%, transparent);
		padding-inline: 0.25em;
		position: absolute;
		bottom: -0.625em;
		right: 2em;
	}
}

h2, p, ul, ol, figcaption {
	margin-block: 0.5rem;
}

figure, blockquote, aside, details, pre, hr {
	margin-block: 1rem;
}

h2 {
	color: var(--text-accent);
	font-family: eb-garamond, serif;
	font-size: 0.875em;
	font-style: italic;
	font-weight: normal;
	letter-spacing: 0.1em;
	background-image: radial-gradient(farthest-side at bottom left, var(--gradient-color), transparent);
	padding-block: 0.25em;
	border-bottom: var(--border);

	a {
		color: color-mix(in srgb, var(--black), var(--accent));
		font-family: mspgothic;
	}

	&:not(:hover) a {
		display: none;
	}
}

p {
	text-indent: 1em;
}

ul, ol {
	padding-left: 1.25em;
}

ul {
	list-style-type: circle;
}

li {
	padding-left: 0.25em;

	&::marker {
		color: var(--text-accent);
	}
}

figure {
	margin-inline: 2em;
	position: relative;

	&::before {
		content: url(assets/tape.png);
		display: block;
		text-align: center;
		margin-bottom: -20px;
		opacity: 0.9;
		pointer-events: none;
	}

	&:nth-of-type(even)::before {
		transform: scaleX(-1);
	}

	&:is(.float-left, .float-right, .flex &)::before {
		scale: 0.75;
	}

	img, video, iframe {
		background-color: #f6f1e7;
		box-sizing: border-box;
		padding: 0.5em;
		padding-bottom: 1em;
		border-radius: 2px;
		box-shadow: 1px 2px 8px -4px rgb(from var(--black) r g b / 50%), 0 8px 16px var(--gradient-color);
		width: 100%;
		image-rendering: auto;
	}

	&.youtube iframe {
		aspect-ratio: 1.5;
	}
}

figcaption {
	color: var(--text-accent);
	font-size: 0.875em;
	text-align: center;
}

blockquote {
	color: var(--text-accent);
	font-family: eb-garamond, serif;
	font-style: italic;
	background-image:
		radial-gradient(50% 100% at top, rgb(from var(--gradient-color) r g b / 8%), transparent),
		radial-gradient(50% 100% at bottom, rgb(from var(--gradient-color) r g b / 8%), transparent);
	padding-block: 0.5em;
	border-block: var(--border);
}

aside {
	font-size: 0.75em;
	background-color: #c4452620;
	border: 1px solid #c4452620;
	border-radius: 4px;
}

details[open] {
	padding-inline: 1em;
	border-bottom: 1px dotted var(--border-color);

	summary {
		padding-bottom: 0.5em;
		margin-inline: -1em;
		border-bottom: 1px dotted var(--border-color);

		&::before {content: url(assets/details_open.png)}
		&:active::before {content: url(assets/details_open_active.png)}
	}
}

summary {
	display: flex;
	align-items: center;
	gap: 0.4em;

	&::before {
		content: url(assets/details_closed.png);
		margin-bottom: -0.25em;
	}

	&:active::before {content: url(assets/details_closed_active.png)}
}

pre {
	color: var(--white);
	tab-size: 4;
	background-color: var(--black);
	border: 1em solid var(--black);
	border-radius: 4px;
	overflow: auto hidden;
}

hr {
	background-image: radial-gradient(farthest-side at top, var(--gradient-color), transparent);
	height: 1em;
	border-top: 1px dotted var(--border-color);
}

/* embeds */

img, audio, video {
	max-width: 100%;
}

audio {
	width: 100%;
	border-radius: 8px;
}

.emote {
	display: inline;
	vertical-align: 40%;
	margin-block: -10px;
	image-rendering: pixelated;
}

/* layout */

.float-left, .float-right {
	max-width: calc(50% - 1em);
	margin: 0.5em 1.5em;
}

.float-left {
	float: left;
	clear: left;
	margin-left: 0;
}

.float-right {
	float: right;
	clear: right;
	margin-right: 0;
}

.grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.flex {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-block: 1em;

	figure {
		min-width: 40%;
		margin: unset;
	}
}

.scroll-x {
	padding-inline: 2em;
	margin-inline: -2em;
	overflow: auto hidden;
}

.columned {
	columns: 2;
	column-gap: 1em;
}

/* queries */

@media (max-width: 1000px) {
	body {
		flex-direction: column;
		overflow-y: auto;
		contain: inline-size;
	}

	#hammer {
		display: none;
	}

	#bg-credit {
		text-align: center;
		margin-bottom: 1em;
		position: static;
	}
}

@media (max-height: 700px) {
	body {
		overflow-y: auto;
	}
}