/* ===== VeiledAthena custom styles (layered over Multiverse) ===== */

/* --- Header: moved to top of page, compact --- */
#header {
	top: 0;
	bottom: auto;
	height: 4em;
	line-height: 4em;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.loading #header {
	-moz-transform: translateY(-4em);
	-webkit-transform: translateY(-4em);
	-ms-transform: translateY(-4em);
	transform: translateY(-4em);
}
#header h1 { color: #ffffff; letter-spacing: 0.1em; }
#header nav > ul { white-space: nowrap; }
#header nav > ul > li a {
	font-size: 0.8em;
	padding: 0 1.1em;
	color: rgba(255, 255, 255, 0.8);
}
#header nav > ul > li a:hover { color: #ecd488 !important; }
#header nav > ul > li a.icon:before { color: rgba(255, 255, 255, 0.5); }
#theme-toggle .label { display: none; }
#theme-toggle:before { float: none !important; margin: 0 !important; }
@media screen and (max-width: 980px) {
	#header nav > ul > li a { font-size: 0.7em; padding: 0 0.7em; }
}
@media screen and (max-width: 736px) {
	#header nav > ul > li a { font-size: 0.6em; padding: 0 0.5em; }
}

/* Footer panel now docks to the true bottom (no more bottom bar) */
@media screen and (min-width: 737px) {
	.panel { bottom: 0; }
}

/* --- Intro: compact two-column profile --- */
#intro {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-align-items: center;
	-webkit-align-items: center;
	align-items: center;
	max-width: 66em;
	margin: 0 auto;
	padding: 6.5em 2.5em 2em 2.5em;
	text-align: left;
}
#intro .avatar {
	width: 11em;
	height: 11em;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(212, 184, 90, 0.55);
	box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06);
	-moz-flex-shrink: 0;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	margin-right: 3em;
}
#intro h1 {
	font-size: 1.9em;
	margin: 0 0 0.1em 0;
	letter-spacing: 0.06em;
	color: #ffffff;
}
#intro .tagline {
	color: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	letter-spacing: 0.25em;
	font-size: 0.75em;
	margin: 0 0 1.25em 0;
}
#intro .about {
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.8;
	margin: 0 0 1.25em 0;
}
#intro .intro-links {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.95em;
}
#intro .intro-links li {
	display: inline-block;
	padding: 0 0.9em;
	border-right: solid 1px rgba(255, 255, 255, 0.25);
}
#intro .intro-links li:first-child { padding-left: 0; }
#intro .intro-links li:last-child { border-right: 0; }
#intro .intro-links a {
	color: #e0c364;
	text-decoration: none;
	border-bottom: dotted 1px rgba(224, 195, 100, 0.5);
}
#intro .intro-links a:hover { color: #f1da8e; }
#intro .intro-links a.intro-mail { border-bottom: 0; color: rgba(255, 255, 255, 0.65); }
#intro .intro-links a.intro-mail:before { color: #e0c364; }
#intro .intro-links a.intro-mail:hover { color: #e0c364; }
@media screen and (max-width: 860px) {
	#intro {
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		flex-direction: column;
		text-align: center;
		padding-top: 6em;
	}
	#intro .avatar { margin: 0 0 1.5em 0; width: 9em; height: 9em; }
	#intro .intro-links li:first-child { padding-left: 0.9em; }
}

