/* ==========================================================================
               ╦ ╦╔╗╔╦╦  ╦╔═╗╦═╗╔═╗╔═╗╦    ╔═╗╔═╗╔═╗
               ║ ║║║║║╚╗╔╝║╣ ╠╦╝╚═╗╠═╣║    ║  ╚═╗╚═╗
               ╚═╝╝╚╝╩ ╚╝ ╚═╝╩╚═╚═╝╩ ╩╩═╝  ╚═╝╚═╝╚═╝
   ========================================================================== */

/* --- MASTER SYSTEM FONT CONTROL --- */
@font-face {
    font-family: 'LocalDisplay';
    src: url('bodonimoda_sc.woff2?v=b6169383') format('woff2');
    font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
    font-family: 'LocalNav';
    src: url('cinzel.woff2?v=99ad3b1d') format('woff2');
    font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
    font-family: 'LocalBody';
    src: url('oldstandard.woff2?v=a51e6a35') format('woff2');
    font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
    font-family: 'LocalBody';
    src: url('oldstandard_italic.woff2?v=09e59407') format('woff2');
    font-weight: 400; font-style: italic; font-display: block;
}
@font-face {
    font-family: 'LocalBody';
    src: url('oldstandard_bold.woff2?v=83961a4a') format('woff2');
    font-weight: 700; font-style: normal; font-display: block;
}
@font-face {
    font-family: 'LocalMono';
    src: url('basis33.woff2?v=a7f28d31') format('woff2');
    font-weight: normal; font-style: normal; font-display: block;
}
:root {
    --font-display: 'LocalDisplay', 'LocalBody', serif;
    --font-heading: 'LocalBody', serif;
    --font-nav: 'LocalNav', 'LocalBody', serif;
    --font-body: 'LocalBody', serif;
    --font-mono: 'LocalMono', monospace;
}
/* --- END MASTER SYSTEM FONT CONTROL --- */

:root {
	/* DARK MODE (DEF) */
	--bg-primary: #12181c;
	--bg-primary-rgb: 18, 24, 28;
	--bg-secondary: #0b0f12;
	--text-primary: #ddd6c8;
	--text-heading: #ece4d2;
	--text-accent: #c9c0b0;
	--accent: #c4a24d;
	--accent-rgb: 196, 162, 77;
	--border-color: rgba(221, 214, 200, 0.18);
	--surface-pop: #0f1418;
	--filter-img: sepia(20%) brightness(80%) contrast(120%);
	--vignette-opacity: 0;
	--nav-h: 2.75rem;
	--nav-icon: 1.1rem;
	--nav-bar-bg: rgba(11, 15, 18, 0.95);
	--nav-bar-line: rgba(var(--accent-rgb), 0.3);
	--nav-fg: rgba(221, 214, 200, 0.72);

	/* home console panel */
	--panel-bg: rgba(18, 24, 28, 0.38);

	/* CARD VARS - DARK */
	--card-bg-color: rgba(11, 15, 18, 0.85);
	--card-border-color: #c9b175;
	--card-border-rgb: 201, 177, 117;

	/* THEME COLOURS - DARK */
	--scrollbar-thumb: rgba(var(--accent-rgb), 0.6);
	--success-color: #4ade80;
	--text-muted: #a39a89;
}

[data-theme="light"] {
	/* LIGHT MODE */
	--bg-primary: #f9f5e6;
	--bg-primary-rgb: 249, 245, 230;
	--bg-secondary: #ebebd3;
	--text-primary: #26303a;
	--text-heading: #141c22;
	--text-accent: #3a454c;
	--accent: #6b5314;
	--accent-rgb: 107, 83, 20;
	--border-color: rgba(31, 42, 48, 0.18);
	--surface-pop: #fffdf4;
	--filter-img: sepia(40%) contrast(110%) brightness(90%);
	--vignette-opacity: 1;
	--nav-bar-bg: rgba(229, 222, 198, 0.96);
	--nav-fg: rgba(20, 28, 34, 0.86);

	--panel-bg: rgba(249, 245, 230, 0.42);

	/* CARD VARS - LIGHT */
	--card-bg-color: rgba(235, 235, 211, 0.85);
	--card-border-color: #5e4c24;
	--card-border-rgb: 94, 76, 36;
	--frame-scallop-opacity: 0.65;
	--frame-line-alpha: 0.45;

	/* THEME COLOURS - LIGHT */
	--success-color: #2e7d32;
	--text-muted: #5f6a70;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background-color: var(--bg-primary);
	color: var(--text-primary);
	font-family: var(--font-body), Georgia, "Times New Roman", serif;
	font-size: 1.0125rem;
	line-height: 1.7;
	font-variant-numeric: oldstyle-nums proportional-nums;
	font-variant-ligatures: common-ligatures;
	font-kerning: normal;
	/* never fake a BOLD */
	font-synthesis: none;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	transition:
		background-color 0.5s ease,
		color 0.5s ease;
	overflow-x: hidden;
	overflow-x: clip;
}

