/**
 * Shared archive styles — Roster, Atlas (Routes), Journal index, Cards index.
 *
 * Loaded on:
 *   /roster (hj_aircraft archive)
 *   /roster/class/{slug} (hj_aircraft_class taxonomy archive)
 *   /routes (hj_route archive)
 *   /routes/region/{slug} (hj_region taxonomy archive)
 *
 * Sections in this file:
 *   1. Hero (cream/ink hero variants)
 *   2. Filter bar (sticky, with counts)
 *   3. Class / region section header
 *   4. Card grid + ac-card
 *   5. Summary table (sortable, dark surface)
 *   6. Signature inside advisor's note (cascade to existing styles)
 *   7. is-hidden utility
 *
 * Tokens come from main.css / theme.json.
 */

/* ============ 1. ARCHIVE HERO ============ */
.hj-roster-archive,
.hj-atlas-archive {
	background: var(--cream);
}

.hj-roster-hero,
.hj-atlas-hero {
	padding: 100px 0 140px;
	position: relative;
	overflow: hidden;
}
.hj-roster-hero::before,
.hj-atlas-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 25% 35%, rgba(168, 139, 92, 0.08) 0%, transparent 45%),
		radial-gradient(circle at 80% 75%, rgba(107, 40, 56, 0.06) 0%, transparent 50%);
	pointer-events: none;
}
.hj-roster-hero .hj-cta-row,
.hj-atlas-hero .hj-cta-row {
	margin: 32px 0 64px;
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

/* ============ 2. FILTER BAR ============ */
.hj-filter-bar {
	position: sticky;
	top: 80px;
	background: var(--cream-soft);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	z-index: 90;
}
.hj-filter-bar__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 56px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 40px;
}
.hj-filter-bar__label {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--oxblood);
	font-weight: 700;
	padding: 22px 0;
	white-space: nowrap;
}
.hj-filter-bar__buttons {
	display: flex;
	gap: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.hj-filter-bar__buttons::-webkit-scrollbar { display: none; }
.hj-filter-btn {
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ink-mute);
	background: transparent;
	border: none;
	padding: 22px 24px;
	cursor: pointer;
	white-space: nowrap;
	position: relative;
	transition: color 0.2s;
	font-variant-numeric: tabular-nums;
}
.hj-filter-btn:hover { color: var(--ink); }
.hj-filter-btn.is-active { color: var(--ink); }
.hj-filter-btn.is-active::after {
	content: "";
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: -1px;
	height: 2px;
	background: var(--oxblood);
}
.hj-filter-btn__roman {
	font-family: var(--display);
	font-style: italic;
	font-size: 13px;
	color: var(--oxblood);
	margin-right: 8px;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
}
.hj-filter-btn__count {
	display: inline-block;
	margin-left: 8px;
	font-size: 11px;
	color: var(--gold);
	font-weight: 700;
	letter-spacing: 0.1em;
}
.hj-filter-bar__meta {
	font-family: var(--display);
	font-style: italic;
	font-size: 14px;
	color: var(--ink-mute);
	padding: 22px 0;
	white-space: nowrap;
}
.hj-filter-bar__meta strong {
	font-family: var(--display);
	font-style: normal;
	font-weight: 500;
	color: var(--ink);
}

@media (max-width: 900px) {
	.hj-filter-bar__inner {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 0 24px;
	}
	.hj-filter-bar__label,
	.hj-filter-bar__meta {
		padding: 16px 0 0;
	}
}

/* ============ 3. ROSTER / ATLAS GROUPED SECTION ============ */
.hj-roster,
.hj-atlas {
	padding: 80px 0 0;
}
.hj-roster .hj-container,
.hj-atlas .hj-container {
	max-width: 1440px;
}

.class-section {
	margin-bottom: 100px;
	transition: opacity 0.3s var(--ease);
}
.class-section.is-hidden { display: none; }

