/*
 * Journal (home.php, archive.php, single.php). Loaded only on journal views.
 * 1. Index  2. Article
 */

/* 1. Index — hero category links, latest story, grid.
   ------------------------------------------------------------------------ */
.er-journal-cats ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}
.er-journal-cats a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--er-border-strong);
	border-radius: var(--er-radius-action);
	color: var(--er-heading);
	font-size: var(--er-fs-small);
	letter-spacing: .02em;
	text-decoration: none;
	text-transform: uppercase;
}
.er-journal-cats a:hover,
.er-journal-cats a[aria-current] { border-color: var(--er-accent); background: rgb(var(--er-accent-rgb) / var(--er-tint-alpha, .14)); }

.er-journal__feature { margin-bottom: clamp(48px, 6vw, 88px); }
.er-card--feature { aspect-ratio: 4 / 5; }
@media (min-width: 810px) {
	.er-card--feature { aspect-ratio: 16 / 8; padding: 24px; }
	.er-card--feature .er-card__panel { max-width: 560px; padding: 36px 32px 32px; }
	.er-card--feature .er-card__title { font-size: var(--er-fs-name); }
}
.er-card--feature .er-card__excerpt { -webkit-line-clamp: 3; }

.er-journal__heading { margin: 0 0 32px; }
.er-journal .navigation.pagination .nav-links { justify-content: center; }
.er-journal__empty { padding: 48px 0; text-align: center; }

/* 2. Article — narrow reading column under a forest hero.
   ------------------------------------------------------------------------ */
.er-article__head { max-width: calc(760px + 2 * var(--er-gutter)); }
.er-article__head .er-breadcrumbs { margin-bottom: 32px; }
.er-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0 0 16px;
	font-size: var(--er-fs-small);
	letter-spacing: .02em;
	text-transform: uppercase;
}
.er-article__meta a { color: var(--er-accent-strong); text-decoration: none; } /* Gated text role (gold on forest by default). */
.er-article__meta a:hover { text-decoration: underline; }
.er-article__title { max-width: none; } /* The header column (760px) already sets the measure. */
.er-article__head .er-rule { margin-top: 24px; }

.er-article__figure { margin-block: clamp(32px, 5vw, 64px) 0; }
.er-article__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 78svh;
	object-fit: cover;
}
.er-article__figure figcaption { margin-top: 12px; }

.er-article__body {
	padding-block: clamp(40px, 6vw, 88px) var(--er-space-section);
}
.er-article__content {
	margin-inline: auto;
	font-size: 18px;
	line-height: 1.75;
}
.er-article__footer {
	max-width: 760px;
	margin: 48px auto 0;
	padding-top: 24px;
	border-top: 1px solid var(--er-border);
}
.er-article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.er-article__tags a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--er-border);
	color: var(--er-heading);
	font-size: var(--er-fs-small);
	text-decoration: none;
}
.er-article__tags a:hover { border-color: var(--er-accent); }