/* --- TOUCH SCREENS --- */
html {
	-webkit-tap-highlight-color: transparent;
}
a, button, summary, label, [role="button"] {
	touch-action: manipulation;
}
.proximity-button:active, .pagination-btn:active, .action-btn:active, .lb-btn:active,
.strip-back:active, .strip-support:active, .see-all-link:active, .nav-tool:active,
.console-btn:active, .lore-card:active, .news-card:active {
	opacity: 0.75;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* those little popup messages like "link copied" (like showToast in script.js) */
.site-toast {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	z-index: 3000;
	padding: 0.55rem 1.1rem;
	background: var(--bg-secondary);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	border-radius: 2px;
	font-family: var(--font-nav);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 0.75rem);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.site-toast.is-shown {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* --- TYPOGRAPHY --- */
h1,
h2,
h3 {
	font-family: var(--font-heading), "Times New Roman", serif;
	font-feature-settings: "cpsp" 1;
	color: var(--text-heading);
	font-weight: 400;
	margin: 0;
}

.essay-content h4 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.8em;
	margin: 1.8em 0 1.1em;
	font-family: var(--font-body);
	font-size: 1em;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--text-primary);
	text-align: center;
}
.essay-content h4::before,
.essay-content h4::after {
	content: "";
	flex: 0 0 2.2em;
	height: 3px;
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
}

table {
	font-variant-numeric: lining-nums tabular-nums;
}

.text-accent {
	color: var(--text-accent);
}

.align-center {
	text-align: center;
}
.align-justify {
	text-align: justify;
	text-justify: inter-word;
}
.style-italic {
	font-style: italic;
}
.fw-light {
	font-weight: 300;
}
.fs-hero {
	font-size: 2.25rem;
	line-height: 1.1;
}
.fs-heading-lg {
	font-size: 1.6875rem;
	line-height: 1.2;
}

.fs-body-lg {
	font-size: 1.0125rem;
	line-height: 1.5;
}
.fs-body-base {
	font-size: 0.8625rem;
}

/* --- CONTAINERS --- */
.container-7xl {
	max-width: 60rem;
	width: 100%;
	margin: 0 auto;
	padding: 0 1.875rem;
}
@media (max-width: 1024px) {
	.container-7xl {
		padding: 0 2.25rem;
	}
}
@media (max-width: 768px) {
	.container-7xl {
		padding: 0 0.75rem;
	}
}

/* --- NAVIGATION --- took forever to figure that out lol (╥﹏╥) */
nav {
	position: sticky;
	top: 0;
	z-index: 50;
	margin-bottom: 1.25rem;
	background-color: var(--nav-bar-bg);
	border-bottom: 1px solid var(--nav-bar-line);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition:
		background-color 0.5s ease,
		border-color 0.5s ease;
}
@media (hover: none) {
	nav {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.vignette {
		mix-blend-mode: normal;
	}
}

.nav-container {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	width: 98%;
	max-width: 1800px;
	min-height: var(--nav-h);
	margin: 0 auto;
}

.nav-brand {
	display: none;
	flex-shrink: 0;
	font-family: var(--font-heading);
	font-size: 0.95rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: none;
	color: var(--accent);
}
.nav-brand img {
	display: block;
	height: var(--nav-icon);
	width: auto;
	max-width: 11rem;
	object-fit: contain;
}
.nav-brand:focus-visible {
	color: var(--accent);
	text-shadow: none;
}
@media (hover: hover) {
	.nav-brand:hover {
		color: var(--accent);
		text-shadow: none;
	}
}
.nav-list {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0 auto 0 0;
	padding: 0;
}
.nav-list .menu-link {
	padding: 0.5rem 0.65rem;
	gap: 0.5rem;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	color: var(--nav-fg);
	text-shadow: none;
}
.nav-list .menu-link::before {
	width: 13px;
	height: 13px;
}
@media (hover: hover) {
	.nav-list .menu-link:hover {
		color: var(--text-heading);
		text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.55);
	}
}
.nav-list .menu-link.active {
	color: var(--accent);
	text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.55);
}
.nav-list .menu-link.active::before {
	transform: none;
	filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.9));
}
@media (hover: hover) {
	.nav-list .menu-link:hover::before {
		transform: none;
		filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.9));
	}
}
.nav-tools {
	display: flex;
	align-items: center;
	gap: 0;
	margin-left: auto;
}
.nav-tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: none;
	border-radius: 4px;
	background-color: transparent;
	color: var(--nav-fg);
	text-decoration: none;
	cursor: pointer;
	transition:
		color 0.3s ease,
		filter 0.3s ease;
}
.nav-tool svg {
	display: block;
	width: var(--nav-icon);
	height: var(--nav-icon);
	stroke-width: 1.5;
}
@media (hover: hover) {
	.nav-tool:hover {
		color: var(--text-heading);
		filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.6));
		outline: none;
	}
}
.nav-tool:focus-visible {
	color: var(--text-heading);
	filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.6));
	outline: none;
	box-shadow: 0 0 0 1px var(--nav-bar-line);
}