.class-section__head {
	display: grid;
	grid-template-columns: 80px 1fr 280px;
	gap: 40px;
	align-items: end;
	margin-bottom: 56px;
	padding-bottom: 28px;
	border-bottom: 2px solid var(--oxblood);
}
.class-section__roman {
	font-family: var(--display);
	font-style: italic;
	font-size: 72px;
	font-weight: 200;
	color: var(--oxblood);
	line-height: 0.85;
}
.class-section__title-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.class-section__eyebrow {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--oxblood);
	font-weight: 700;
}
.class-section__title {
	font-family: var(--display);
	font-variation-settings: "opsz" 144;
	font-size: clamp(36px, 4.5vw, 56px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0;
}
.class-section__title em {
	font-style: italic;
	color: var(--oxblood);
	font-weight: 300;
}
.class-section__summary {
	font-family: var(--display);
	font-style: italic;
	font-size: 17px;
	line-height: 1.55;
	color: var(--ink-mute);
	font-weight: 300;
}

@media (max-width: 900px) {
	.class-section__head {
		grid-template-columns: 1fr;
		gap: 16px;
		align-items: start;
	}
	.class-section__roman { font-size: 48px; }
}

/* ============ 4. CARD GRID + ac-card ============ */
.card-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-top: 1px solid var(--rule);
	border-left: 1px solid var(--rule);
}
@media (max-width: 1100px) {
	.card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.card-grid { grid-template-columns: 1fr; }
}

.ac-card {
	background: var(--cream);
	padding: 36px 32px;
	border-right: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	position: relative;
	transition: background 0.3s var(--ease);
}
.ac-card:hover { background: var(--cream-soft); }
.ac-card.is-hidden { display: none; }
.ac-card.is-featured { background: var(--ivory); }
.ac-card.is-featured::before {
	content: "— Standing recommendation";
	position: absolute;
	top: 14px;
	right: 14px;
	font-family: var(--sans);
	font-size: 9px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--oxblood);
	font-weight: 700;
}

.ac-card__eyebrow {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ink-mute);
	font-weight: 700;
	margin-bottom: 12px;
}
.ac-card__silhouette {
	margin: 16px 0 24px;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ac-card__silhouette svg {
	width: 100%;
	max-width: 240px;
	height: auto;
	fill: var(--ink);
	opacity: 0.72;
}
.ac-card__silhouette--placeholder svg { opacity: 0.32; }

.ac-card__manuf {
	font-family: var(--display);
	font-size: 15px;
	font-weight: 400;
	color: var(--ink-mute);
	letter-spacing: 0.02em;
	margin-bottom: 4px;
}
.ac-card__model {
	font-family: var(--display);
	font-variation-settings: "opsz" 96;
	font-size: 32px;
	font-weight: 400;
	line-height: 1;
	color: var(--ink);
	margin: 0 0 20px 0;
	letter-spacing: -0.01em;
}
.ac-card__model em {
	font-style: italic;
	color: var(--oxblood);
	font-weight: 400;
}

.ac-card__specs {
	list-style: none;
	padding: 16px 0;
	margin: 0 0 20px 0;
	border-top: 1px solid var(--rule-soft);
	border-bottom: 1px solid var(--rule-soft);
}
.ac-card__specs li {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	padding: 5px 0;
	gap: 12px;
}
.ac-card__specs .k {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ink-mute);
	font-weight: 700;
}
.ac-card__specs .v {
	font-family: var(--serif);
	font-size: 16px;
	color: var(--ink);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.ac-card__price-block { margin-top: auto; padding-top: 12px; }
.ac-card__price-label {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--oxblood);
	font-weight: 700;
	margin-bottom: 6px;
}
.ac-card__price {
	font-family: var(--display);
	font-size: 22px;
	font-weight: 400;
	color: var(--ink);
	margin-bottom: 4px;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.005em;
}
.ac-card__price em {
	font-style: italic;
	color: var(--oxblood);
	font-weight: 400;
}
.ac-card__price-unit {
	font-family: var(--serif);
	font-style: italic;
	font-size: 13px;
	color: var(--ink-mute);
}
.ac-card__link {
	margin-top: 20px;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--oxblood);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ac-card__link::after {
	content: "→";
	font-size: 14px;
	transition: transform 0.25s var(--ease);
}
.ac-card:hover .ac-card__link::after { transform: translateX(6px); }

/* ============ 5. SUMMARY TABLE ============ */
.hj-roster-summary { background: var(--ivory); padding: 120px 0; }
.hj-roster-summary .hj-container { max-width: 1440px; }
.hj-roster-summary .hj-section-lede {
	font-family: var(--display);
	font-style: italic;
	font-size: 19px;
	line-height: 1.55;
	color: var(--ink-mute);
	font-weight: 300;
	margin: 0 0 48px;
	max-width: 720px;
}

