@layer base {
	:root {
		color-scheme: light dark;
		--color-white: #ffffff;
		--color-black: #1a1a1a;
		--color-bg-light: #fbfbfa;
		--color-bg-dark: #121212;
		
		--color-sepia-border: #e3dec3;
		--color-sepia-border-dark: #333333;

		--color-red-dark: #a3333d;
		--color-red-light: #d9534f;

		--color-text: light-dark(var(--color-black), #e0e0e0);
		--color-sheet: light-dark(var(--color-bg-light), var(--color-bg-dark));
		--color-muted: light-dark(#666666, #999999);
		--color-accent: light-dark(var(--color-red-dark), var(--color-red-light));

		--font-serif: "Iowan Old Style", "Apple Garamond", "Baskerville", "Times New Roman", "Droid Serif", serif;
		--font-sans: system-ui, -apple-system, sans-serif;
		--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	}

	html {
		background: var(--color-sheet);
		color: var(--color-text);
		font-family: var(--font-serif);
		line-height: 1.7;
		font-size: 18px;
		transition: background 0.2s ease, color 0.2s ease;
	}

	body {
		max-width: 680px;
		margin: 0 auto;
		padding: 2.5rem 1.5rem;
	}

	header {
		margin-bottom: 2rem;
	}

	nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1.5px solid light-dark(var(--color-sepia-border), var(--color-sepia-border-dark));
		padding-bottom: 0.75rem;
		margin-bottom: 2.5rem;
		font-family: var(--font-sans);
		font-size: 0.95rem;

		ul {
			display: flex;
			gap: 1.5rem;
			margin: 0;
			padding: 0;
			list-style: none;
		}

		a {
			text-decoration: none;
			font-weight: 500;
			color: var(--color-text);
			transition: color 0.15s ease;

			&:hover {
				color: var(--color-accent);
				text-decoration: underline;
				text-underline-offset: 4px;
			}
		}
		#theme-toggle {
			background: transparent;
			border: none;
			cursor: pointer;
			padding: 0.25rem 0.5rem;
			font-size: 1rem;
			color: var(--color-text);
			border-radius: 4px;
			transition: color 0.15s ease, background 0.15s ease;

			&:hover {
				color: var(--color-accent);
				background: light-dark(#f0ede6, #222222);
			}

			&::after {
				content: "◐";
				font-size: 1.1rem;
				line-height: 1;
			}
		}
	}

	main {
		article {
			width: 100%;
			margin: 0 auto;

			img {
				display: block;
				margin: auto;
				max-width: 80%;
			}
		}

		#search {
			width: 100%;
			font-family: var(--font-sans);
			font-size: 0.95rem;
			padding: 0.75rem 1rem;
			margin-bottom: 2.5rem;
			background: light-dark(var(--color-white), #1a1a1a);
			color: var(--color-text);
			border: 1px solid light-dark(var(--color-sepia-border), var(--color-sepia-border-dark));
			border-radius: 6px;
			outline: none;
			transition: border-color 0.15s ease, box-shadow 0.15s ease;

			&::placeholder {
				color: var(--color-muted);
				opacity: 0.8;
			}

			&:focus {
				border-color: var(--color-accent);
				box-shadow: 0 0 0 3px light-dark(rgba(163, 51, 61, 0.12), rgba(217, 83, 79, 0.2));
			}
		}
		#listing {
			list-style: none;
			padding: 0;
			margin: 0;
			li {
				margin-bottom: 1rem;
				padding-bottom: 0;
				border-bottom: 1px solid light-dark(var(--color-sepia-border), var(--color-sepia-border-dark));

				&:last-child {
					border-bottom: none;
					margin-bottom: 0;
				}

				article {
					width: 100%;
					margin: 0 auto;

					transition: opacity 0.2s ease;

					header {
						margin-bottom: 0;
					}

					h1 {
						font-size: 1.4rem;
						margin-top: 0;
						margin-bottom: 0.5rem;
						font-weight: 600;

						a {
							color: var(--color-text);
							text-decoration: none;
							transition: color 0.15s ease;

							&:hover {
								color: var(--color-accent);
							}
						}
					}

					p {
						color: var(--color-muted);
						font-size: 1rem;
						margin-top: 0;
						margin-bottom: 0.5rem;
						line-height: 1.5;
					}

					time {
						margin-bottom: 0.5rem;
						font-size: 0.8rem;
					}
				}
			}
		}
	}

	h1, h2, h3, h4 {
		font-family: var(--font-sans);
		line-height: 1.25;
		margin-top: 2.25rem;
		margin-bottom: 1rem;
		font-weight: 700;
		letter-spacing: -0.01em;

		a {
			text-decoration: none;
		}
	}

	h1.title {
		font-size: 2.2rem;
		letter-spacing: -0.025em;
	}

	p {
		margin-bottom: 1.35rem;
	}

	time {
		display: block;
		color: var(--color-muted);
		font-size: 0.85rem;
		margin-bottom: 1.5rem;
		font-family: var(--font-mono);
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	a, a:visited {
		color: var(--color-text);
		text-decoration-color: var(--color-accent);
		text-underline-offset: 3px;
	}

	code {
		font-family: var(--font-mono);
		font-size: 0.85em;
		background: light-dark(#f0ede6, #222222);
		padding: 0.2em 0.4em;
		border-radius: 3px;
	}

	pre code {
		background: transparent;
		padding: 0;
	}

    pre {
        background: light-dark(#f4f1ea, #1a1a1a);
        padding: 1rem;
        border-radius: 4px;
        overflow-x: auto;
        border: 1px solid light-dark(#e6e2d6, #333333);
    }

	ol, ul {
		padding-left: 1.5rem;
		margin-bottom: 1.25rem;

		li {
			margin-bottom: 0.5rem;
		}
	}
}