/* anchor links fix */
[id] {
	scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}

/* essay title in the menu bar, 2 lines max */
.nav-running-head {
	flex: 0 1 24rem;
	min-width: 0;
	margin-left: auto;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-family: var(--font-body);
	font-size: 0.48rem;
	font-style: italic;
	line-height: 1.25;
	letter-spacing: 0.02em;
	text-align: right;
	color: var(--nav-fg);
}
.nav-page-label {
	display: none;
}
@media (max-width: 1100px) {
	.nav-page-label {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-family: var(--font-nav);
		font-size: 0.6rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--nav-fg);
		opacity: 0.75;
	}
}
.nav-running-head ~ .nav-tools {
	margin-left: 0;
}
@media (max-width: 1100px) {
	.nav-running-head {
		flex: 1 1 auto;
		text-align: center;
	}
}
@media (max-width: 480px) {
	/* tiny screens */
	.nav-running-head {
		font-size: 0.48rem;
		text-align: left;
	}
}

.js-theme-toggle .icon-sun {
	display: none;
}
[data-theme="light"] .js-theme-toggle .icon-sun {
	display: block;
}
[data-theme="light"] .js-theme-toggle .icon-moon {
	display: none;
}

.nav-menu-btn {
	display: none;
}
.nav-menu-btn .icon-close {
	display: none;
}
.nav-menu-btn.active .icon-open {
	display: none;
}
.nav-menu-btn.active .icon-close {
	display: block;
}

/* 1100px and below */
@media (max-width: 1100px) {
	.nav-container {
		gap: 0.6rem;
	}
	.nav-brand {
		display: block;
	}
	.nav-menu-btn {
		display: inline-flex;
	}

	.nav-list {
		position: absolute;
		top: calc(100% + 0.4rem);
		right: 0;
		width: min(16rem, 100%);
		max-height: calc(100vh - var(--nav-h) - 2rem);
		overflow-y: auto;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: 0.25rem 0;
		background-color: var(--bg-primary);
		border: 1px solid var(--nav-bar-line);
		border-radius: 4px;
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-0.4rem);
		transition:
			opacity 0.2s ease,
			transform 0.2s ease,
			visibility 0s linear 0.2s;
	}
	.nav-list.active {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		transition-delay: 0s;
	}
	.nav-list li + li {
		border-top: 1px solid var(--nav-bar-line);
	}
	.nav-list .menu-link {
		padding: 0.75rem 1.25rem;
		font-size: 0.92rem;
	}
}

/* mobile */
@media (max-width: 768px) {
	/* phones */
	:root {
		--nav-h: 3.1rem;
		--nav-icon: 1.3rem;
	}
	.nav-tool {
		width: 2.5rem;
		height: 2.5rem;
	}
	nav {
		margin-bottom: 0;
		order: -1;
	}
	.nav-container {
		width: 100%;
		padding: 0 0.75rem;
	}
	.nav-list {
		left: 0;
		right: 0;
		width: auto;
		top: 100%;
		border-width: 0 0 1px;
		border-radius: 0;
	}
}

.menu-link {
	text-decoration: none;
	border: none;
	outline: none;
	transition: all 0.4s ease;
	font-family: var(--font-nav);
	font-size: 0.86rem;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	letter-spacing: 0.05em;
}
.menu-link::before {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	background-image: url("sigil_inactive.png?v=04a558b9");
	background-image: image-set(url("sigil_inactive.webp?v=60f54260") type("image/webp"), url("sigil_inactive.png?v=04a558b9") type("image/png"));
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.5;
	transition: all 0.4s ease;
	filter: grayscale(100%);
}
.menu-link.active::before {
	background-image: url("sigil_active.png?v=77abae11");
	background-image: image-set(url("sigil_active.webp?v=42a5e926") type("image/webp"), url("sigil_active.png?v=77abae11") type("image/png"));
	opacity: 1;
}
@media (hover: hover) {
	.menu-link:hover::before {
		background-image: url("sigil_active.png?v=77abae11");
		background-image: image-set(url("sigil_active.webp?v=42a5e926") type("image/webp"), url("sigil_active.png?v=77abae11") type("image/png"));
		opacity: 1;
	}
}
/* ==========================================================================
    UNIVERSAL UI COMPONENTS
   ========================================================================== */

/* --- SCALLOPED FRAME --- */
/*
Implemented with layered radial gradients instead of SVGs 
-because SVGs are bakas and unreliable
-style logic is reusable and clean
*/
.scalloped-frame {
	position: relative;
	background-color: var(--card-bg-color);
	height: 100%;
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	transition: background-color 0.5s ease;
	border-radius: 4px;
	min-width: 0;
	min-height: 0;
}

