/* ==========================================================================
   OIM — Blog / Press listing template
   Reproduces "Article Listing - Blog.dc.html" per Marks Media handoff 09.
   Tokens mirror 00-Global-Design-System.md. Prefix: .oim-bl-

   All markup is emitted by the plugin's own shortcodes, so nothing here
   depends on Elementor container classes surviving a template import.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens.

   Each token prefers an Elementor Global and falls back to the approved hex,
   so changing a Global in Site Settings → Design System propagates through
   every template here instantly — and nothing breaks if the Globals are
   unset or the plugin runs without Elementor.

   Swap the --e-global-* references if the site's Globals are mapped to
   different slots; custom Globals use hashed ids like --e-global-color-a1b2c3d.
   -------------------------------------------------------------------------- */

:root,
.oim-bl-root,
.oim-nr-root,
.oim-ar-root {
	/* Brand + text */
	--oim-bl-blue: var(#1c77b7);
	--oim-bl-blue-hover: var(--e-global-color-oim-blue-hover, #155a89);
	--oim-bl-ink: var(#191c1e);
	--oim-bl-body: var(--e-global-color-text, #525860);
	--oim-bl-muted: var(--e-global-color-oim-muted, #70787d);
	--oim-bl-faint: var(--e-global-color-oim-faint, #9aa0a4);
	--oim-bl-prose: var(--e-global-color-oim-prose, #3a4046);
	--oim-bl-sky: var(#9fc9e8);
	--oim-bl-sky-soft: var(--e-global-color-oim-sky-soft, #7cb8dd);

	/* Surfaces + lines */
	--oim-bl-surface: var(--e-global-color-oim-surface, #fff);
	--oim-bl-bg: var(--e-global-color-oim-bg, #f7f9fb);
	--oim-bl-line: var(--e-global-color-oim-line, #e2e5e8);
	--oim-bl-dot: var(--e-global-color-oim-dot, #c2c8cc);
	--oim-bl-hover-bg: var(--e-global-color-oim-hover-bg, #f2f6f9);
	--oim-bl-navy: var(--e-global-color-oim-navy, #12354a);
	--oim-bl-navy-hover: var(--e-global-color-oim-navy-hover, #eaf2f8);

	/* Hero gradient stops */
	--oim-bl-grad-1: var(--e-global-color-oim-grad-1, #0f4d78);
	--oim-bl-grad-2: var(--e-global-color-oim-grad-2, #12547f);
	--oim-bl-grad-3: var(--oim-bl-blue);

	/* Placeholder media tint */
	--oim-bl-tint-1: var(--e-global-color-oim-tint-1, #e3edf5);
	--oim-bl-tint-2: var(--e-global-color-oim-tint-2, #cfe0ee);
	--oim-bl-tint-3: var(--e-global-color-oim-tint-3, #d5e4ef);

	/* Type */
	--oim-bl-font: var(--e-global-typography-primary-font-family, "Work Sans"), system-ui, -apple-system, sans-serif;
	--oim-bl-serif: var(--e-global-typography-accent-font-family, "Source Serif 4"), Georgia, serif;

	/* Layout — structural, deliberately NOT exposed as style controls */
	--oim-bl-shell: 1120px;
	--oim-bl-pad: 48px;
	/* Negative tuck under the sticky pill header (00-Global §5.2). Set to 0
	   if this template is ever placed below a static, in-flow header. */
	--oim-bl-tuck: -64px;
	/* How far the featured band hangs below the hero. Body padding is derived
	   from this, so the two can never drift apart. */
	--oim-bl-overlap: 160px;
}

.oim-bl-root,
.oim-bl-root * {
	box-sizing: border-box;
}

.oim-bl-root {
	font-family: var(--oim-bl-font);
	background: var(--oim-bl-bg);
}

/* Elementor wraps shortcode output; make sure nothing constrains us. */
.oim-bl-root .oim-bl-hero,
.oim-bl-root .oim-bl-body-section,
.oim-bl-root .oim-bl-pagination {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Shared shell
   -------------------------------------------------------------------------- */

.oim-bl-shell {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--oim-bl-shell);
	margin: 0 auto;
	padding: 0 var(--oim-bl-pad);
}

/* --------------------------------------------------------------------------
   1.2 Hero — "Nightfall" dark hero, tucked under the header
   -------------------------------------------------------------------------- */

.oim-bl-hero {
	position: relative;
	/* clip (not hidden) so the glow can't cause horizontal overflow while the
	   featured band still hangs out of the bottom edge. */
	overflow-x: clip;
	overflow-y: visible;
	margin-top: var(--oim-bl-tuck);
	padding: 170px 0 64px;
	background: linear-gradient(165deg, var(--oim-bl-grad-1) 0%, var(--oim-bl-grad-2) 55%, var(--oim-bl-blue) 130%);
}

/* Grid-line texture */
.oim-bl-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.043) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.043) 1px, transparent 1px);
	background-size: 48px 48px;
}

/* Soft radial glow, top-right */
.oim-bl-hero::after {
	content: "";
	position: absolute;
	top: -260px;
	right: -200px;
	width: 820px;
	height: 820px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(159, 201, 232, 0.22) 0%, transparent 62%);
	filter: blur(10px);
	pointer-events: none;
}

/* Eyebrow row: label + 44x2 accent rule */
.oim-bl-eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: var(--oim-bl-font);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--oim-bl-sky);
	margin: 0 0 20px;
}

.oim-bl-eyebrow::after {
	content: "";
	flex: 0 0 auto;
	width: 44px;
	height: 2px;
	background: var(--oim-bl-sky);
}

.oim-bl-h1 {
	font-family: var(--oim-bl-font);
	font-weight: 300;
	font-size: clamp(56px, 6vw, 84px);
	line-height: 1.02;
	letter-spacing: -0.035em;
	color: var(--oim-bl-surface);
	margin: 0 0 18px;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.oim-bl-accent {
	color: var(--oim-bl-sky);
	font-weight: 600;
}

.oim-bl-sub {
	font-family: var(--oim-bl-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
	max-width: 560px;
}

/* --------------------------------------------------------------------------
   Category filter chips
   -------------------------------------------------------------------------- */

.oim-bl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.oim-bl-chip {
	display: inline-flex;
	align-items: center;
	font-family: var(--oim-bl-font);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	padding: 8px 16px;
	border: 1px solid var(--oim-bl-line);
	border-radius: 8px;
	background: var(--oim-bl-surface);
	color: var(--oim-bl-body);
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.oim-bl-chip:hover,
.oim-bl-chip:focus-visible {
	border-color: var(--oim-bl-blue);
	color: var(--oim-bl-body);
}

.oim-bl-chip.is-active,
.oim-bl-chip.is-active:hover,
.oim-bl-chip.is-active:focus-visible {
	border-color: var(--oim-bl-blue);
	background: var(--oim-bl-blue);
	color: var(--oim-bl-surface);
}

/* --------------------------------------------------------------------------
   Media slots (real thumbnail, or the tinted diagonal-stripe panel)
   -------------------------------------------------------------------------- */

.oim-bl-media {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, var(--oim-bl-tint-1) 0%, var(--oim-bl-tint-2) 100%);
}

.oim-bl-media img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.oim-bl-media__stripe {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		45deg,
		rgba(255, 255, 255, 0.3) 0,
		rgba(255, 255, 255, 0.3) 12px,
		transparent 12px,
		transparent 24px
	);
}

/* --------------------------------------------------------------------------
   Shared meta row
   -------------------------------------------------------------------------- */

.oim-bl-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-family: var(--oim-bl-font);
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.oim-bl-meta__flag {
	background: rgba(28, 119, 183, 0.1);
	color: var(--oim-bl-blue);
	font-weight: 600;
	padding: 5px 10px;
	border-radius: 6px;
}

.oim-bl-meta__cat {
	color: var(--oim-bl-blue);
	font-weight: 600;
}

.oim-bl-meta__sep {
	flex: 0 0 auto;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--oim-bl-dot);
}

.oim-bl-meta__date {
	color: var(--oim-bl-faint);
}

.oim-bl-excerpt {
	font-family: var(--oim-bl-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.65;
	color: var(--oim-bl-body);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.oim-bl-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--oim-bl-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--oim-bl-blue);
	margin-top: 4px;
}

.oim-bl-cta svg {
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   1.3 Featured post band — overlaps the bottom edge of the hero
   -------------------------------------------------------------------------- */

.oim-bl-featured {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	margin-top: 56px;
	margin-bottom: calc(var(--oim-bl-overlap) * -1);
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border: 1px solid rgba(25, 28, 30, 0.08);
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	color: var(--oim-bl-ink);
	box-shadow: 0 24px 60px -20px rgba(25, 28, 30, 0.22);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.oim-bl-featured:hover,
.oim-bl-featured:focus-visible {
	box-shadow: 0 32px 72px -20px rgba(25, 28, 30, 0.3);
	transform: translateY(-3px);
	color: var(--oim-bl-ink);
}

.oim-bl-featured .oim-bl-media {
	aspect-ratio: 16 / 10;
	min-height: 100%;
}

.oim-bl-featured__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	padding: 44px 44px 40px;
}

.oim-bl-featured__title {
	font-family: var(--oim-bl-font);
	font-weight: 500;
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.22;
	letter-spacing: -0.02em;
	color: var(--oim-bl-ink);
	margin: 0;
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Card grid
   -------------------------------------------------------------------------- */

.oim-bl-body-section {
	background: var(--oim-bl-bg);
	padding: calc(var(--oim-bl-overlap) + 64px) 0 32px;
}

/* No featured band on paged views, so no overlap to compensate for. */
.oim-bl-root.is-paged .oim-bl-body-section {
	padding-top: 96px;
}

.oim-bl-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
}

.oim-bl-grid > * {
	min-width: 0;
}

.oim-bl-card {
	display: flex;
	flex-direction: column;
	background: var(--oim-bl-surface);
	border: 1px solid var(--oim-bl-line);
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	color: var(--oim-bl-ink);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.oim-bl-card:hover,
.oim-bl-card:focus-visible {
	box-shadow: 0 16px 40px -16px rgba(25, 28, 30, 0.16);
	transform: translateY(-2px);
	color: var(--oim-bl-ink);
}

.oim-bl-card .oim-bl-media {
	aspect-ratio: 16 / 9;
	border-bottom: 1px solid var(--oim-bl-line);
}

.oim-bl-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 auto;
	padding: 26px 28px 28px;
}

.oim-bl-card__title {
	font-family: var(--oim-bl-font);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--oim-bl-ink);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.oim-bl-card .oim-bl-excerpt {
	line-height: 1.6;
}

.oim-bl-card .oim-bl-cta {
	margin-top: auto;
	padding-top: 6px;
	font-size: 13px;
}

/* Empty state — styled to match the card language rather than falling out raw */
.oim-bl-empty {
	grid-column: 1 / -1;
	background: var(--oim-bl-surface);
	border: 1px solid var(--oim-bl-line);
	border-radius: 20px;
	padding: 48px 32px;
	text-align: center;
	font-family: var(--oim-bl-font);
	font-size: 16px;
	line-height: 1.6;
	color: var(--oim-bl-body);
	margin: 0;
}

/* --------------------------------------------------------------------------
   1.5 Pagination
   -------------------------------------------------------------------------- */

.oim-bl-pagination {
	background: var(--oim-bl-bg);
	padding: 24px 0 96px;
}

.oim-bl-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oim-bl-page {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 40px !important;
	height: 40px !important;
	padding: 0 8px !important;
	border: 1px solid var(--oim-bl-line) !important;
	border-radius: 10px !important;
	background: var(--oim-bl-surface) !important;
	font-family: var(--oim-bl-font);
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1;
	color: var(--oim-bl-body) !important;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease !important;
}

.oim-bl-page:hover,
.oim-bl-page:focus-visible {
	border-color: var(--oim-bl-blue) !important;
	color: var(--oim-bl-body) !important;
}

.oim-bl-page.is-current,
.oim-bl-page.is-current:hover {
	border-color: var(--oim-bl-blue) !important;
	background: var(--oim-bl-blue) !important;
	color: var(--oim-bl-surface) !important;
	font-weight: 600 !important;
}

.oim-bl-page--arrow {
	width: 40px !important;
	min-width: 40px !important;
	padding: 0 !important;
}

.oim-bl-page--arrow:hover,
.oim-bl-page--arrow:focus-visible {
	border-color: var(--oim-bl-blue) !important;
	color: var(--oim-bl-blue) !important;
}

.oim-bl-page--arrow.is-disabled {
	color: var(--oim-bl-faint);
	pointer-events: none;
}

.oim-bl-page--dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-family: var(--oim-bl-font);
	font-size: 14px;
	color: var(--oim-bl-faint);
}

/* --------------------------------------------------------------------------
   Responsive — single 860px breakpoint, matching the source files
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.oim-bl-hero::after {
		top: -180px;
		right: -60px;
		width: 520px;
		height: 520px;
	}
}

@media (max-width: 860px) {
	:root,
	.oim-bl-root {
		--oim-bl-pad: 20px;
		--oim-bl-overlap: 72px;
	}

	.oim-bl-hero {
		padding: 128px 0 48px;
	}

	.oim-bl-h1 {
		font-size: clamp(34px, 9vw, 48px);
	}

	.oim-bl-chips {
		margin-top: 28px;
	}

	.oim-bl-featured {
		grid-template-columns: 1fr;
		margin-top: 40px;
	}

	.oim-bl-featured .oim-bl-media {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.oim-bl-featured__body {
		padding: 28px 24px 30px;
	}

	.oim-bl-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.oim-bl-root.is-paged .oim-bl-body-section {
		padding-top: 56px;
	}

	.oim-bl-pagination {
		padding: 24px 0 72px;
	}

	/* Middle page numbers drop out so the control never wraps on mobile */
	.oim-bl-page--mid,
	.oim-bl-page--dots {
		display: none;
	}
}

@media (max-width: 480px) {
	.oim-bl-card__body {
		padding: 22px 22px 24px;
	}

	.oim-bl-card__title {
		font-size: 20px;
	}
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

.oim-bl-featured:focus-visible,
.oim-bl-card:focus-visible,
.oim-bl-chip:focus-visible,
.oim-bl-page:focus-visible {
	outline: 2px solid var(--oim-bl-blue);
	outline-offset: 3px;
}

.oim-bl-srt {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.oim-bl-featured,
	.oim-bl-card,
	.oim-bl-chip,
	.oim-bl-page {
		transition: none !important;
	}

	.oim-bl-featured:hover,
	.oim-bl-card:hover {
		transform: none !important;
	}
}

/* ==========================================================================
   NEWSROOM (/news) — Variant B: sticky category rail + horizontal row list
   Shares hero shell, meta row, media slot and pagination with the Blog above.
   ========================================================================== */

.oim-nr-root,
.oim-nr-root * {
	box-sizing: border-box;
}

.oim-nr-root {
	font-family: var(--oim-bl-font);
	background: var(--oim-bl-bg);
	--oim-nr-shell: 1240px;
	--oim-nr-logo-h: 80px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.oim-nr-hero {
	position: relative;
	overflow: hidden;
	margin-top: var(--oim-bl-tuck);
	background: linear-gradient(165deg, var(--oim-bl-grad-1) 0%, var(--oim-bl-grad-2) 55%, var(--oim-bl-blue) 130%);
}

.oim-nr-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.043) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.043) 1px, transparent 1px);
	background-size: 48px 48px;
}

.oim-nr-hero::after {
	content: "";
	position: absolute;
	top: -260px;
	right: -200px;
	width: 820px;
	height: 820px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(159, 201, 232, 0.22) 0%, transparent 62%);
	filter: blur(10px);
	pointer-events: none;
}

.oim-nr-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--oim-nr-shell);
	margin: 0 auto;
	padding: 150px var(--oim-bl-pad) 72px;
}

.oim-nr-hero__grid {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 48px;
	align-items: end;
}

.oim-nr-hero__grid > * {
	min-width: 0;
}

/* Newsroom H1 is deliberately smaller than the Blog's (§1.6) */
.oim-nr-h1 {
	font-size: clamp(40px, 5.6vw, 68px);
}

.oim-nr-hero__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16px;
	margin-bottom: 6px;
}

/* Faded logo watermark — icon keeps its colour, wordmark knocks out to white */
.oim-nr-logo {
	display: flex;
	align-items: center;
	opacity: 0.4;
	pointer-events: none;
}

.oim-nr-logo__mark,
.oim-nr-logo__word {
	display: block;
	height: var(--oim-nr-logo-h);
	background-image: var(--oim-nr-logo);
	background-repeat: no-repeat;
	background-size: calc(var(--oim-nr-logo-h) * 2.7325) var(--oim-nr-logo-h);
}

.oim-nr-logo__mark {
	width: calc(var(--oim-nr-logo-h) * 0.8);
	background-position: 0 0;
}

.oim-nr-logo__word {
	width: calc(var(--oim-nr-logo-h) * 1.95);
	background-position: calc(var(--oim-nr-logo-h) * -0.8) 0;
	filter: brightness(0) invert(1);
}

/* Search — filters in place, never navigates */
.oim-nr-search {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--oim-bl-surface);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	padding: 13px 18px;
	min-width: 320px;
	box-shadow: 0 14px 32px -14px rgba(0, 0, 0, 0.45);
	cursor: text;
}

.oim-nr-search svg {
	flex: 0 0 auto;
}

.oim-nr-search input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0 !important;
	outline: 0 !important;
	background: transparent;
	font-family: var(--oim-bl-font);
	font-size: 14px !important;
	color: var(--oim-bl-ink);
	padding: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.oim-nr-search input::placeholder {
	color: var(--oim-bl-faint);
	opacity: 1;
}

.oim-nr-search input::-webkit-search-cancel-button {
	cursor: pointer;
}

.oim-nr-search:focus-within {
	border-color: var(--oim-bl-blue);
	box-shadow: 0 14px 32px -14px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(28, 119, 183, 0.35);
}

/* --------------------------------------------------------------------------
   Body — rail + list
   -------------------------------------------------------------------------- */

.oim-nr-body {
	background: var(--oim-bl-bg);
}

.oim-nr-body__grid {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 48px;
	align-items: start;
	max-width: var(--oim-nr-shell);
	margin: 0 auto;
	padding: 56px var(--oim-bl-pad) 88px;
}

.oim-nr-body__grid > * {
	min-width: 0;
}

.oim-nr-rail {
	position: sticky;
	top: 80px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.oim-nr-cats {
	background: var(--oim-bl-surface);
	border: 1px solid var(--oim-bl-line);
	border-radius: 20px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.oim-nr-cats__label {
	font-family: var(--oim-bl-font);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--oim-bl-faint);
	padding: 10px 14px 8px;
}

.oim-nr-cat {
	display: flex !important;
	align-items: center !important;
	gap: 11px !important;
	width: 100% !important;
	padding: 10px 14px !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: transparent !important;
	color: var(--oim-bl-ink) !important;
	font-family: var(--oim-bl-font);
	font-size: 14px !important;
	font-weight: 500 !important;
	text-align: left !important;
	cursor: pointer;
	transition: background 0.15s ease !important;
}

.oim-nr-cat:hover {
	background: var(--oim-bl-hover-bg) !important;
}

.oim-nr-cat__icon {
	flex: 0 0 auto;
	color: var(--oim-bl-blue);
}

.oim-nr-cat__name {
	flex: 1 1 auto;
}

.oim-nr-cat__count {
	flex: 0 0 auto;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--oim-bl-faint);
}

.oim-nr-cat.is-active {
	background: var(--oim-bl-blue) !important;
	color: var(--oim-bl-surface) !important;
	font-weight: 600 !important;
}

.oim-nr-cat.is-active .oim-nr-cat__icon {
	color: var(--oim-bl-surface) !important;
}

.oim-nr-cat.is-active .oim-nr-cat__count {
	color: rgba(255, 255, 255, 0.75) !important;
}

.oim-nr-cat:focus-visible {
	outline: 2px solid var(--oim-bl-blue);
	outline-offset: 2px;
}

/* Media inquiries card */
.oim-nr-media-card {
	position: relative;
	overflow: hidden;
	background: var(--oim-bl-navy);
	color: var(--oim-bl-surface);
	border-radius: 20px;
	padding: 26px 26px 28px;
}

.oim-nr-media-card::before {
	content: "";
	position: absolute;
	top: -90px;
	right: -70px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(28, 119, 183, 0.4) 0%, transparent 70%);
	pointer-events: none;
}

.oim-nr-media-card__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.oim-nr-media-card__eyebrow {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--oim-bl-sky-soft);
}

.oim-nr-media-card__title {
	font-size: 19px;
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.3;
}

.oim-nr-media-card__text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
}

.oim-nr-media-card__cta {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 8px;
	background: var(--oim-bl-surface);
	color: var(--oim-bl-navy);
	padding: 9px 16px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	margin-top: 6px;
}

.oim-nr-media-card__cta:hover {
	background: var(--oim-bl-navy-hover);
	color: var(--oim-bl-navy);
}

/* --------------------------------------------------------------------------
   Release list
   -------------------------------------------------------------------------- */

.oim-nr-main {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.oim-nr-listhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	scroll-margin-top: 90px;
}

.oim-nr-listhead__title {
	font-family: var(--oim-bl-font);
	font-weight: 300;
	font-size: 30px;
	letter-spacing: -0.025em;
	color: var(--oim-bl-ink);
	margin: 0;
}

.oim-nr-listhead__dot {
	color: var(--oim-bl-blue);
	font-weight: 600;
}

.oim-nr-listhead__meta {
	font-size: 13px;
	color: var(--oim-bl-faint);
}

.oim-nr-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.oim-nr-row {
	display: grid;
	grid-template-columns: 200px 1fr;
	background: var(--oim-bl-surface);
	border: 1px solid var(--oim-bl-line);
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	color: var(--oim-bl-ink);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.oim-nr-row:hover,
.oim-nr-row:focus-visible {
	box-shadow: 0 16px 40px -16px rgba(25, 28, 30, 0.16);
	transform: translateY(-2px);
	color: var(--oim-bl-ink);
}

.oim-nr-row:focus-visible {
	outline: 2px solid var(--oim-bl-blue);
	outline-offset: 3px;
}

.oim-nr-row__thumb {
	min-height: 100%;
	border-right: 1px solid var(--oim-bl-line);
}

.oim-nr-row__body {
	padding: 24px 30px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.oim-nr-row__title {
	font-family: var(--oim-bl-font);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--oim-bl-ink);
	margin: 0;
}

.oim-nr-row__excerpt {
	font-size: 14.5px;
	line-height: 1.6;
}

.oim-nr-empty {
	background: var(--oim-bl-surface);
	border: 1px solid var(--oim-bl-line);
	border-radius: 20px;
	padding: 48px 32px;
	text-align: center;
	font-size: 16px;
	line-height: 1.6;
	color: var(--oim-bl-body);
	margin: 0;
}

.oim-nr-pager {
	padding-top: 12px;
}

/* Pager buttons are <button> here, not links — normalise them */
button.oim-bl-page {
	font-family: var(--oim-bl-font);
	cursor: pointer;
}

button.oim-bl-page.is-disabled,
button.oim-bl-page[disabled] {
	color: var(--oim-bl-faint);
	cursor: default;
}

/* --------------------------------------------------------------------------
   Newsroom responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.oim-nr-hero::after {
		top: -180px;
		right: -60px;
		width: 520px;
		height: 520px;
	}
}

@media (max-width: 1000px) {
	.oim-nr-body__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.oim-nr-rail {
		position: static;
	}
}

@media (max-width: 860px) {
	.oim-nr-hero__inner {
		padding: 120px var(--oim-bl-pad) 56px;
	}

	.oim-nr-h1 {
		font-size: clamp(34px, 9vw, 48px);
	}

	.oim-nr-listhead__title {
		font-size: 26px;
	}
}

@media (max-width: 760px) {
	.oim-nr-hero__grid {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 32px;
	}

	.oim-nr-hero__aside {
		align-items: flex-start;
		margin-bottom: 0;
	}

	.oim-nr-root {
		--oim-nr-logo-h: 40px;
	}

	.oim-nr-search {
		min-width: 0;
		width: 100%;
	}
}

@media (max-width: 640px) {
	.oim-nr-row {
		grid-template-columns: 1fr;
	}

	.oim-nr-row__thumb {
		min-height: 0;
		aspect-ratio: 16 / 9;
		border-right: 0;
		border-bottom: 1px solid var(--oim-bl-line);
	}

	.oim-nr-row__body {
		padding: 22px 22px 24px;
	}

	.oim-nr-row__title {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.oim-nr-row,
	.oim-nr-cat {
		transition: none !important;
	}

	.oim-nr-row:hover {
		transform: none !important;
	}
}

/* ==========================================================================
   SINGLE ARTICLE / POST DETAIL (handoff 09 §2)
   Hero → reading column → author sign-off → "Keep reading".
   The closing CTA card (§2.4) is a separate existing component.
   ========================================================================== */

.oim-ar-root,
.oim-ar-root * {
	box-sizing: border-box;
}

.oim-ar-root {
	font-family: var(--oim-bl-font);
	background: var(--oim-bl-bg);
	/* How far the featured image hangs below the hero. The source file has no
	   overlap; set --oim-ar-overlap (or the image_overlap attribute) to e.g.
	   120px if the live build turns out to overlap. */
	--oim-ar-overlap: 0px;
	--oim-ar-read: 796px;
}

/* --------------------------------------------------------------------------
   2.1 Hero
   -------------------------------------------------------------------------- */

.oim-ar-hero {
	position: relative;
	overflow-x: clip;
	overflow-y: visible;
	margin-top: var(--oim-bl-tuck);
	padding: 150px 0 64px;
	background: linear-gradient(165deg, var(--oim-bl-grad-1) 0%, var(--oim-bl-grad-2) 55%, var(--oim-bl-blue) 130%);
}

.oim-ar-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.043) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.043) 1px, transparent 1px);
	background-size: 48px 48px;
}

