/* Shared dark "brick" theme for every page (index, art, memories).
   Load AFTER main.css, site.css (and timeline.css where present).

   Re-skins the HTML5 UP "Read Only" chrome (sidebar, wrapper, footer)
   and overrides the timeline.css / site.css design tokens. */

:root {
	/* --- timeline.css tokens --- */
	--tl-accent: #d97f56;                        /* lit brick / terracotta */
	--tl-accent-soft: rgba(217, 127, 86, 0.16);
	--tl-accent-line: rgba(217, 127, 86, 0.34);

	--tl-heading: #ecbca3;
	--tl-text: #b6a79e;
	--tl-muted: #8b7b72;

	--tl-card-bg: #211815;
	--tl-card-border: rgba(217, 127, 86, 0.18);
	--tl-img-bg: #2c211b;
	--tl-node-bg: #17110f;
	--tl-shadow: rgba(0, 0, 0, 0.55);

	--tl-tag-text: #1c1512;

	--tl-modal-bg: #221812;
	--tl-modal-text: #b6a79e;
	--tl-overlay: rgba(0, 0, 0, 0.8);
	--tl-page-bg: #17110f;

	/* --- page-chrome palette --- */
	--page-bg: #17110f;         /* near-black warm brown */
	--page-sidebar: #2a1c15;    /* lifted brick */
	--page-hairline: rgba(217, 127, 86, 0.18);
}

/* --- Base surfaces --- */
body,
#wrapper,
#footer {
	background: var(--page-bg);
}

body,
input,
select,
textarea {
	color: var(--tl-text);
}

#main h1, #main h2, #main h3, #main h4, #main h5, #main h6 {
	color: var(--tl-heading);
}

/* section intro paragraph — the "PhD Student" subtitle / timeline note
   (beats `header.major h2 + p` from main.css) */
#main header.major h2 + p {
	color: var(--tl-muted);
}

/* no divider between the research-topic blocks on the home page */
#main .features article {
	border-top: 0;
}

#main a {
	color: var(--tl-accent);
}

	#main a:hover {
		color: var(--tl-heading);
	}

#main strong,
#main b {
	color: var(--tl-heading);
}

/* --- Sidebar --- */
#header {
	background: var(--page-sidebar);
}

	#header > header p {
		color: #d8c7bd;
	}

	#header > nav ul,
	#header > nav ul li + li {
		border-color: rgba(255, 255, 255, 0.12);
	}

	#header > nav ul li a:hover {
		color: #f0d9cd !important;
		background: rgba(255, 255, 255, 0.06);
	}

	#header > nav ul li a.active {
		background: var(--tl-accent);
		color: #1c1512 !important;
	}

		#header > nav ul li a.active::before {
			background: #1c1512;
		}

/* --- Footer --- */
#footer {
	color: var(--tl-muted);
}

	#footer .copyright li {
		border-left-color: var(--page-hairline);
	}

	#footer .copyright li a {
		color: var(--tl-text);
	}

		#footer .copyright li a:hover {
			color: var(--tl-accent);
		}

/* --- Collapsed-nav title bar (shows at <= 1024px) --- */
@media screen and (max-width: 1024px) {
	#titleBar {
		background: var(--page-sidebar);
	}

	#titleBar .toggle:before {
		background: var(--tl-accent);
		color: #1c1512;
	}
}