/* ==========================================================================
   Ovation — single article
   One page for everything that is read rather than browsed: a post (single.php)
   and a press release (press-release.php, which adds its own few parts in
   press-release.css). No comp exists for it. The header is the Articles title
   band's surface; under it sits one reading column, 760 wide.

   Two layers:
     .o-article  the page - band, photograph, column, footer
     .o-prose    the copy inside the column, whoever wrote it
   ========================================================================== */

.o-article {
	--o-article-band-y: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
	--o-article-overlap: 0px;

	padding-bottom: var(--o-section-y);
	background-color: var(--o-white);
	color: var(--o-ink);
}

/* --------------------------------------------------------------------------
   Header band
   Back link, kicker, title, meta - in that order, on the pale blue field.
   -------------------------------------------------------------------------- */
.o-article__band {
	padding-block: var(--o-article-band-y);
}

.o-article__back {
	margin: 0 0 var(--o-space-lg);
}

.o-article__back .o-textlink {
	color: var(--o-ink-mist);
	font-size: var(--o-fs-small);
}

.o-article__back .o-textlink:hover,
.o-article__back .o-textlink:focus-visible {
	color: var(--o-orange);
}

/* The chevrons point back, so they travel back on hover too. */
.o-article__back .o-textlink:hover .o-textlink__chevrons,
.o-article__back .o-textlink:focus-visible .o-textlink__chevrons {
	transform: translateX(-0.25em);
}

.o-article__eyebrow {
	font-size: var(--o-label-size);
	letter-spacing: 0.139em;
}

.o-article__title {
	margin: 1rem 0 0;
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-semibold);
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); /* 28 -> 40 */
	line-height: 1.15;
	text-transform: uppercase;
	text-wrap: balance;
}

.o-article__band .o-events__meta {
	margin-top: 1.25rem;
	color: var(--o-ink-mist);
	font-size: var(--o-fs-body-lg);
}

/* --------------------------------------------------------------------------
   Photograph
   Wider than the copy, and pulled up so it straddles the foot of the band:
   the band grows by the overlap, the figure climbs back over it.
   -------------------------------------------------------------------------- */
.o-article--has-hero {
	--o-article-overlap: clamp(2.5rem, 1rem + 6vw, 6rem);
}

.o-article--has-hero .o-article__band {
	padding-bottom: calc(var(--o-article-band-y) + var(--o-article-overlap));
}

.o-article__hero {
	position: relative;
	margin-top: calc(-1 * var(--o-article-overlap));
}

.o-article__figure {
	margin: 0;
}

.o-article__hero img {
	display: block;
	width: 100%;
	height: auto;
}

.o-article__caption {
	margin-top: 0.75rem;
	color: var(--o-ink-mist);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-small);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Reading column
   -------------------------------------------------------------------------- */
.o-article__body {
	margin-top: var(--o-space-xl);
}

/* --------------------------------------------------------------------------
   Copy
   Written for whatever the editor produces - the block editor's classes and
   bare HTML from the press CMS alike - so it selects elements, not blocks.
   -------------------------------------------------------------------------- */
.o-prose {
	color: var(--o-ink);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body-lg);
	line-height: var(--o-lh-loose);
	overflow-wrap: break-word;
}

.o-prose > :first-child {
	margin-top: 0;
}

.o-prose > :last-child {
	margin-bottom: 0;
}

.o-prose :is(p, ul, ol, dl, pre, table) {
	margin: 0 0 1.25em;
}

/* The opening paragraph, a step up: the standfirst the page otherwise lacks. */
.o-prose--lead > p:first-of-type {
	color: var(--o-navy);
	font-size: var(--o-fs-h4);
	font-weight: var(--o-fw-medium);
	line-height: 1.55;
}

/*
 * Headings. An H2 opens a new part of the article, so it brings a hairline
 * with it; H3 and H4 only label what follows.
 */
.o-prose :is(h2, h3, h4, h5, h6) {
	margin: 2em 0 0.5em;
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-semibold);
	line-height: var(--o-lh-heading);
	letter-spacing: 0;
	text-transform: none;
	text-wrap: balance;
}

.o-prose h2 {
	margin-top: var(--o-space-xl);
	padding-top: var(--o-space-lg);
	border-top: 1.5px solid var(--o-rule-cool);
	font-size: var(--o-fs-h3);
}

.o-prose > h2:first-child {
	padding-top: 0;
	border-top: 0;
}

.o-prose h3 {
	font-size: var(--o-fs-h4);
}

.o-prose :is(h4, h5, h6) {
	font-size: var(--o-fs-body);
	font-weight: var(--o-fw-medium);
	letter-spacing: var(--o-label-tracking-tight);
	text-transform: uppercase;
}

.o-prose :is(strong, b) {
	font-weight: var(--o-fw-semibold);
}