.oim-ar-hero::after {
	content: "";
	position: absolute;
	top: -260px;
	right: -200px;
	width: 820px;
	height: 820px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(159, 201, 232, 0.22) 0%, transparent 62%);
	filter: blur(10px);
	pointer-events: none;
}

/* Reading-width column, used by the hero text and the article body alike */
.oim-ar-shell {
	position: relative;
	z-index: 2;
	max-width: var(--oim-ar-read);
	margin: 0 auto;
	padding: 0 var(--oim-bl-pad);
}

.oim-ar-crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-family: var(--oim-bl-font);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 28px;
}

.oim-ar-crumbs a {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
}

.oim-ar-crumbs a:hover,
.oim-ar-crumbs a:focus-visible {
	color: var(--oim-bl-surface) !important;
}

.oim-ar-crumbs__current {
	color: var(--oim-bl-surface);
	font-weight: 500;
}

.oim-ar-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-family: var(--oim-bl-font);
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.oim-ar-meta__cat {
	color: var(--oim-bl-sky);
	font-weight: 600;
}

.oim-ar-meta__sep {
	flex: 0 0 auto;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
}

.oim-ar-meta__date {
	color: rgba(255, 255, 255, 0.6);
}

/* The byline is the one item in this row that isn't uppercased */
.oim-ar-meta__author {
	color: rgba(255, 255, 255, 0.6);
	text-transform: none;
	letter-spacing: 0;
}