.hj-table-wrap {
	background: var(--ink);
	overflow-x: auto;
	border-top: 1px solid var(--gold);
	border-bottom: 1px solid var(--gold);
}
.hj-sortable {
	width: 100%;
	min-width: 1100px;
	border-collapse: collapse;
	font-family: var(--serif);
}
.hj-sortable thead { background: var(--ink); }
.hj-sortable th {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 22px 20px;
	color: var(--gold);
	border-bottom: 1px solid var(--gold);
	text-align: left;
	background: var(--ink);
	position: sticky;
	top: 80px;
	z-index: 5;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	transition: color 0.2s;
}
.hj-sortable th:hover,
.hj-sortable th:focus-visible { color: var(--cream); outline: none; }
.hj-sortable th.r { text-align: right; }
.hj-sortable th[data-sort]::after {
	content: "⇅";
	display: inline-block;
	margin-left: 6px;
	opacity: 0.4;
	font-size: 10px;
	letter-spacing: 0;
}
.hj-sortable th.is-sort-asc::after  { content: "↑"; opacity: 1; color: var(--cream); }
.hj-sortable th.is-sort-desc::after { content: "↓"; opacity: 1; color: var(--cream); }

.hj-sortable td {
	padding: 18px 20px;
	border-bottom: 1px solid var(--rule-dark);
	color: var(--cream);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	vertical-align: baseline;
	line-height: 1.4;
}
.hj-sortable td.r { text-align: right; }
.hj-sortable tbody tr { transition: background 0.2s; }
.hj-sortable tbody tr:hover { background: rgba(168, 139, 92, 0.06); }
.hj-sortable tbody tr.is-hidden { display: none; }
.hj-sortable tbody tr:last-child td { border-bottom: none; }

.hj-roster-table .rt-pos {
	font-family: var(--display);
	font-style: italic;
	color: var(--gold);
	width: 60px;
	font-weight: 300;
}
.hj-roster-table .rt-class {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
	font-weight: 700;
	width: 130px;
}
.hj-roster-table .rt-model {
	font-family: var(--display);
	font-size: 17px;
	font-weight: 500;
	color: var(--cream);
	width: 260px;
}
.hj-roster-table .rt-model a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s;
}
.hj-roster-table .rt-model a:hover { border-color: var(--gold); }
.hj-roster-table .rt-model .manuf {
	font-family: var(--display);
	font-size: 13px;
	color: var(--cream-mute);
	font-style: italic;
	font-weight: 400;
	display: block;
	margin-bottom: 2px;
}
.hj-roster-table .rt-rate {
	font-family: var(--display);
	font-size: 16px;
	font-weight: 500;
	color: var(--cream);
}
.hj-roster-table .rt-rate em {
	font-style: italic;
	color: var(--gold);
	font-weight: 400;
}

.hj-sortable tfoot td {
	padding: 22px 20px;
	font-family: var(--display);
	font-style: italic;
	font-size: 14px;
	color: var(--cream-mute);
	border-top: 1px solid var(--gold);
	border-bottom: none;
	background: var(--ink-deep);
}

/* ============ 5b. ATLAS — region section + route card ============ */
/*
 * Re-uses the .class-section macro from §3 by aliasing visually; the
 * archive template emits .region-section / .region-section__... so we
 * mirror the styles here. (We could DRY this up later — for now,
 * explicit is clearer than clever.)
 */
.region-section {
	margin-bottom: 100px;
	transition: opacity 0.3s var(--ease);
}
.region-section.is-hidden { display: none; }

.region-section__head {
	display: grid;
	grid-template-columns: 80px 1fr 280px;
	gap: 40px;
	align-items: end;
	margin-bottom: 56px;
	padding-bottom: 28px;
	border-bottom: 2px solid var(--oxblood);
}
.region-section__roman {
	font-family: var(--display);
	font-style: italic;
	font-size: 72px;
	font-weight: 200;
	color: var(--oxblood);
	line-height: 0.85;
}
.region-section__title-block { display: flex; flex-direction: column; gap: 8px; }
.region-section__eyebrow {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--oxblood);
	font-weight: 700;
}
.region-section__title {
	font-family: var(--display);
	font-variation-settings: "opsz" 144;
	font-size: clamp(36px, 4.5vw, 56px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0;
}
.region-section__title em {
	font-style: italic;
	color: var(--oxblood);
	font-weight: 300;
}
.region-section__summary {
	font-family: var(--display);
	font-style: italic;
	font-size: 17px;
	line-height: 1.55;
	color: var(--ink-mute);
	font-weight: 300;
}
@media (max-width: 900px) {
	.region-section__head {
		grid-template-columns: 1fr;
		gap: 16px;
		align-items: start;
	}
	.region-section__roman { font-size: 48px; }
}

.route-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-top: 1px solid var(--rule);
	border-left: 1px solid var(--rule);
}
@media (max-width: 1100px) { .route-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .route-grid { grid-template-columns: 1fr; } }

