/**
 * Journal single-article layout (single.php).
 * Centered editorial: eyebrow + serif title + meta, contained-wide image,
 * single centered reading column. Uses the site type/color tokens.
 */

.article {
	--article-measure: 720px;   /* reading column width */
	--article-wide: 1040px;     /* contained-wide media width */
	/* All article text is the UOVO brand blue; type comes from the site tokens. */
	--article-ink: #0000C8;
	--article-muted: #0000C8;
	--article-blue: #0000C8;

	font-family: var(--sans, 'Manrope', "Helvetica Neue", sans-serif);
	font-weight: var(--medium, 500);
	color: var(--article-ink);
	padding: 3.5rem 1.5rem 5rem;
}

/* ---- Header ---------------------------------------------------------- */
.article__head {
	max-width: var(--article-measure);
	margin: 0 auto 2.75rem;
	text-align: center;
}

.article__eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--article-blue);
	text-decoration: none;
	margin-bottom: 1.25rem;
	transition: opacity 0.2s ease;
}
.article__eyebrow:hover { opacity: 0.65; }

.article__title {
	font-family: var(--serif, Hoefler, georgia, serif);
	font-weight: 400;
	font-size: clamp(2rem, 4.2vw, 3.25rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0 0 1.15rem;
	color: var(--article-ink);
}

.article__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.9rem;
	color: var(--article-muted);
}
.article__meta-sep { opacity: 0.5; }

/* ---- Featured media (contained-wide) -------------------------------- */
.article__hero,
.article__gallery {
	max-width: var(--article-wide);
	margin: 0 auto 3.25rem;
}

.article__hero img,
.article__figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.article__gallery {
	display: grid;
	gap: 1.25rem;
}
.article__figure { margin: 0; }

/* ---- Body (single centered reading column) -------------------------- */
.article__body {
	max-width: var(--article-measure);
	margin: 0 auto;
	font-size: var(--text-body, 22px);   /* match the site's body text size */
	font-weight: var(--medium, 500);
	line-height: 1.6;
	color: var(--article-ink);
}

.article__body > *:first-child { margin-top: 0; }
.article__body > *:last-child { margin-bottom: 0; }

.article__body p {
	margin: 0 0 1.4em;
}

/* Lead-in: gently emphasize the first paragraph */
.article__body > p:first-of-type {
	font-size: 1.15em;
	line-height: 1.5;
	color: var(--article-ink);
}

.article__body h2,
.article__body h3,
.article__body h4 {
	font-family: var(--serif, Hoefler, georgia, serif);
	font-weight: 400;
	line-height: 1.2;
	color: var(--article-ink);
	margin: 2.2em 0 0.65em;
}
.article__body h2 { font-size: 1.85rem; }
.article__body h3 { font-size: 1.45rem; }
.article__body h4 { font-size: 1.2rem; }

/* WordPress wraps heading text in <b>, which would render Hoefler bold. Keep it
   regular (400) inside all serif headings, the title, and the blockquote. */
.article__title b, .article__title strong,
.article__body h2 b, .article__body h2 strong,
.article__body h3 b, .article__body h3 strong,
.article__body h4 b, .article__body h4 strong,
.article__body blockquote b, .article__body blockquote strong {
	font-weight: 400;
}

.article__body a {
	color: var(--article-blue);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
	transition: opacity 0.2s ease;
}
.article__body a:hover { opacity: 0.7; }

.article__body ul,
.article__body ol {
	margin: 0 0 1.4em;
	padding-left: 1.4em;
}
.article__body li { margin: 0 0 0.5em; }

.article__body blockquote {
	margin: 2em 0;
	padding: 0.25em 0 0.25em 1.4rem;
	border-left: 3px solid var(--article-blue);
	font-family: var(--serif, Hoefler, georgia, serif);
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.4;
	color: var(--article-ink);
}
.article__body blockquote p { margin-bottom: 0.5em; }

/* Images/figures inside the body break out to the wide measure */
.article__body img,
.article__body figure {
	max-width: 100%;
	height: auto;
}
.article__body figure {
	margin: 2.5em 0;
}
.article__body figure img { border-radius: 6px; }
.article__body figcaption {
	margin-top: 0.6rem;
	font-size: 0.85rem;
	color: var(--article-muted);
	text-align: center;
}

.article__body hr {
	border: 0;
	height: 1px;
	background: rgba(0, 0, 0, 0.12);
	margin: 3em auto;
	max-width: 4rem;
}

/* ---- Responsive ------------------------------------------------------ */
/* Mobile — 900px matches the site-wide mobile breakpoint (mobile_0525.css), and
   1.2rem is the site's standard mobile gutter. */
@media (max-width: 900px) {
	.article { padding: 2.5rem 1.2rem 3.5rem; }
	.article__body blockquote { font-size: 1.25rem; }
	/* Body copy at 0.75× the site body size (~16.5px instead of 22px). The lead-in
	   paragraph (1.15em) scales with it. Headings are rem-based and keep their size. */
	.article__body { font-size: calc(var(--text-body, 22px) * 0.75); }
}