/* Navy with an orange underline: orange text alone is too faint on white. */
.o-prose a {
	color: var(--o-navy);
	text-decoration: underline;
	text-decoration-color: var(--o-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
	transition: color var(--o-transition);
}

.o-prose a:hover,
.o-prose a:focus-visible {
	color: var(--o-orange-dark);
}

.o-prose :is(ul, ol) {
	padding-inline-start: 1.25em;
}

.o-prose li {
	margin-bottom: 0.375em;
}

.o-prose li::marker {
	color: var(--o-orange);
}

.o-prose blockquote {
	margin: var(--o-space-lg) 0;
	padding: 0.25rem 0 0.25rem var(--o-space-md);
	border-left: 3px solid var(--o-orange);
	color: var(--o-navy);
	font-size: var(--o-fs-h4);
	font-weight: var(--o-fw-medium);
	line-height: 1.5;
}

.o-prose blockquote > :last-child {
	margin-bottom: 0;
}

.o-prose blockquote cite {
	display: block;
	margin-top: 0.75rem;
	color: var(--o-ink-mist);
	font-size: var(--o-fs-small);
	font-style: normal;
	font-weight: var(--o-fw-regular);
}

.o-prose :is(img, video, iframe) {
	max-width: 100%;
}

.o-prose img {
	height: auto;
}

.o-prose figure {
	margin: var(--o-space-lg) 0;
}

.o-prose figcaption {
	margin-top: 0.75rem;
	color: var(--o-ink-mist);
	font-size: var(--o-fs-small);
	line-height: 1.5;
}

.o-prose hr {
	height: 0;
	margin: var(--o-space-xl) 0;
	border: 0;
	border-top: 1.5px solid var(--o-rule-cool);
}

.o-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--o-fs-body);
}

.o-prose :is(th, td) {
	padding: 0.75rem 1rem 0.75rem 0;
	border-bottom: 1.5px solid var(--o-rule-cool);
	text-align: left;
	vertical-align: top;
}

.o-prose th {
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-size: var(--o-fs-small);
	font-weight: var(--o-fw-semibold);
	letter-spacing: var(--o-label-tracking-tight);
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Footer
   What to read next, then the way back to the list.
   -------------------------------------------------------------------------- */
.o-article__footer {
	margin-top: var(--o-space-xl);
	padding-top: var(--o-space-lg);
	border-top: 1.5px solid var(--o-rule-cool);
}

.o-article__footer .o-textlink {
	color: var(--o-navy);
	font-size: var(--o-fs-body);
}

.o-article__footer .o-textlink:hover,
.o-article__footer .o-textlink:focus-visible {
	color: var(--o-orange);
}

.o-article__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--o-space-lg);
	margin-bottom: var(--o-space-lg);
	padding-bottom: var(--o-space-lg);
	border-bottom: 1.5px solid var(--o-rule-cool);
}

.o-article__nav-link {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	color: var(--o-navy);
	text-decoration: none;
}

.o-article__nav-link--next {
	grid-column: 2;
	align-items: flex-end;
	text-align: right;
}

.o-article__nav-label {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--o-ink-mist);
	font-family: var(--o-font-ui);
	font-size: var(--o-fs-small);
	font-weight: var(--o-fw-medium);
	letter-spacing: var(--o-label-tracking-tight);
	text-transform: uppercase;
}

.o-article__nav-arrow {
	display: inline-block;
	transition: transform var(--o-transition);
}

.o-article__nav-title {
	font-family: var(--o-font-ui);
	font-size: var(--o-fs-body-lg);
	font-weight: var(--o-fw-semibold);
	line-height: 1.33;
	text-wrap: balance;
	transition: color var(--o-transition);
}

.o-article__nav-link:hover .o-article__nav-title,
.o-article__nav-link:focus-visible .o-article__nav-title {
	color: var(--o-orange-dark);
}

.o-article__nav-link--prev:hover .o-article__nav-arrow,
.o-article__nav-link--prev:focus-visible .o-article__nav-arrow {
	transform: translateX(-0.25em);
}

.o-article__nav-link--next:hover .o-article__nav-arrow,
.o-article__nav-link--next:focus-visible .o-article__nav-arrow {
	transform: translateX(0.25em);
}

/* Comments, where a post has them open, keep to the same column. */
.o-article + .o-comments {
	padding-bottom: var(--o-section-y);
}

/* Phones: previous over next, both reading from the left. */
@media (max-width: 599px) {
	.o-article__nav {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--o-space-md);
	}

	.o-article__nav-link--next {
		grid-column: 1;
		align-items: flex-start;
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.o-article__back .o-textlink:hover .o-textlink__chevrons,
	.o-article__back .o-textlink:focus-visible .o-textlink__chevrons,
	.o-article__nav-link:hover .o-article__nav-arrow,
	.o-article__nav-link:focus-visible .o-article__nav-arrow {
		transform: none;
	}
}