.route-card {
	background: var(--cream);
	padding: 32px 28px 28px;
	border-right: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	position: relative;
	transition: background 0.3s var(--ease);
}
.route-card:hover { background: var(--cream-soft); }
.route-card.is-hidden { display: none; }
.route-card.is-featured { background: var(--ivory); }
.route-card.is-featured::before {
	content: "— Standing recommendation";
	position: absolute;
	top: 14px;
	right: 14px;
	font-family: var(--sans);
	font-size: 9px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--oxblood);
	font-weight: 700;
}
.route-card.is-transatlantic::after {
	content: "— Transatlantic";
	position: absolute;
	top: 14px;
	right: 14px;
	font-family: var(--sans);
	font-size: 9px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gold);
	font-weight: 700;
}

.route-card__eyebrow {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ink-mute);
	font-weight: 700;
	margin-bottom: 24px;
}

/* Axis: origin → destination with dotted connector. */
.route-card__axis { margin: 0 0 20px; padding: 12px 0; }
.route-card__point {
	position: relative;
	padding-left: 28px;
	padding-top: 4px;
	padding-bottom: 4px;
}
.route-card__point::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 12px;
	width: 9px;
	height: 9px;
	background: var(--oxblood);
	border: 1px solid var(--oxblood);
	z-index: 2;
}
.route-card__point.is-origin::before { background: transparent; }
.route-card__code {
	font-family: var(--display);
	font-variation-settings: "opsz" 96;
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
	color: var(--ink);
	letter-spacing: 0.02em;
	margin-bottom: 4px;
	font-variant-numeric: tabular-nums;
}
.route-card__city {
	font-family: var(--display);
	font-size: 16px;
	font-weight: 400;
	color: var(--ink);
	margin-bottom: 2px;
}
.route-card__airport {
	font-family: var(--serif);
	font-style: italic;
	font-size: 13px;
	color: var(--ink-mute);
}
.route-card__line {
	position: relative;
	padding-left: 28px;
	padding-top: 14px;
	padding-bottom: 14px;
}
.route-card__line::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: repeating-linear-gradient(
		to bottom,
		var(--oxblood) 0,
		var(--oxblood) 3px,
		transparent 3px,
		transparent 7px
	);
	opacity: 0.55;
}
.route-card__line-spec {
	font-family: var(--serif);
	font-style: italic;
	font-size: 13px;
	color: var(--ink-mute);
	line-height: 1.5;
	padding-left: 4px;
}
.route-card__line-spec strong {
	font-family: var(--display);
	font-style: normal;
	font-weight: 500;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.route-card__class-row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	padding: 12px 0;
	border-top: 1px solid var(--rule-soft);
	border-bottom: 1px solid var(--rule-soft);
	margin-bottom: 18px;
}
.route-card__class-row .k {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ink-mute);
	font-weight: 700;
}
.route-card__class-row .v {
	font-family: var(--serif);
	font-size: 15px;
	color: var(--ink);
	font-weight: 500;
}
.route-card__price-block { margin-top: auto; padding-top: 8px; }
.route-card__price-label {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--oxblood);
	font-weight: 700;
	margin-bottom: 6px;
}
.route-card__price {
	font-family: var(--display);
	font-size: 22px;
	font-weight: 400;
	color: var(--ink);
	margin-bottom: 4px;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.005em;
}
.route-card__price em {
	font-style: italic;
	color: var(--oxblood);
	font-weight: 400;
}
.route-card__price-unit {
	font-family: var(--serif);
	font-style: italic;
	font-size: 13px;
	color: var(--ink-mute);
}
.route-card__link {
	margin-top: 18px;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--oxblood);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.route-card__link::after {
	content: "→";
	font-size: 14px;
	transition: transform 0.25s var(--ease);
}
.route-card:hover .route-card__link::after { transform: translateX(6px); }