.oim-ar-h1 {
	font-family: var(--oim-bl-font);
	font-weight: 500;
	font-size: 48px;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--oim-bl-surface);
	margin: 0 0 40px;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.oim-ar-accent {
	color: var(--oim-bl-sky);
	font-weight: 700;
}

/* Featured image — wider than the reading column */
.oim-ar-featured {
	position: relative;
	z-index: 2;
	max-width: 1000px;
	margin: 0 auto calc(var(--oim-ar-overlap) * -1);
	padding: 0 var(--oim-bl-pad);
}

.oim-ar-featured__frame {
	aspect-ratio: 2 / 1;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: linear-gradient(160deg, var(--oim-bl-tint-1) 0%, var(--oim-bl-tint-3) 100%);
	box-shadow: 0 24px 60px -20px rgba(6, 24, 38, 0.5);
}

/* --------------------------------------------------------------------------
   2.2 Body — long-form typography in the reading column
   -------------------------------------------------------------------------- */

.oim-ar-body {
	background: var(--oim-bl-surface);
	padding: calc(64px + var(--oim-ar-overlap)) 0 88px;
}

.oim-ar-body__inner {
	max-width: var(--oim-ar-read);
	margin: 0 auto;
	padding: 0 var(--oim-bl-pad);
}

.oim-ar-prose {
	font-family: var(--oim-bl-font);
	font-size: 17px;
	line-height: 1.8;
	color: var(--oim-bl-prose);
}