/* ==========================================================================
   UNIFIED FRAME DECORATION
   it was hard
   ========================================================================== */
.scalloped-frame::after,
.lore-card::after {
	content: "";
	position: absolute;
	top: 10px;
	right: 10px;
	bottom: 10px;
	left: 10px;
	border: 1px solid rgba(var(--card-border-rgb), var(--frame-line-alpha, 0.3));
	z-index: 20;
	pointer-events: none;
	transition: border-color 0.3s ease;
}

.scalloped-frame::before,
.lore-card::before {
	content: "";
	position: absolute;
	top: 4px;
	right: 4px;
	bottom: 4px;
	left: 4px;
	pointer-events: none;
	z-index: 20;
	opacity: var(--frame-scallop-opacity, 0.35);
	transition:
		opacity 0.3s ease,
		filter 0.3s ease;
	background-image:
		radial-gradient(
			circle at 0 0,
			transparent 13px,
			var(--card-border-color) 13px,
			var(--card-border-color) 14px,
			transparent 15px
		),
		radial-gradient(
			circle at 100% 0,
			transparent 13px,
			var(--card-border-color) 13px,
			var(--card-border-color) 14px,
			transparent 15px
		),
		radial-gradient(
			circle at 100% 100%,
			transparent 13px,
			var(--card-border-color) 13px,
			var(--card-border-color) 14px,
			transparent 15px
		),
		radial-gradient(
			circle at 0 100%,
			transparent 13px,
			var(--card-border-color) 13px,
			var(--card-border-color) 14px,
			transparent 15px
		),
		linear-gradient(
			to right,
			var(--card-border-color),
			var(--card-border-color)
		),
		linear-gradient(
			to right,
			var(--card-border-color),
			var(--card-border-color)
		),
		linear-gradient(
			to bottom,
			var(--card-border-color),
			var(--card-border-color)
		),
		linear-gradient(
			to bottom,
			var(--card-border-color),
			var(--card-border-color)
		);
	background-position:
		top left,
		top right,
		bottom right,
		bottom left,
		top center,
		bottom center,
		left center,
		right center;
	background-size:
		15px 15px,
		15px 15px,
		15px 15px,
		15px 15px,
		calc(100% - 30px) 1px,
		calc(100% - 30px) 1px,
		1px calc(100% - 30px),
		1px calc(100% - 30px);
	background-repeat: no-repeat;
}

/* --- PORTRAIT LORE CARD --- */
.lore-card {
	position: relative;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	width: 100%;
	max-width: 280px;
	height: 400px;
	margin: 0;
	z-index: 1;
	background-color: var(--card-bg-color);
	transition:
		transform 0.3s ease,
		background-color 0.3s ease,
		box-shadow 0.3s ease;
	box-shadow: none;
	border-radius: 4px;
	min-width: 0;
}

@media (hover: hover) {
	.lore-card:hover {
		transform: translateY(-4px);
	}
	.lore-card:hover::after {
		border-color: var(--card-border-color);
		box-shadow: 0 0 15px rgba(var(--card-border-rgb), 0.5);
	}
	.lore-card:hover::before {
		opacity: 1;
		filter: drop-shadow(0 0 5px var(--card-border-color));
	}
}
.lore-content {
	position: relative;
	z-index: 4;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1.3rem 1.2rem;
	min-width: 0;
}
.lore-title {
	order: 2;
	flex-shrink: 0;
	height: 2.6em;
	margin: 0 0 0.7rem;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-family: var(--font-display);
	font-size: 1.05rem;
	line-height: 1.3;
	text-align: left;
	color: var(--text-heading);
	text-transform: uppercase;
}
.lore-date {
	order: 1;
	flex-shrink: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-variant: small-caps;
	letter-spacing: 0.1em;
	text-align: left;
	color: var(--text-muted);
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 0.6rem;
}
.lore-img-box {
	order: 3;
	flex-shrink: 0;
	position: relative;
	width: 100%;
	height: 8.5rem;
	margin: 0 0 0.75rem;
	overflow: hidden;
	border: 1px solid var(--border-color);
}
.lore-img-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
	filter: sepia(10%) contrast(110%);
}
@media (hover: hover) {
	.lore-card:hover .lore-img-box img {
		transform: scale(1.05);
	}
}
.lore-desc {
	order: 4;
	font-family: var(--font-body);
	font-size: 0.75rem;
	color: var(--text-accent);
	line-height: 1.4;
	text-align: justify;
	text-justify: inter-word;
	padding: 0 4px;
	flex-grow: 1;
	width: 100%;
	margin-bottom: 0.375rem;
	position: relative;
	min-width: 0;
	min-height: 0;
	flex: 1 1 0;
	order: 4;

	/* description (5 if js is napping) (・∀・) */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--desc-lines, 5);
	line-clamp: var(--desc-lines, 5);
	overflow: hidden;
}