/* Atlas summary table: same chrome as the Roster table; tweaks below. */
.hj-atlas-summary { background: var(--ivory); padding: 120px 0; }
.hj-atlas-summary .hj-container { max-width: 1440px; }
.hj-atlas-summary .hj-section-lede {
	font-family: var(--display);
	font-style: italic;
	font-size: 19px;
	line-height: 1.55;
	color: var(--ink-mute);
	font-weight: 300;
	margin: 0 0 48px;
	max-width: 720px;
}
.hj-atlas-table .rt-pos {
	font-family: var(--display);
	font-style: italic;
	color: var(--gold);
	width: 60px;
	font-weight: 300;
}
.hj-atlas-table .rt-region {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
	font-weight: 700;
}
.hj-atlas-table .rt-route a {
	font-family: var(--display);
	font-size: 17px;
	color: var(--cream);
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s;
}
.hj-atlas-table .rt-route a:hover { border-bottom-color: var(--gold); }
.hj-atlas-table .rt-route .rt-codes {
	display: block;
	font-family: var(--sans);
	font-size: 11px;
	color: var(--cream-mute);
	font-weight: 600;
	letter-spacing: 0.12em;
	margin-bottom: 4px;
	font-variant-numeric: tabular-nums;
}
.hj-atlas-table .rt-price {
	font-family: var(--display);
	font-size: 16px;
	font-weight: 500;
	color: var(--cream);
}
.hj-atlas-table .rt-price em {
	font-style: italic;
	color: var(--gold);
	font-weight: 400;
}

/* ============ 6. SIGNATURE (inside advisor's note) ============ */
.hj-advisor-section .hj-advisor-note {
	max-width: 860px;
	margin: 0 auto;
}
.hj-signature {
	padding-top: 28px;
	margin-top: 32px;
	border-top: 1px solid var(--rule-dark);
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cream);
	font-weight: 700;
}
.hj-signature__name {
	color: var(--cream);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s;
}
a.hj-signature__name:hover { border-bottom-color: var(--gold); }
.hj-signature__role {
	display: block;
	font-family: var(--serif);
	font-style: italic;
	color: var(--cream-mute);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0.01em;
	font-size: 15px;
	margin-top: 6px;
}

/* When the advisor section is on a cream surface, recolour accordingly. */
.hj-section--cream-soft .hj-signature {
	color: var(--ink);
	border-top-color: var(--rule-soft);
}
.hj-section--cream-soft .hj-signature__name { color: var(--ink); }
.hj-section--cream-soft .hj-signature__role { color: var(--ink-mute); }

/* ============ 7. JOURNAL ARCHIVE ============
 *
 * Layout for /journal (CollectionPage):
 *   .hj-journal-archive            (root)
 *     .hj-journal-masthead         (cream-soft hero with volume/issue line)
 *     .hj-featured-article          (cover-style hero for the featured entry)
 *     .hj-filter-bar               (shared)
 *     .hj-journal-latest           (Section I — most-recent grid, with one large lead)
 *     .hj-journal-sections          (Section II — one .cat-block per section)
 *       .cat-block                 (head + 4-card grid)
 *     .hj-journal-contributors     (Section III — correspondent monograms)
 *     advisor's note + quote CTA   (shared partials)
 *
 * Article cards reuse the .article-card class from the prototype.
 */
.hj-journal-archive { background: var(--cream); }

/* --- Masthead --- */
.hj-journal-masthead { padding: 80px 0 60px; }
.hj-journal-masthead__meta {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 24px;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--oxblood);
	font-weight: 700;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--rule);
	margin-bottom: 40px;
}
.hj-journal-masthead__meta .left   { justify-self: start; }
.hj-journal-masthead__meta .right  { justify-self: end; }
.hj-journal-masthead__meta .centre {
	font-family: var(--display);
	font-style: italic;
	color: var(--ink-mute);
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
	font-weight: 400;
}
.hj-journal-masthead__meta .dot { color: var(--gold); }
.hj-journal-masthead__title {
	margin: 0 0 24px;
	font-size: clamp(56px, 9vw, 120px);
	font-weight: 200;
	line-height: 0.92;
	letter-spacing: -0.03em;
	color: var(--ink);
}
.hj-journal-masthead__title em {
	font-style: italic;
	color: var(--oxblood);
	font-weight: 200;
}
.hj-journal-masthead__sub {
	max-width: 760px;
	color: var(--ink-mute);
}

