/* Refresh overlay: keep the left Frisk sidebar, warm up type and homepage. */

:root {
	--accent: #f29937;
	--ink: #2b2a28;
	--muted: #5c5854;
	--paper: #f4efe8;
	--card: #fffdf9;
	--sidebar: #2f2c29;
	--sidebar-hover: #4a4540;
}

body {
	background-color: var(--paper);
	color: var(--ink);
	font-family: "LatoLatinWeb", "Source Sans Pro", sans-serif;
}

a {
	color: var(--accent);
}

.seitenkopf {
	background-color: var(--sidebar);
	padding-top: 28px;
}

.seitenkopf .brand {
	display: block;
	padding: 0 12% 12px;
	color: #f6f3ee;
	text-decoration: none;
}

.seitenkopf .brand:hover {
	color: #fff;
}

.seitenkopf img.portrait {
	display: block;
	float: none;
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 50%;
	margin: 0 0 16px;
	border: 2px solid rgba(242, 153, 55, 0.7);
}

.seitenkopf h1 {
	padding-left: 0;
	margin: 0 0 4px;
	font-size: 26pt;
	max-width: none;
}

.seitenkopf p {
	margin-left: 0;
	margin-right: 0;
	color: #d8d2c8;
	font-size: 10pt;
	line-height: 1.4;
	max-width: 16em;
}

nav.leftnav a {
	padding-left: 12%;
	font-size: 12pt;
	letter-spacing: 0.01em;
}

nav.leftnav a:hover {
	background-color: var(--sidebar-hover);
}

.leftnav li .active,
.leftnav li .active:hover {
	background: var(--accent);
	color: #fff;
}

nav.leftnav .subnav {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

nav.leftnav .subnav a {
	padding: 6px 12px 6px 18%;
	font-size: 10.5pt;
	color: #d8d2c8;
}

article {
	background-color: var(--card);
	box-shadow: 0 10px 30px rgba(47, 44, 41, 0.06);
}

article header h1,
article header h2,
.hero h1 {
	font-weight: 700;
}

.lead {
	padding: 8px 25px 12px;
	font-size: 1.15rem;
	line-height: 1.45;
	color: var(--muted);
}

.hero {
	display: grid;
	grid-template-columns: minmax(180px, 0.9fr) 1.3fr;
	gap: 0;
	overflow: hidden;
}

.hero-photo {
	margin: 0;
}

.hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 280px;
}

.hero-copy {
	padding: 28px 32px 36px 8px;
}

.eyebrow {
	padding: 0;
	margin: 0 0 8px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.75rem;
	color: var(--accent);
	font-weight: 700;
}

.hero h1 {
	padding: 0 0 8px;
	margin: 0;
	font-size: 28pt;
	line-height: 1.15;
}

.hero-tagline {
	font-size: 1.35rem;
	font-style: italic;
	line-height: 1.35;
	color: var(--muted);
	margin: 0 0 16px !important;
}

.hero-copy p {
	padding: 0;
	margin: 0 0 14px;
}

.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px !important;
}

.btn,
.readmore a,
.main-btn {
	display: inline-block;
	background-color: var(--accent);
	color: #fff !important;
	padding: 10px 16px;
	text-decoration: none;
	font-weight: 700;
}

.btn:hover,
.readmore a:hover,
.main-btn:hover {
	background-color: #d67d1f;
}

.btn-ghost {
	background-color: transparent;
	color: var(--ink) !important;
	box-shadow: inset 0 0 0 2px var(--ink);
}

.btn-ghost:hover {
	background-color: var(--ink);
	color: #fff !important;
}

.audience-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	padding: 8px 25px 28px;
}

.audience-grid section {
	background: #f7f1e8;
	padding: 8px 4px 12px;
}

.audience-grid h3 {
	padding: 8px 12px 0;
}

.audience-grid p {
	padding: 8px 12px;
}

.news-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	padding: 0 25px 28px;
}

.news-item {
	background: var(--card);
	padding: 8px 4px 16px;
}

.news-date {
	padding: 12px 20px 0 !important;
	margin: 0;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	font-weight: 700;
}

.atmosphere-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	padding: 8px 25px 12px;
}

.atmosphere-grid figure {
	margin: 0;
}

.atmosphere-grid img {
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.atmosphere .note,
.archive-label {
	padding: 0 25px 20px;
	font-size: 0.95rem;
	color: var(--muted);
}

.archive-label {
	display: inline-block;
	margin: 12px 25px 0;
	padding: 4px 10px;
	background: #eee4d6;
	color: var(--ink);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
}

.contact-mail {
	font-size: 1.25rem;
}

.contact-mail a {
	font-weight: 700;
}

div.all > footer {
	color: var(--muted);
}

#resume .resume-header h1 {
	color: var(--accent);
	text-align: center;
	font-weight: 700;
}

#resume .section-intro {
	padding: 8px 25px 20px;
}

#resume .section-intro h2 {
	color: var(--accent);
	text-align: center;
}

#resume .section-intro p {
	text-align: left;
	max-width: 42em;
	margin: 0 auto 1rem;
	line-height: 1.55;
}

.hub-intro {
	max-width: 42em;
	margin: 0 auto 1.75rem;
	padding: 0 25px 8px;
	line-height: 1.55;
}

.hub-intro p {
	padding: 0 0 0.9rem;
}

#resume .timeline-block::after {
	content: "";
	display: table;
	clear: both;
}

@media only screen and (max-width: 880px) {
	.seitenkopf {
		background-color: var(--sidebar);
		height: 92px;
	}

	.seitenkopf .brand {
		padding: 0;
	}

	.seitenkopf img.portrait {
		position: absolute;
		left: 9%;
		top: 14px;
		width: 56px;
		height: 56px;
		margin: 0;
	}

	.seitenkopf h1 {
		margin: 0;
		padding-left: 28%;
		float: none;
		font-size: 18pt;
	}

	.seitenkopf p {
		display: none;
	}

	.hero,
	.audience-grid,
	.news-list,
	.atmosphere-grid {
		grid-template-columns: 1fr;
	}

	.hero-copy {
		padding: 20px 24px 28px;
	}
}

@media only screen and (max-width: 550px) {
	.hero h1 {
		font-size: 22pt;
	}
}