.oim-ar-prose > p {
	font-size: 17px;
	line-height: 1.8;
	color: var(--oim-bl-prose);
	margin: 0 0 28px;
}

/* Lede paragraph */
.oim-ar-prose > p:first-child {
	font-size: 19px;
	line-height: 1.75;
}

.oim-ar-prose h2 {
	font-family: var(--oim-bl-font);
	font-weight: 500;
	font-size: 30px;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--oim-bl-ink);
	margin: 48px 0 18px;
}

.oim-ar-prose h3 {
	font-family: var(--oim-bl-font);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--oim-bl-ink);
	margin: 40px 0 14px;
}

.oim-ar-prose h4 {
	font-family: var(--oim-bl-font);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.4;
	color: var(--oim-bl-ink);
	margin: 32px 0 12px;
}

.oim-ar-prose h2:first-child,
.oim-ar-prose h3:first-child {
	margin-top: 0;
}

.oim-ar-prose ul,
.oim-ar-prose ol {
	font-size: 17px;
	line-height: 1.8;
	color: var(--oim-bl-prose);
	margin: 0 0 28px;
	padding-left: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.oim-ar-prose li::marker {
	color: var(--oim-bl-faint);
}

.oim-ar-prose strong,
.oim-ar-prose b {
	font-weight: 600;
	color: var(--oim-bl-ink);
}

/* The one place besides the H1 accent where the serif face appears */
.oim-ar-prose blockquote {
	margin: 40px 0;
	padding: 8px 0 8px 28px;
	border-left: 3px solid var(--oim-bl-blue);
}

.oim-ar-prose blockquote p {
	font-family: var(--oim-bl-serif);
	font-style: italic;
	font-weight: 500;
	font-size: 24px;
	line-height: 1.5;
	color: var(--oim-bl-blue-hover);
	margin: 0;
}

.oim-ar-prose blockquote cite {
	display: block;
	margin-top: 12px;
	font-family: var(--oim-bl-font);
	font-style: normal;
	font-size: 14px;
	color: var(--oim-bl-muted);
}

.oim-ar-prose figure {
	margin: 44px 0;
}

.oim-ar-prose img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 16px;
}