/* --- Featured (cover) article --- */
.hj-featured-article { padding: 60px 0 80px; }
.hj-featured-article__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--page-pad);
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 64px;
	align-items: stretch;
}
@media (max-width: 900px) {
	.hj-featured-article__inner { grid-template-columns: 1fr; gap: 32px; }
}

.hj-featured-article__cover {
	background: var(--ink);
	color: var(--cream);
	padding: 48px;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 520px;
}
.hj-featured-article__cover::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(243, 234, 213, 0.025) 1px, transparent 1px);
	background-size: 4px 4px;
	pointer-events: none;
}
.hj-featured-article__cover::after {
	content: "";
	position: absolute;
	bottom: -40%;
	right: -20%;
	width: 80%;
	height: 80%;
	background: radial-gradient(circle, rgba(168, 139, 92, 0.12) 0%, transparent 60%);
	pointer-events: none;
}
.hj-featured-article__cover .cover-top   { position: relative; z-index: 2; }
.hj-featured-article__cover .cover-art   { position: relative; z-index: 2; text-align: center; margin: 24px 0; }
.hj-featured-article__cover .cover-bottom{ position: relative; z-index: 2; padding-top: 20px; border-top: 1px solid var(--rule-dark); }
.hj-featured-article__cover .mast {
	font-family: var(--display);
	font-size: 14px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--gold);
	font-weight: 500;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--gold);
	margin-bottom: 16px;
}
.hj-featured-article__cover .rubric {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--cream-mute);
	font-weight: 700;
}
.hj-featured-article__cover .cover-letter {
	font-family: var(--display);
	font-style: italic;
	font-variation-settings: "opsz" 144;
	font-size: clamp(160px, 20vw, 260px);
	font-weight: 200;
	line-height: 0.8;
	color: var(--gold);
	display: block;
	letter-spacing: -0.04em;
}
.hj-featured-article__cover .cover-date {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gold);
	font-weight: 700;
}
.hj-featured-article__cover .cover-author {
	font-family: var(--display);
	font-style: italic;
	font-size: 22px;
	color: var(--cream);
	margin-top: 8px;
	font-weight: 300;
}

.hj-featured-article__meta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 16px 0;
}
.hj-featured-article__meta .eyebrow {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--oxblood);
	font-weight: 700;
	margin-bottom: 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--rule);
	align-self: flex-start;
	padding-right: 24px;
}
.hj-featured-article__meta .title {
	font-family: var(--display);
	font-variation-settings: "opsz" 144;
	font-size: clamp(40px, 5vw, 72px);
	font-weight: 300;
	line-height: 0.98;
	letter-spacing: -0.025em;
	margin: 0 0 24px;
	color: var(--ink);
}
.hj-featured-article__meta .title em {
	font-style: italic;
	color: var(--oxblood);
	font-weight: 300;
}
.hj-featured-article__meta .dek {
	font-family: var(--serif);
	font-size: 18px;
	line-height: 1.55;
	color: var(--ink-mute);
	margin: 0 0 32px;
	max-width: 60ch;
}
.hj-featured-article__meta .byline {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 32px;
}
.hj-featured-article__meta .byline-monogram {
	font-family: var(--display);
	font-style: italic;
	font-size: 26px;
	color: var(--oxblood);
	text-decoration: none;
	border: 1px solid var(--gold);
	padding: 12px 14px;
	letter-spacing: 0.02em;
	background: var(--cream-soft);
	transition: background 0.2s, color 0.2s;
}
.hj-featured-article__meta .byline-monogram:hover {
	background: var(--ink);
	color: var(--gold);
}
.hj-featured-article__meta .byline-text .name {
	font-family: var(--display);
	font-size: 17px;
	color: var(--ink);
}
.hj-featured-article__meta .byline-text .role {
	font-family: var(--serif);
	font-style: italic;
	font-size: 13px;
	color: var(--ink-mute);
}

