/* Shared editorial cards for the Journal archive and related-story grid. */
.marielco-journal-card { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.marielco-journal-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #f7f7f7;
	color: #242424;
}
.marielco-journal-card__image,
.marielco-journal-card__placeholder { display: block; width: 100%; height: 100%; }
.marielco-journal-card__image { object-fit: cover; transition: transform 400ms ease; }
.marielco-journal-card__placeholder { display: grid; place-items: center; color: #767676; font-size: 12px; letter-spacing: .22em; }
.marielco-journal-card__media:focus-visible { outline: 1px solid currentColor; outline-offset: -3px; }
.marielco-journal-card__content {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	padding: 24px var(--marielco-journal-gutter) 16px;
	text-align: center;
}
.marielco-journal-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 16px;
	color: #767676;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.marielco-journal-card__meta time { white-space: nowrap; }
.marielco-journal-card__title {
	margin: 16px 0 12px;
	font-size: 20px;
	font-weight: 400;
	/* A 28px line grid keeps cloned 1px strokes consistent at display scales. */
	line-height: 1.4;
	overflow-wrap: anywhere;
	text-wrap: balance;
}
.marielco-journal-card__title .marielco-journal-link {
	--marielco-link-rest: #242424;
	--marielco-link-ink: #242424;
}
.marielco-journal-card__read {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: auto;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.marielco-journal-card :is(.marielco-journal-card__title a,.marielco-journal-card__meta a,.marielco-journal-card__read):focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
	.marielco-journal-card__media:hover .marielco-journal-card__image { transform: scale(1.018); }
}
@media (max-width: 768.98px) {
	.marielco-journal-card__content { padding-block: 20px 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.marielco-journal-card__image { transition: none; transform: none; }
	.marielco-journal-card__media:hover .marielco-journal-card__image { transform: none; }
}