/* ==========================================================================
   ORNAMENTS
   ========================================================================== */
:root {
	--orn-line: var(--border-color);
}

.section-separator,
.essay-content > hr {
	height: 0;
	border: 0;
	border-top: 3px double var(--orn-line);
	opacity: 1;
}

/* page headers */
.header-compact h1 {
	font-family: var(--font-display);
	letter-spacing: 0.06em;
}
.header-compact h1 + p {
	font-variant: small-caps;
	letter-spacing: 0.12em;
	color: var(--text-muted);
}
.header-compact h1 + p::after {
	content: "";
	display: block;
	width: 11rem;
	margin: 0.6rem auto 0;
	border-top: 3px double var(--orn-line);
}

/* new page of results fades in, instant swap looked kinda jarring idk (・_・;) */
@keyframes page-turn {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}
.page-turn {
	animation: page-turn 0.22s ease-out;
}


@media (prefers-reduced-motion: reduce) {
	.page-turn { animation: none; }
	.lore-card { transform: none; }
@media (hover: hover) {
	.lore-card:hover { transform: none; }
}
}

/* --- GLOBAL UTILITIES & COMPONENTS --- */

.nav-icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition:
		filter 0.3s ease,
		transform 0.3s ease;
}

.header-compact {
	position: relative;
	height: auto;
	padding: 2.5rem 16px;
	min-height: 150px;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	border-bottom: 1px solid var(--border-color);
	background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3));
	z-index: 20;
	flex-shrink: 0;
}
[data-theme="light"] .header-compact {
	background: linear-gradient(
		to bottom,
		transparent,
		rgba(255, 255, 255, 0.6)
	);
}

.pagination-controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	margin-top: 3rem;
}
.pagination-btn {
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	color: var(--text-primary);
	padding: 0.375rem 1.125rem;
	cursor: pointer;
	font-family: var(--font-nav);
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 4.5rem;
}
.pagination-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
	border-color: transparent;
}
@media (hover: hover) {
	.pagination-btn:not(:disabled):hover {
		border-color: var(--text-accent);
		box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.2);
	}
}
.pagination-btn.icon-only {
	padding: 0;
	width: 4.5rem;
	height: 4.5rem;
	min-width: 0;
	border-radius: 0;
	background: transparent;
	border: none;
}
@media (hover: hover) {
	.pagination-btn.icon-only:hover {
		background: transparent;
		border: none;
		box-shadow: none;
	}
	.pagination-btn.icon-only:hover .nav-icon-img,
	.pagination-btn.icon-only:hover svg {
		filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.8)) brightness(1.3);
	}
}
.page-indicator {
	font-family: var(--font-body);
	font-variant: small-caps;
	letter-spacing: 0.12em;
	color: var(--text-muted);
}

/* --- BUTTONS --- */
.proximity-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: 12rem;
	padding: 0.4rem 2.25rem;
	border: 1px solid var(--border-color);
	border-radius: 2px;
	background: rgba(var(--bg-primary-rgb), 0.35);
	font-family: var(--font-nav);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	color: var(--text-primary);
	text-align: center;
	text-decoration: none;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}
.proximity-button::before {
	content: "";
	position: absolute;
	top: -5px;
	right: -5px;
	bottom: -5px;
	left: -5px;
	z-index: 10;
	cursor: pointer;
}
@media (hover: hover) {
	.proximity-button:hover {
		border-color: var(--accent);
		background-color: rgba(var(--accent-rgb), 0.08);
	}
}
/* author note (optional) between title and essay */
.essay-disclaimer,
.essay-series,
.album-fullsize {
        margin: 0 0 2rem;
        padding: 0.8rem 1.1rem;
        background: rgba(46, 125, 50, 0.1);
        border: 1px solid rgba(74, 222, 128, 0.28);
        border-left: 3px solid #3f9b5a;
        border-radius: 2px;
        font-size: 0.75rem;
        line-height: 1.55;
        color: var(--text-primary);
}

.essay-disclaimer p {
        margin: 0;
}

.essay-disclaimer a,
.series-list a,
.album-fullsize a {
        color: #6fcf8f;
        text-decoration: underline;
        text-underline-offset: 3px;
}

[data-theme="light"] .essay-disclaimer,
[data-theme="light"] .essay-series,
[data-theme="light"] .album-fullsize {
        background: rgba(46, 125, 50, 0.08);
        border-color: rgba(46, 125, 50, 0.35);
        border-left-color: #2e7d32;
}

[data-theme="light"] .essay-disclaimer a,
[data-theme="light"] .series-list a,
[data-theme="light"] .album-fullsize a {
        color: #1f6a2a;
}