.oim-ar-prose figure img {
	width: 100%;
	border: 1px solid var(--oim-bl-line);
}

.oim-ar-prose figcaption {
	font-family: var(--oim-bl-font);
	font-size: 13px;
	line-height: 1.6;
	color: var(--oim-bl-faint);
	margin-top: 12px;
	text-align: center;
}

.oim-ar-prose hr {
	border: 0;
	border-top: 1px solid var(--oim-bl-line);
	margin: 48px 0;
}

.oim-ar-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	margin: 0 0 28px;
}

.oim-ar-prose th,
.oim-ar-prose td {
	border-bottom: 1px solid var(--oim-bl-line);
	padding: 12px 14px;
	text-align: left;
}

.oim-ar-prose th {
	font-weight: 600;
	color: var(--oim-bl-ink);
}

.oim-ar-prose > *:last-child {
	margin-bottom: 0;
}

/* Author sign-off */
.oim-ar-author {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--oim-bl-line);
}

.oim-ar-author__avatar {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(160deg, var(--oim-bl-tint-1) 0%, var(--oim-bl-tint-3) 100%);
	border: 1px solid var(--oim-bl-line);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--oim-bl-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--oim-bl-blue);
}

.oim-ar-author__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.oim-ar-author__name {
	font-family: var(--oim-bl-font);
	font-weight: 600;
	font-size: 15px;
	color: var(--oim-bl-ink);
}

