/* ==========================================================================
   Blog article detail (single-tomcamau_blog.php)
   Figma: VNF (Copy), node 7043:13896.

   Three bands: a full-width head, a narrow reading column with the by-line
   under it, and the related articles - which are the newsroom's list, styled
   in cards.css. Only what is specific to this page lives here.
   ========================================================================== */
.article {
	padding-block: var(--space-section) var(--space-4xl);
	background: var(--c-bg);
}

/* --- Head ----------------------------------------------------------------- */
.article__head > .container {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

.article__title {
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	font-size: var(--fs-h2);
	line-height: var(--lh-normal);
	text-align: center;
	text-transform: capitalize;
	color: var(--c-ink-pure);
}

.article__cover {
	--media-ratio: 1755 / 877;

	border-radius: var(--radius-md);
}

/* --- Body ------------------------------------------------------------------
   The reading column is narrower than the head on purpose - the design sets
   the cover full width and the text at 1000px. */
.article__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	max-width: calc(var(--measure-article) + var(--gutter) * 2);
	margin-block-start: var(--space-2xl);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.article__content {
	font-size: var(--fs-article);
	line-height: var(--lh-body);
	color: var(--c-ink-pure);
}

.article__content h2,
.article__content h3 {
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	font-size: var(--fs-zone);
	line-height: var(--lh-normal);
	color: var(--c-ink-pure);
	margin-block: var(--space-md);
}

/* Photos dropped into the running text. The design runs them the full width of
   the column; an image narrower than that is centred rather than stretched, so
   nothing is upscaled past its own pixels. */
.article__content img {
  width: 100%;
	margin-inline: auto;
	border-radius: var(--radius-card);
}

/* --- By-line ---------------------------------------------------------------
   Date, author and source. Mona Sans, the face the design uses for anything
   that reads as data. */
.article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm) var(--space-xl);
}

.article-meta__item {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	font-family: var(--font-num);
	font-weight: var(--fw-medium);
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
	color: var(--c-ink-meta);
	font-variation-settings: "wdth" 100;
}

.article-meta__item img {
	flex: none;
	width: 24px;
	height: 24px;
}

.article-meta__item a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--dur) var(--ease);
}

.article-meta__item a:hover { color: var(--c-primary); }