/* --- BANNER --- */
.site-masthead {
	position: relative;
	z-index: 55;
	flex-shrink: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
}
.masthead-logo {
	display: block;
	width: 100%;
	height: 17.7vw; /* for browsers without min() (・∀・) */
	height: min(17.7vw, 300px);
	object-fit: cover;
	object-position: center;
}
/* writings, guides and gallery */
.page-masthead {
	position: relative;
}
.page-masthead .masthead-title {
	border-bottom: none;
}
@media (min-width: 1101px) {
	.page-masthead {
		height: 17.7vw; /* for browsers without min() */
		height: min(17.7vw, 300px);
	}
	.page-masthead .masthead-title {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		min-height: 0;
		padding: 0 18%;
	}
	.page-masthead.has-image .masthead-title {
		background: radial-gradient(ellipse at center, rgba(11, 15, 18, 0.42) 0%, rgba(11, 15, 18, 0) 68%);
	}
	.page-masthead.has-image .masthead-title h1 {
		color: #f4ecd9;
		text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.55);
	}
	.page-masthead.has-image .masthead-title h1 + p {
		color: #e3d2a4;
		text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
	}
	.page-masthead.has-image .masthead-title h1 + p::after {
		filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
	}
}
@media (max-width: 1100px) {
	.site-masthead { display: none; }
}

/* --- FOLIO LINE --- */
.folio-line {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 1rem;
	width: 98%;
	max-width: 1800px;
	margin: -1.25rem auto 1.25rem;
	padding: 0.35rem 0.25rem;
	border-bottom: 3px double var(--border-color);
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-variant: small-caps;
	letter-spacing: 0.12em;
	color: var(--text-muted);
}
.folio-est {
	justify-self: start;
}
.folio-logo {
	display: block;
	height: 1.8rem;
	opacity: 0.85;
	background-color: currentColor;
	-webkit-mask: url('folio-logo.svg?v=e7055b2b') center / contain no-repeat;
	mask: url('folio-logo.svg?v=e7055b2b') center / contain no-repeat;
}
.folio-logo.is-footer {
	-webkit-mask-image: url('logo.png?v=f355346a');
	-webkit-mask-image: image-set(url('logo.webp?v=21ccd08d') type("image/webp"), url('logo.png?v=f355346a') type("image/png"));
	mask-image: url('logo.png?v=f355346a');
	mask-image: image-set(url('logo.webp?v=21ccd08d') type("image/webp"), url('logo.png?v=f355346a') type("image/png"));
}
.folio-season {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}
.folio-icon {
	width: 1.05rem;
	height: 1.05rem;
	color: var(--accent);
}
@media (max-width: 768px) {
	/* small screens */
	.folio-line {
		order: -1; /* phone fix */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		width: 100%;
		margin: 0 0 0.75rem;
		padding: 0.3rem 0.75rem;
	}
	.folio-logo {
		display: none;
	}
}
@media (max-width: 480px) {
	.folio-line { font-size: 0.74rem; letter-spacing: 0.06em; gap: 0.5rem; }
}

/* --- FOOTER --- */
footer {
	margin-top: auto;
	border-top: 2rem solid transparent;
	background-clip: padding-box;
	box-shadow: inset 0 1px 0 var(--nav-bar-line);
	background-color: var(--nav-bar-bg);
	transition: background-color 0.5s ease, border-color 0.5s ease;
}
.footer-bar {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	width: 100%;
	max-width: 1800px;
	min-height: calc(var(--nav-h) + 4.5rem);
	margin: 0 auto;
	padding: 1.5rem 3rem 0.75rem;
}
.footer-mark {
	flex-shrink: 0;
	display: block;
	line-height: 0;
}
.footer-mark img {
	height: 4.25rem;
	width: auto;
	opacity: 0.75;
	transition: opacity 0.3s ease;
}
@media (hover: hover) {
	.footer-mark:hover img {
		opacity: 1;
	}
}
.footer-copyright {
	max-width: 1800px;
	margin: 0 auto;
	padding: 0 3rem 1.1rem;
	text-align: center;
	font-family: var(--font-mono), monospace;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	color: var(--nav-fg);
}
.footer-copyright a {
	color: var(--nav-fg);
	text-decoration-color: var(--nav-bar-line);
}
@media (hover: hover) {
	.footer-copyright a:hover {
		color: var(--text-heading);
		text-shadow: none;
	}
}
.footer-actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin-left: auto;
}
.footer-socials {
	display: flex;
	align-items: center;
}
.social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--nav-fg);
	text-decoration: none;
	transition: color 0.3s ease, filter 0.3s ease;
}
@media (hover: hover) {
	.social-icon:hover {
		color: var(--text-heading);
		filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.6));
		text-shadow: none;
	}
}
.social-icon svg {
	width: 1.05rem;
	height: 1.05rem;
}
@media (max-width: 768px) {
	.social-icon {
		width: 2.5rem;
		height: 2.5rem;
	}
	.social-icon svg {
		width: 1.25rem;
		height: 1.25rem;
	}
	.footer-bar {
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		gap: 0.4rem 1rem;
		padding: 1rem 1.5rem;
	}
	.footer-copyright {
		padding: 0 1.5rem 1rem;
		font-size: 0.7rem;
	}
	.footer-actions {
		margin-left: 0;
	}
}

