/* Site-wide typography normalisation.
   Loaded AFTER main.css on every page (index, memories, art) so the
   whole site shares one font stack and one type scale. */

:root {
	--font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body,
input,
select,
textarea,
button {
	font-family: var(--font-sans);
}

pre,
code,
kbd,
samp {
	font-family: var(--font-mono);
}

/* --- One page-title block for every page --- */
header.major h2 {
	font-size: 2.5em;
	line-height: 1.15em;
}

header.major h2 + p {
	font-size: 1.15em;
	line-height: 1.5em;
	font-weight: 700;
	margin-top: -0.35em;
}

/* the timeline pages use the intro slot for a sentence, not a subtitle */
header.major h2 + p.tl-note {
	font-weight: 400;
	font-size: 0.85em;
}

/* ------------------------------------------------------------------ */
/*  Right-hand sidebar panel                                           */
/* ------------------------------------------------------------------ */

/* --- Smaller panel. Scoped to the docked sidebar (>1024px); below that
       the template turns #header into an off-canvas menu with its own
       width/transform maths that must stay untouched. --- */
@media screen and (min-width: 1025px) {
	#header { width: 17em; }
	#wrapper { padding-right: 17em; }
}

@media screen and (min-width: 1025px) and (max-width: 1280px) {
	#header { width: 16em; }
	#wrapper { padding-right: 16em; }
}

/* --- Tighter header block: smaller avatar, less padding --- */
#header > header {
	padding: 2.25em 1.5em 1.1em;
}

#header > header .avatar {
	width: 5.5em;
	margin-bottom: 1.5em;
}

#header > header h1 {
	font-size: 1.3em;
}

#header > header p {
	font-size: 0.82em;
	margin-top: 0.6em;
}

#header > footer {
	padding: 1.5em;
}

/* --- Navigation that clearly reads as a menu --- */
#header > nav ul {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	margin: 0.35em 0 0.75em;
}

#header > nav ul li + li {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#header > nav ul li a {
	position: relative;
	display: block;
	padding: 0.9em 1em;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

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

#header > nav ul li a.active {
	background: #ffffff;
	color: #74412d !important;
}

#header > nav ul li a.active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: #74412d;
}

/* --- Sub-navigation: anchors to sections *within* the current page.  --- */
/* --- Nested, centered, lighter, so they read as parts of this page   --- */
/* --- rather than separate destinations.                              --- */
#header > nav ul .subnav {
	margin: 0.15em 0 0.5em 0;
	padding: 0;
	border: 0;
	text-align: center;
	font-size: 0.66em;   /* one scale for the whole sub-list */
}

#header > nav ul .subnav li + li {
	border-top: 0;
}

#header > nav ul .subnav li a {
	padding: 0.7em 1.5em;
	font-size: 1em;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: none;
	color: rgba(255, 255, 255, 0.72) !important;
}

#header > nav ul .subnav li a:hover {
	background: rgba(255, 255, 255, 0.07);
	color: #ffffff !important;
}

#header > nav ul .subnav li a.active {
	background: transparent;
	color: #ffffff !important;
	font-weight: 700;
}

/* no left block-bar for nested items; bold white text marks "current" */
#header > nav ul .subnav li a.active::before {
	display: none;
}

/* Mobile slide-out nav: keep the menu styling, a touch larger to tap */
@media screen and (max-width: 736px) {
	#header > nav ul li a {
		font-size: 0.8em;
		padding: 0.85em 1.5em;
	}

	#header > nav ul .subnav {
		font-size: 0.78em;
	}
}

/* --- Sections within a page read as sub-parts of one page, ---
   --- not as separate pages: shared rhythm, hairline dividers, --- */
/* --- and a short accent bar that marks each heading as a section label. --- */
#main > section {
	padding: 2.25em 0;
	border-top: 1px solid var(--page-hairline, rgba(116, 65, 45, 0.16));
}

#main > section:first-child {
	padding-top: 0;
	border-top: 0;
}

/* home page: no hairline between the intro, Updates and Research Interests */
#main > section#Updates,
#main > section#ResearchInterests {
	border-top: 0;
}

/* breathing room between the intro banner and the page title */
.image.main {
	margin-bottom: 2.75em;
}

#main > section > .container > h2,
#main > section > .container > h3 {
	position: relative;
	scroll-margin-top: 2em;
	margin-bottom: 1.1em;
	padding-bottom: 0.4em;
	font-size: 1.4em;
	letter-spacing: 0.01em;
}

#main > section > .container > h2::after,
#main > section > .container > h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.25em;
	height: 3px;
	border-radius: 3px;
	background: var(--tl-accent, #74412d);
}