/* --- The Latest / By Section: shared article-grid + article-card --- */
.hj-journal-latest .hj-container,
.hj-journal-sections .hj-container { max-width: 1440px; }
.hj-journal-latest    { padding-top: 60px; padding-bottom: 40px; }
.hj-journal-sections  { padding-top: 60px; padding-bottom: 80px; }
.hj-journal-latest .hj-section-lede,
.hj-journal-sections .hj-section-lede {
	font-family: var(--display);
	font-style: italic;
	font-size: 18px;
	line-height: 1.5;
	color: var(--ink-mute);
	font-weight: 300;
	margin: 0 0 40px;
	max-width: 760px;
}

.article-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-top: 1px solid var(--rule);
	border-left: 1px solid var(--rule);
}
.article-grid--latest {
	grid-template-columns: 2fr 1fr 1fr;
	grid-auto-rows: minmax(220px, auto);
}
@media (max-width: 1100px) {
	.article-grid          { grid-template-columns: repeat(2, 1fr); }
	.article-grid--latest  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.article-grid, .article-grid--latest { grid-template-columns: 1fr; }
}

.article-card {
	background: var(--cream);
	padding: 32px 28px;
	border-right: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	transition: background 0.3s var(--ease);
	position: relative;
}
.article-card:hover { background: var(--cream-soft); }
.article-card.is-hidden { display: none; }
.article-card.is-large {
	grid-column: 1 / span 1;
	grid-row: 1 / span 2;
	background: var(--ivory);
	padding: 56px 48px;
}
@media (max-width: 1100px) {
	.article-card.is-large { grid-column: 1 / -1; grid-row: auto; padding: 40px 28px; }
}
.article-card .ac-eyebrow {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ink-mute);
	font-weight: 700;
	margin-bottom: 16px;
}
.article-card .ac-cap {
	font-family: var(--display);
	font-style: italic;
	font-variation-settings: "opsz" 144;
	font-size: 60px;
	line-height: 0.9;
	color: var(--gold);
	font-weight: 200;
	margin-bottom: 12px;
}
.article-card.is-large .ac-cap {
	font-size: clamp(96px, 12vw, 144px);
}
.article-card .ac-title {
	font-family: var(--display);
	font-variation-settings: "opsz" 96;
	font-size: 24px;
	line-height: 1.1;
	color: var(--ink);
	margin: 0 0 16px;
	font-weight: 400;
	letter-spacing: -0.01em;
}
.article-card.is-large .ac-title {
	font-size: clamp(32px, 3vw, 44px);
	line-height: 1.05;
}
.article-card .ac-title em {
	font-style: italic;
	color: var(--oxblood);
	font-weight: 400;
}
.article-card .ac-dek {
	font-family: var(--serif);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink-mute);
	margin: 0 0 24px;
	flex: 1;
}
.article-card.is-large .ac-dek {
	font-size: 17px;
	line-height: 1.55;
}
.article-card .ac-meta {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--rule-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ink-mute);
}
.article-card .ac-byline { color: var(--oxblood); }

/* --- Cat-block (By Section) --- */
.cat-block { margin-bottom: 80px; }
.cat-block.is-hidden { display: none; }
.cat-block__head {
	display: grid;
	grid-template-columns: 80px 1fr 320px;
	gap: 32px;
	align-items: end;
	margin-bottom: 32px;
	padding-bottom: 20px;
	border-bottom: 2px solid var(--oxblood);
}
@media (max-width: 900px) {
	.cat-block__head { grid-template-columns: 1fr; gap: 14px; align-items: start; }
}
.cat-block__num {
	font-family: var(--display);
	font-style: italic;
	font-size: 60px;
	font-weight: 200;
	color: var(--oxblood);
	line-height: 0.85;
}
.cat-block__title-block { display: flex; flex-direction: column; gap: 6px; }
.cat-block__eyebrow {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--oxblood);
	font-weight: 700;
}
.cat-block__name {
	font-family: var(--display);
	font-variation-settings: "opsz" 144;
	font-size: clamp(28px, 3.5vw, 44px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0;
}
.cat-block__name em {
	font-style: italic;
	color: var(--oxblood);
	font-weight: 300;
}
.cat-block__desc {
	font-family: var(--display);
	font-style: italic;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink-mute);
	font-weight: 300;
}