/* picture link tiles */
.link-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid var(--border-color);
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.2);
	transition: border-color 0.2s ease;
}
.link-tile::before {
	content: "";
	display: block;
	padding-top: 42.55%; /* 2.35:1 */
}
.link-tile img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (hover: hover) {
	a.link-tile:hover,
	a:hover > .link-tile {
		border-color: var(--accent);
	}
}
/* play icon on video tiles */
.link-tile.is-video::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	margin: -0.6rem 0 0 -0.4rem;
	border-style: solid;
	border-width: 0.6rem 0 0.6rem 1rem;
	border-color: transparent transparent transparent rgba(255, 255, 255, 0.9);
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

/* footer other projects (￣▽￣)ノ */
.footer-projects {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	flex-shrink: 0;
	padding-left: 2.25rem;
}
.footer-projects-label {
	width: 5.75rem;
	font-family: var(--font-nav);
	font-size: 0.66rem;
	letter-spacing: 0.08em;
	line-height: 1.15;
	color: var(--text-muted);
}
.footer-project {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	width: 10.5rem;
	text-decoration: none;
	text-shadow: none;
}
.footer-project-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: var(--font-nav);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	color: var(--nav-fg);
}
@media (hover: hover) {
	.footer-project:hover .footer-project-name {
		color: var(--text-heading);
	}
}
@media (max-width: 768px) {
	.footer-projects {
		order: 2;
		flex-basis: 100%;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0.5rem 0 0;
	}
	.footer-projects-label {
		width: 100%;
		text-align: center;
	}
	/* fixed */
	.footer-project {
		width: calc(50% - 0.4rem);
		max-width: 10.5rem;
	}
}

/* attributions page */
.attributions-page {
	padding-top: 2.5rem;
}
.attributions-text {
	margin: 0;
	overflow-x: auto;
	font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, "DejaVu Sans Mono", "Liberation Mono", monospace;
	font-size: 0.8rem;
	line-height: 1.25;
	white-space: pre;
	font-variant-ligatures: none;
	color: var(--text-primary);
}

/* --- BACKGROUND --- */
#noxBackground {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	object-fit: cover;
	z-index: -20;
	transition: opacity 0.5s ease;
}
.vignette {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 40;
	background: radial-gradient(
		circle,
		transparent 40%,
		var(--bg-primary) 130%
	);
	mix-blend-mode: multiply;
	opacity: var(--vignette-opacity);
	transition: opacity 0.5s ease;
}
:root:not([data-theme="light"]) .vignette {
	display: none;
}
.hidden {
	display: none !important;
}

/* =========================================
	SCROLLBAR STYLES
   ========================================= */
@media (pointer: fine) {
	html {
		scrollbar-width: thin;
		scrollbar-color: var(--scrollbar-thumb) transparent;
	}
	
	::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}
	::-webkit-scrollbar-track {
		background: rgba(0, 0, 0, 0.1);
	}
	::-webkit-scrollbar-thumb {
		background-color: var(--scrollbar-thumb);
		border-radius: 4px;
	}
	
}

/* --- RANDOM UPDATES --- */

/* Links */
a {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: rgba(var(--accent-rgb), 0.4);
	transition:
		color 0.3s ease,
		text-decoration-color 0.3s ease,
		text-shadow 0.3s ease;
}

a:focus-visible {
	color: var(--text-heading);
	text-decoration-color: var(--accent);
	text-shadow: none;
	outline: none;
}
@media (hover: hover) {
	a:hover {
		color: var(--text-heading);
		text-decoration-color: var(--accent);
		text-shadow: none;
		outline: none;
	}
}
/* =========================================
   SEARCH PANEL
   ========================================= (⌐■_■) */
.search-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 200;
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 10vh 1.5rem 2rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}
.search-overlay.active {
	opacity: 1;
	pointer-events: auto;
}
.search-panel {
	width: 100%;
	max-width: 40rem;
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	transform: translateY(-12px);
	transition: transform 0.25s ease;
}
.search-overlay.active .search-panel {
	transform: translateY(0);
}
.search-input {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--border-color);
	color: var(--text-primary);
	font-family: var(--font-body);
	padding: 1.125rem 1.5rem;
}
.search-input:focus {
	outline: none;
}
.search-results {
	max-height: 55vh;
	overflow-y: auto;
	padding: 0.5rem;
}
.search-empty {
	padding: 1.5rem;
	text-align: center;
	color: var(--text-accent);
	opacity: 0.6;
	font-style: italic;
	font-size: 0.9rem;
}
.search-result {
	display: block;
	padding: 0.75rem 1rem;
	border-radius: 2px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}