/* --- Single post / page content --- */
.content-page {
	max-width: 46em;
	margin: 0 auto;
	padding: 7em 2em 4em 2em;
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.05em;
	line-height: 1.85;
}
.content-page h1 { font-size: 1.75em; margin-bottom: 0.25em; color: #ffffff; }
.content-page h2, .content-page h3 { color: #ffffff; margin: 2.25em 0 0.75em 0; }
.content-page h3 {
	border-bottom: solid 1px rgba(212, 184, 90, 0.45);
	padding-bottom: 0.4em;
}
.content-page .post-meta {
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.9em;
	margin-bottom: 2.5em;
}
.content-page .back-link {
	display: inline-block;
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	border: 0;
	margin-bottom: 2em;
}
.content-page .back-link:hover { color: #e0c364; }
.content-page img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1.25em auto;
	border-radius: 4px;
	border: solid 1px rgba(255, 255, 255, 0.15);
}
.content-page blockquote {
	background: rgba(255, 255, 255, 0.06);
	border-left: solid 4px #d4b85a;
	border-radius: 0 4px 4px 0;
	padding: 1em 1.5em;
	margin: 1.25em 0;
	font-style: normal;
	color: rgba(255, 255, 255, 0.78);
}
.content-page blockquote img { margin: 0.75em 0; }
.content-page a { color: #e0c364; }
.content-page a:hover { color: #f1da8e; }
.content-page code {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 3px;
	padding: 0.1em 0.4em;
	font-size: 0.9em;
}
.content-page hr { border-color: rgba(255, 255, 255, 0.15); }

/* --- Writeup index list --- */
.writeup-list { list-style: none; padding: 0; }
.writeup-list li {
	padding: 0.85em 0;
	border-bottom: solid 1px rgba(255, 255, 255, 0.12);
}
.writeup-list li a { font-weight: bold; text-decoration: none; border: 0; }
.writeup-list li span {
	display: block;
	font-size: 0.85em;
	color: rgba(255, 255, 255, 0.55);
}

/* --- Cover tiles --- */
/* Show whole cover, never crop (covers are pure black so letterboxing is invisible) */
#main .thumb > .image {
	background-size: contain;
	background-color: #000;
	-moz-transition: filter 0.35s ease;
	-webkit-transition: filter 0.35s ease;
	transition: filter 0.35s ease;
}
#main .thumb:hover > .image { filter: brightness(0.3); }
/* Covers carry the title; overlay text appears on hover only.
   Description sits at the TOP of the tile, title at the bottom. */
#main .thumb > h2 {
	opacity: 0;
	bottom: 1.6em;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
	-moz-transition: opacity 0.35s ease;
	-webkit-transition: opacity 0.35s ease;
	transition: opacity 0.35s ease;
}
#main .thumb > p {
	display: block;
	position: absolute;
	top: 1.9em;
	left: 2.1875em;
	right: 2.1875em;
	margin: 0;
	z-index: 1;
	pointer-events: none;
	font-size: 0.75em;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
	opacity: 0;
	-moz-transition: opacity 0.35s ease;
	-webkit-transition: opacity 0.35s ease;
	transition: opacity 0.35s ease;
}
#main .thumb:hover > h2,
#main .thumb:hover > p { opacity: 1; }

/* --- Footer readability --- */
#footer { color: rgba(255, 255, 255, 0.7); }
#footer h2 { color: #ffffff; }

/* --- Light mode --- */
body.light,
body.light #wrapper { background: #f5f3ee; color: #3d3d3d; }
/* Theme hardcodes strong/b to white; make bold text dark + actually bold in light mode */
body.light strong,
body.light b { color: #1e1e1e; font-weight: 600; }
body.light #header {
	background: rgba(245, 243, 238, 0.97);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
body.light #header h1,
body.light #header h1 a { color: #2b2b2b; }
body.light #header nav > ul > li a { color: rgba(0, 0, 0, 0.7); }
body.light #header nav > ul > li a:hover { color: #8a6d1f !important; }
body.light #header nav > ul > li a.icon:before { color: rgba(0, 0, 0, 0.45); }
body.light #intro h1 { color: #222222; }
body.light #intro .tagline { color: rgba(0, 0, 0, 0.5); }
body.light #intro .about { color: rgba(0, 0, 0, 0.7); }
body.light #intro .intro-links li { border-right-color: rgba(0, 0, 0, 0.2); }
body.light #intro .intro-links a { color: #8a6d1f; border-bottom-color: rgba(138, 109, 31, 0.4); }
body.light #intro .intro-links a:hover { color: #b08c28; }
body.light #intro .intro-links a.intro-mail { color: rgba(0, 0, 0, 0.55); }
body.light #intro .intro-links a.intro-mail:before,
body.light #intro .intro-links a.intro-mail:hover { color: #8a6d1f; }
body.light .content-page { color: rgba(0, 0, 0, 0.75); }
body.light .content-page h1,
body.light .content-page h2,
body.light .content-page h3 { color: #222222; }
body.light .content-page h3 { border-bottom-color: rgba(138, 109, 31, 0.35); }
body.light .content-page .post-meta { color: rgba(0, 0, 0, 0.45); }
body.light .content-page .back-link { color: rgba(0, 0, 0, 0.5); }
body.light .content-page .back-link:hover { color: #8a6d1f; }
body.light .content-page a { color: #8a6d1f; }
body.light .content-page a:hover { color: #b08c28; }
body.light .content-page blockquote {
	background: rgba(0, 0, 0, 0.05);
	border-left-color: #b08c28;
	color: rgba(0, 0, 0, 0.7);
}
body.light .content-page code { background: rgba(0, 0, 0, 0.08); }
body.light .content-page img { border-color: rgba(0, 0, 0, 0.15); }
body.light .content-page hr { border-color: rgba(0, 0, 0, 0.15); }
body.light .writeup-list li { border-bottom-color: rgba(0, 0, 0, 0.12); }
body.light .writeup-list li span { color: rgba(0, 0, 0, 0.5); }
body.light #footer { background: #e9e5db; color: rgba(0, 0, 0, 0.7); }
body.light #footer h2 { color: #222222; }
body.light #footer a { color: #8a6d1f; }
body.light #footer .copyright { color: rgba(0, 0, 0, 0.45); }

/* --- Tools & Projects cards --- */
.tool-card {
	background: rgba(255, 255, 255, 0.035);
	border: solid 1px rgba(255, 255, 255, 0.12);
	border-left: solid 3px #d4b85a;
	border-radius: 6px;
	padding: 1.75em 2em;
	margin: 1.75em 0;
	-moz-transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
	-webkit-transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.tool-card:hover {
	border-color: rgba(212, 184, 90, 0.5);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
	-moz-transform: translateY(-2px);
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
}
.tool-card .tool-card-title {
	margin: 0 0 0.4em 0;
	padding: 0;
	border: 0;
	font-size: 1.4em;
	letter-spacing: 0.05em;
	color: #ffffff;
}
.tool-card .tool-card-desc {
	margin: 0 0 1.15em 0;
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.95em;
	line-height: 1.75;
}
.tool-card .tool-card-list {
	list-style: disc;
	margin: -0.4em 0 1.15em 0;
	padding: 0 0 0 1.4em;
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.95em;
	line-height: 1.7;
}
.tool-card .tool-card-list li { margin: 0.2em 0; padding: 0; }
.tool-card .tool-card-list li::marker { color: #d4b85a; }
.tool-tags { margin: 0 0 1.35em 0; }
.tool-tag {
	display: inline-block;
	font-size: 0.68em;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: #e0c364;
	border: solid 1px rgba(212, 184, 90, 0.4);
	border-radius: 3px;
	padding: 0.3em 0.75em;
	margin: 0 0.45em 0.45em 0;
}
.tool-actions {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 0.75em;
}
.tool-btn {
	display: inline-block;
	padding: 0.6em 1.5em;
	border-radius: 4px;
	font-size: 0.9em;
	text-decoration: none !important;
	border: solid 1px rgba(212, 184, 90, 0.55) !important;
	color: #e0c364 !important;
	-moz-transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
.tool-btn:hover {
	background: rgba(212, 184, 90, 0.12);
	color: #f1da8e !important;
}
.tool-btn.primary {
	background: #d4b85a;
	color: #1a1a1a !important;
	border-color: #d4b85a !important;
}
.tool-btn.primary:hover {
	background: #e6cd77;
	color: #1a1a1a !important;
}

/* Tool cards — light mode */
body.light .tool-card {
	background: rgba(0, 0, 0, 0.025);
	border-color: rgba(0, 0, 0, 0.12);
	border-left-color: #b08c28;
}
body.light .tool-card:hover {
	border-color: rgba(176, 140, 40, 0.55);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
body.light .tool-card .tool-card-title { color: #222222; }
body.light .tool-card .tool-card-desc { color: rgba(0, 0, 0, 0.72); }
body.light .tool-card .tool-card-list { color: rgba(0, 0, 0, 0.72); }
body.light .tool-card .tool-card-list li::marker { color: #b08c28; }
body.light .tool-tag { color: #8a6d1f; border-color: rgba(138, 109, 31, 0.4); }
body.light .tool-btn {
	color: #8a6d1f !important;
	border-color: rgba(138, 109, 31, 0.5) !important;
}
body.light .tool-btn:hover { background: rgba(138, 109, 31, 0.1); color: #6f571a !important; }
body.light .tool-btn.primary {
	background: #b08c28;
	color: #ffffff !important;
	border-color: #b08c28 !important;
}
body.light .tool-btn.primary:hover { background: #c99f30; color: #ffffff !important; }