/* --- Contributors --- */
.hj-journal-contributors { padding: 80px 0; }
.hj-journal-contributors .hj-container { max-width: 1440px; }
.hj-journal-contributors .hj-section-lede {
	font-family: var(--display);
	font-style: italic;
	font-size: 18px;
	line-height: 1.5;
	color: var(--ink-mute);
	margin: 0 0 40px;
	font-weight: 300;
	max-width: 720px;
}
.contributors-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-top: 1px solid var(--rule);
	border-left: 1px solid var(--rule);
}
@media (max-width: 900px) { .contributors-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .contributors-grid { grid-template-columns: 1fr; } }

.contributor-card {
	display: flex;
	flex-direction: column;
	padding: 32px 28px;
	background: var(--cream);
	border-right: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	text-decoration: none;
	color: inherit;
	transition: background 0.2s;
}
.contributor-card:hover { background: var(--cream-soft); }
.contributor-card__monogram {
	font-family: var(--display);
	font-style: italic;
	font-size: 42px;
	color: var(--oxblood);
	font-weight: 300;
	margin-bottom: 16px;
	letter-spacing: 0.02em;
}
.contributor-card__name {
	font-family: var(--display);
	font-size: 22px;
	font-weight: 400;
	color: var(--ink);
	margin-bottom: 6px;
}
.contributor-card__name em {
	font-style: italic;
	color: var(--oxblood);
	font-weight: 400;
}
.contributor-card__role {
	font-family: var(--serif);
	font-style: italic;
	font-size: 14px;
	color: var(--ink-mute);
	line-height: 1.5;
	flex: 1;
	margin-bottom: 16px;
}
.contributor-card__count {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
	font-weight: 600;
}

/* ============ JOURNAL CATEGORY ARCHIVE (/journal/{section}) ============ */
/* Deliberately light: editorial header + rule-separated text list. */
.hj-jcat-header { text-align: left; padding-top: var(--space-7); padding-bottom: var(--space-6); }
.hj-jcat-header__eyebrow {
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--gold);
	margin-bottom: 20px;
}
.hj-jcat-header__title {
	font-family: var(--display);
	font-size: clamp(2.4rem, 1.4rem + 3vw, 3.75rem);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0 0 24px;
}
.hj-jcat-header__title em { font-style: italic; color: var(--oxblood); font-weight: 300; }
.hj-jcat-header__summary {
	font-family: var(--serif);
	font-size: 19px;
	line-height: 1.6;
	color: var(--ink-mute);
	max-width: 52ch;
	margin: 0 0 24px;
}
.hj-jcat-header__count {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ink-mute);
}

.hj-jcat-list-section { padding-top: var(--space-6); padding-bottom: var(--space-7); }
.hj-jcat-list { list-style: none; margin: 0; padding: 0; }
.hj-jcat-item { border-top: 1px solid var(--rule); }
.hj-jcat-item:last-child { border-bottom: 1px solid var(--rule); }
.hj-jcat-item__link {
	display: block;
	padding: 32px 0;
	text-decoration: none;
	color: inherit;
	transition: padding-left var(--dur-fast) var(--ease);
}
.hj-jcat-item__link:hover { padding-left: 12px; }
.hj-jcat-item__meta {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ink-mute);
	margin-bottom: 12px;
}
.hj-jcat-item__subcat { color: var(--gold); }
.hj-jcat-item__title {
	font-family: var(--display);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0 0 12px;
	transition: color var(--dur-fast) ease;
}
.hj-jcat-item__title em { font-style: italic; color: var(--oxblood); font-weight: 400; }
.hj-jcat-item__link:hover .hj-jcat-item__title { color: var(--oxblood); }
.hj-jcat-item__dek {
	font-family: var(--serif);
	font-style: italic;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink-mute);
	max-width: 60ch;
	margin: 0 0 14px;
}
.hj-jcat-item__byline {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--gold);
}
.hj-jcat-empty {
	font-family: var(--serif);
	font-style: italic;
	font-size: 19px;
	color: var(--ink-mute);
	padding: 40px 0;
}
.hj-jcat-empty a { color: var(--oxblood); border-bottom: 1px solid currentColor; }

.hj-jcat-pagination { margin-top: 48px; }
.hj-jcat-pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.hj-jcat-pagination a,
.hj-jcat-pagination span {
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 10px 16px;
	border: 1px solid var(--rule);
	color: var(--ink);
}
.hj-jcat-pagination a:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.hj-jcat-pagination .current { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ============ 8. UTILITIES ============ */
.is-hidden { display: none !important; }