.oim-ar-author__role {
	font-family: var(--oim-bl-font);
	font-size: 13px;
	color: var(--oim-bl-muted);
}

/* --------------------------------------------------------------------------
   2.3 Related posts — "Keep reading"
   -------------------------------------------------------------------------- */

.oim-ar-related {
	background: var(--oim-bl-bg);
	padding: 88px 0 96px;
}

.oim-ar-related__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--oim-bl-pad);
}

.oim-ar-related__title {
	font-family: var(--oim-bl-font);
	font-weight: 300;
	font-size: 36px;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--oim-bl-ink);
	margin: 0 0 36px;
}

.oim-ar-related__dot {
	color: var(--oim-bl-blue);
	font-weight: 600;
}

.oim-ar-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.oim-ar-grid > * {
	min-width: 0;
}

/* Same card component as the Blog listing, tighter (§2.3) */
.oim-ar-card__media {
	aspect-ratio: 16 / 9;
	border-bottom: 1px solid var(--oim-bl-line);
}

.oim-ar-card__body {
	padding: 24px 26px 26px;
	gap: 11px;
}

.oim-ar-card__title {
	font-size: 19px;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.oim-ar-card__cta {
	padding-top: 4px;
}

/* --------------------------------------------------------------------------
   Article responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.oim-ar-hero::after {
		top: -180px;
		right: -60px;
		width: 520px;
		height: 520px;
	}
}

@media (max-width: 860px) {
	.oim-ar-hero {
		padding: 120px 0 48px;
	}

	.oim-ar-h1 {
		font-size: clamp(30px, 8vw, 42px);
		margin-bottom: 32px;
	}

	.oim-ar-crumbs {
		margin-bottom: 20px;
	}

	.oim-ar-body {
		padding: calc(48px + var(--oim-ar-overlap)) 0 64px;
	}

	.oim-ar-prose > p:first-child {
		font-size: 18px;
	}

	.oim-ar-prose h2 {
		font-size: 26px;
		margin-top: 40px;
	}

	.oim-ar-prose h3 {
		font-size: 20px;
	}

	.oim-ar-prose blockquote {
		margin: 32px 0;
		padding-left: 20px;
	}

	.oim-ar-prose blockquote p {
		font-size: 20px;
	}

	.oim-ar-related {
		padding: 64px 0 72px;
	}

	.oim-ar-related__title {
		font-size: 30px;
		margin-bottom: 28px;
	}

	.oim-ar-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.oim-ar-featured__frame {
		border-radius: 16px;
	}

	.oim-ar-card__body {
		padding: 22px 22px 24px;
	}
}

/* ==========================================================================
   SEARCH RESULTS (/?s=…)
   Reuses the Newsroom hero, rail and row components — only the search form,
   the highlight mark and the empty state are new.
   ========================================================================== */

/* Unlike the in-page filters, this one submits. */
.oim-sr-form button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: var(--oim-bl-blue);
}

