* { box-sizing: border-box; }
body { margin: 0; color: #26231f; font-family: Arial, sans-serif; }
.jumbotron {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	min-height: 110px;
	background: #34281f;
}
.jumbotron.navbar {
	margin: 0;
	padding: 0;
	border-radius: 0;
}
.jumbotron a {
	display: grid;
	place-items: center;
	padding: 18px 10px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	border-right: 1px solid #695647;
	font-weight: 700;
}
.jumbotron a:last-child { border-right: 0; }
.jumbotron a:hover { background: #594331; }
.hero {
	position: relative;
	height: 58vh;
	min-height: 30px;
	background: #a98b68 url("https://images.unsplash.com/photo-1516280440614-37939bbacd81?auto=format&fit=crop&w=2000&q=85") center 45% /  cover no-repeat;
}
.content {
	min-height: 38vh;
	padding: 90px 8% 50px;
	background: #f5f1e9;
}
.title {
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: 0;
	width: min(80%, 700px);
	padding: 24px;
	transform: translate(-50%, 50%);
	background: #fff;
	text-align: center;
	box-shadow: 0 5px 20px #0002;
}
.title h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.7rem, 4vw, 3rem); }
.origins-page { background: #f5f1e9; }
.origins-header {
	padding: 44px 7% 30px;
	background: #e5dac8;
	border-bottom: 1px solid #c9b9a3;
}
.origins-eyebrow {
	margin: 0 0 8px;
	color: #76543a;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.origins-header h1 {
	margin: 0;
	color: #34281f;
	font-family: Georgia, serif;
	font-size: 2.6rem;
}
.origins-layout {
	display: grid;
	grid-template-columns: minmax(230px, .75fr) minmax(0, 2fr);
	gap: 36px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 38px 7% 64px;
}
.summary-panel { align-self: start; }
.summary-panel h2,
.story-card h2 {
	margin: 0;
	color: #34281f;
	font-family: Georgia, serif;
}
.summary-panel h2 { margin-bottom: 12px; font-size: 1.5rem; }
.summary-copy { margin: 0 0 20px; line-height: 1.65; }
.summary-image,
.story-image {
	display: grid;
	place-items: center;
	min-height: 210px;
	color: #6e5d4d;
	background: #e5dac8;
	border: 1px dashed #aa9277;
	text-align: center;
}
.origins-stories { display: grid; gap: 16px; }
.story-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(180px, .72fr);
	gap: 18px;
	align-items: stretch;
}
.story-row.row { margin: 0; }
.story-row > .col-md-7,
.story-row > .col-md-5 {
	width: auto;
	max-width: none;
	padding: 0;
}
.story-card {
	display: block;
	position: relative;
	min-height: 190px;
	padding: 24px 25px;
	background: #fff;
	border: 1px solid #ded4c7;
	border-radius: 0;
	box-shadow: none;
}
.story-number {
	margin: 0 0 12px;
	color: #936b45;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
}
.story-card h2 { margin-bottom: 10px; font-size: 1.3rem; }
.story-card > p:last-child { margin: 0; line-height: 1.6; }
.story-media { display: grid; grid-template-rows: 1fr auto; gap: 10px; }
.story-image { min-height: 130px; }
.summary-image img,
.story-image img { max-width: 100%; height: auto; }
.story-media audio { width: 100%; height: 42px; }
@media (max-width: 600px) {
	.jumbotron { grid-template-columns: repeat(3, 1fr); }
	.jumbotron a { min-height: 64px; }
	.hero { height: 54vh; }
	.origins-header { padding: 32px 6% 24px; }
	.origins-header h1 { font-size: 2.2rem; }
	.origins-layout { grid-template-columns: 1fr; gap: 30px; padding: 28px 6% 48px; }
	.story-row { grid-template-columns: minmax(0, 1fr) minmax(130px, .7fr); gap: 12px; }
	.story-card { min-height: 180px; padding: 20px 16px; }
	.story-image { min-height: 120px; }
}