.search-result:focus {
	background: rgba(var(--accent-rgb), 0.08);
	text-shadow: none;
}
@media (hover: hover) {
	.search-result:hover {
		background: rgba(var(--accent-rgb), 0.08);
		text-shadow: none;
	}
}
.search-result-title {
	display: block;
	font-family: var(--font-heading);
	color: var(--text-heading);
}
.search-result-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.3rem;
	align-items: center;
}
.search-result-type {
	font-family: var(--font-body);
	color: var(--text-accent);
	opacity: 0.55;
}
.search-result-tag {
	font-size: 0.65rem;
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--border-color);
	border-radius: 9999px;
	color: var(--text-accent);
	opacity: 0.75;
}

@media (max-width: 600px) {
	.search-overlay {
		padding: 4rem 1rem 1rem;
	}
	.search-input {
		font-size: 1rem;
		padding: 1rem;
	}
}

/* ==========================================================================
   HEADING FONT SIZING
   ========================================================================== */
.pagination-btn { font-size: 0.8rem; letter-spacing: 0.06em; }
.search-input { font-size: 1.2rem; }
.search-result-title { font-size: 1rem; }
.search-result-type {
	font-size: 0.75rem;
	font-variant: small-caps;
	text-transform: none;
	letter-spacing: 0.08em;
}

/* ==========================================================================
   DIAGRAMS & MARKDOWN BITS
   ========================================================================== */
/* diagrams fit the screen */
.mermaid-figure {
	margin: 1.75em 0;
	text-align: center;
	overflow: hidden;
}
.mermaid-figure svg {
	max-width: 100% !important;
	height: auto;
	letter-spacing: normal;
	word-spacing: normal;
	text-indent: 0;
	line-height: normal;
}
.mermaid-figure p {
	margin: 0;
	text-indent: 0;
	text-align: center;
	line-height: 1.5;
}
.mermaid-light { display: none; }
[data-theme="light"] .mermaid-dark { display: none; }
[data-theme="light"] .mermaid-light { display: block; }

/* obsidian maths, works in both themes φ(．．) */
.katex {
	letter-spacing: normal;
	word-spacing: normal;
	text-indent: 0;
}
.math-display {
	display: block;
	margin: 1.25em 0;
	text-align: center;
	/* old browser fix */
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}
.math-fit { display: block; }
.math-fit > .katex-display { margin: 0; }
.math-wrap { overflow-x: visible; }
.math-wrap .katex { white-space: normal; }
/* hope it does not get too shrinked */
@supports (container-type: inline-size) {
	.math-display {
		container-type: inline-size;
		overflow: visible;
	}
	.math-fit {
		font-size: min(1em, calc(100cqi / var(--math-w, 1)));
	}
	.math-wrap .math-fit {
		font-size: max(0.85em, min(1em, calc(100cqi / var(--math-w, 1))));
	}
}

.essay-content mark,
.note-body mark {
	background: rgba(var(--accent-rgb), 0.28);
	color: inherit;
	padding: 0 0.1em;
}
.essay-content pre,
.note-body pre {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0.9em 1.1em;
	margin: 1.5em 0;
	border: 1px solid var(--border-color);
	background: rgba(var(--bg-primary-rgb), 0.6);
	font-family: Consolas, "Courier New", monospace;
	font-size: 0.85em;
	line-height: 1.5;
	text-align: left;
	white-space: pre;
}

/* Long code and bare links break mid-word, so a justified line isn't left
   with huge gaps in front of something that can't be split. */
.essay-content :not(pre) > code,
.note-body :not(pre) > code {
	word-break: break-all;
}
.essay-content a,
.note-body a {
	overflow-wrap: anywhere;
}

/* ==========================================================================
   OLDER BROWSERS
   ========================================================================== */
@supports not (aspect-ratio: 1 / 1) {
	.lore-img-box { height: 10rem; }
}
.pub-stamp {
	display: inline-block;
	margin-left: 0.5em;
	padding: 0 0.3em;
	border: 1px solid currentColor;
	font-size: 0.78em;
	font-variant: small-caps;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-decoration: none;
	vertical-align: 0.08em;
	cursor: help;
}
html[data-support="off"] .js-support-btn,
html[data-support="off"] .support-link,
html[data-support="off"] .strip-support,
html[data-support="off"] #mid-support-section,
html[data-support="off"] a[href$="support_me.html"] {
	display: none !important;
}
.sad-emote {
	width: 1em;
	height: 1em;
	margin-right: 0.4em;
	vertical-align: -0.12em;
	flex-shrink: 0;
}
.sad-window .sad-emote {
	width: 64px;
	height: 64px;
	margin: 0;
}
.sad-window {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	max-width: 34rem;
	margin: 0 auto;
	padding: 1.25rem 1.5rem;
	border: 3px double rgba(var(--card-border-rgb), 0.6);
	background: var(--card-bg-color);
	text-align: left;
}
.sad-window p {
	margin: 0 0 1rem;
}