.oim-sr-form button:focus-visible {
	outline: 2px solid var(--oim-bl-blue);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Rail facets are links here, not buttons — keep them looking identical. */
a.oim-nr-cat {
	text-decoration: none;
}

.oim-sr-mark {
	background: rgba(28, 119, 183, 0.14);
	color: inherit;
	padding: 0 2px;
	border-radius: 3px;
}

.oim-sr-empty {
	text-align: center;
}

.oim-sr-empty__title {
	font-family: var(--oim-bl-font);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--oim-bl-ink);
	margin: 0 0 8px;
}

.oim-sr-empty__text {
	font-family: var(--oim-bl-font);
	font-size: 15px;
	line-height: 1.6;
	color: var(--oim-bl-body);
	margin: 0;
}

.oim-sr-suggest {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
}

.oim-sr-suggest a {
	display: inline-flex;
	align-items: center;
	font-family: var(--oim-bl-font);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	padding: 8px 16px;
	border: 1px solid var(--oim-bl-line);
	border-radius: 8px;
	background: var(--oim-bl-surface);
	color: var(--oim-bl-body);
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.oim-sr-suggest a:hover,
.oim-sr-suggest a:focus-visible {
	border-color: var(--oim-bl-blue);
	color: var(--oim-bl-body);
}

/* The search page has no client-side pager, so mid numbers stay linkable */
.oim-sr-root .oim-bl-pager a.oim-bl-page {
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.oim-sr-suggest a {
		transition: none !important;
	}
}