/*
 * Page frame: container, sections and the grids every card list shares.
 */

.am-container {
	width: 100%;
	max-width: var(--am-container);
	margin: 0 auto;
	padding: 0 var(--am-gutter);
}

.am-container-narrow {
	max-width: 820px;
}

.am-main {
	min-height: 40vh;
}

.am-section {
	position: relative;
	padding: var(--am-space-8) 0;
}

.am-section-soft {
	background: var(--am-surface-soft);
}

.am-section-tight {
	padding: var(--am-space-7) 0;
}

/* Deep neutral band. Used where a bright surface would wash out the content,
   and to break the page up between two light sections. */
.am-section-ink {
	background: var(--am-surface-dark);
	color: var(--am-on-dark);
}

.am-section-ink h2,
.am-section-ink h3,
.am-section-ink p {
	color: var(--am-on-dark);
}

.am-section-ink .am-section-title {
	color: var(--am-on-dark);
}

.am-section-ink .am-section-title::after {
	background: var(--am-yellow);
}

.am-section-ink .am-section-lead {
	color: rgba(255, 255, 255, 0.72);
}

/* Section headers */
.am-section-head {
	max-width: 760px;
	margin: 0 auto var(--am-space-7);
	text-align: center;
}

.am-section-head-left {
	margin-left: 0;
	text-align: left;
}

.am-section-title {
	margin: 0 0 var(--am-space-3);
	color: var(--am-green);
	font-size: var(--am-h2);
	letter-spacing: 0.04em;
}

.am-section-title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin: var(--am-space-3) auto 0;
	border-radius: 2px;
	background: var(--am-yellow);
}

.am-section-head-left .am-section-title::after {
	margin-left: 0;
}

.am-section-lead {
	margin: 0;
	color: var(--am-muted);
	font-size: var(--am-text-lg);
}

.am-subhead {
	margin: var(--am-space-7) 0 var(--am-space-5);
	color: var(--am-green-dark);
	font-size: var(--am-h3);
	letter-spacing: 0.02em;
}

.am-subhead:first-child {
	margin-top: 0;
}

/* Grids. One naming scheme for every card list on the site. */
.am-grid {
	display: grid;
	gap: var(--am-space-5);
	grid-template-columns: repeat(auto-fill, minmax(var(--am-grid-min, 260px), 1fr));
}

.am-grid-2 {
	--am-grid-min: 420px;
}

.am-grid-3 {
	--am-grid-min: 320px;
}

.am-grid-4 {
	--am-grid-min: 240px;
}

.am-grid-tight {
	gap: var(--am-space-4);
}

.am-prose > :first-child {
	margin-top: 0;
}

.am-prose > :last-child {
	margin-bottom: 0;
}

.am-empty {
	margin: 0;
	padding: var(--am-space-6);
	border: 1px dashed var(--am-line);
	border-radius: var(--am-radius);
	background: var(--am-surface-soft);
	color: var(--am-muted);
	text-align: center;
}