/* Malachi Recruiting Hub — public scout profile.
   Editorial sports design: high contrast, large type, film-first, fast on phones.
   Scoped under .mrh-* so Divi styling elsewhere is untouched. */

.mrh-site,
.mrh-card,
.mrh-film,
.mrh-matches {
	--mrh-ink: #0c0f12;
	--mrh-paper: #ffffff;
	--mrh-muted: #5d666f;
	--mrh-line: rgba(12, 15, 18, .12);
	--mrh-accent: #c8102e;
	color: var(--mrh-ink);
	font-family: inherit;
	line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
	.mrh-site, .mrh-card, .mrh-film, .mrh-matches {
		--mrh-ink: #f2f4f6;
		--mrh-paper: #0c0f12;
		--mrh-muted: #9aa3ac;
		--mrh-line: rgba(242, 244, 246, .16);
	}
}

.mrh-kicker {
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: 12px;
	font-weight: 700;
	color: var(--mrh-muted);
	margin: 0 0 10px;
}

/* Hero — plain portrait fallback */
.mrh-hero {
	display: grid;
	grid-template-columns: minmax(260px, 5fr) 7fr;
	gap: clamp(20px, 4vw, 56px);
	align-items: center;
	padding: clamp(24px, 5vw, 64px) 0;
}
.mrh-hero-media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
	filter: saturate(1.05) contrast(1.05);
}

/* Hero — blended composition.
   Committed dark field in both themes: the cut-out is lit for a dark ground and
   the feathered edges only disappear against one. Everything inside the hero is
   therefore declared against this field, not against the page tokens. */
.mrh-hero-blend {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	padding: 0;
	min-height: clamp(420px, 58vw, 560px);
	color: #EAF0F7;
	background:
		radial-gradient(120% 90% at 68% 16%, rgba(60, 120, 220, .36) 0%, rgba(60, 120, 220, 0) 58%),
		radial-gradient(80% 70% at 20% 92%, rgba(200, 26, 44, .20) 0%, rgba(200, 26, 44, 0) 62%),
		linear-gradient(168deg, #101A2C 0%, #0A0E17 62%, #070A11 100%);
}
.mrh-hero-blend .mrh-hero-arcs {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	color: rgba(140, 180, 235, .20);
	pointer-events: none;
}
.mrh-hero-glow {
	position: absolute;
	z-index: 1;
	right: 12%;
	top: 4%;
	width: min(380px, 40vw);
	aspect-ratio: 1;
	border-radius: 50%;
	filter: blur(58px);
	background: radial-gradient(circle, rgba(90, 150, 235, .5) 0%, rgba(90, 150, 235, 0) 70%);
	pointer-events: none;
}
.mrh-hero-numeral {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 2%;
	font-size: clamp(90px, 13vw, 160px);
	font-weight: 800;
	line-height: .82;
	letter-spacing: -.02em;
	color: rgba(150, 185, 235, .13);
	pointer-events: none;
	user-select: none;
}
/* The markup puts the photo first for the plain-portrait layout; the blended
   composition wants copy left, figure right. Reordering here keeps one set of
   markup serving both. */
.mrh-hero-blend .mrh-hero-copy {
	position: relative;
	z-index: 3;
	order: 1;
	align-self: center;
	padding: clamp(32px, 5vw, 56px) clamp(14px, 2vw, 24px) clamp(56px, 7vw, 76px) clamp(20px, 4vw, 48px);
}
.mrh-hero-blend .mrh-hero-media {
	position: relative;
	z-index: 2;
	order: 2;
	align-self: stretch;
	min-height: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	/* Two nested masks: the wrapper fades the base into the field, the inner
	   element softens the sides. Kept separate because mask-composite support
	   is still uneven. */
	-webkit-mask-image: linear-gradient(to bottom, #000 0 74%, rgba(0, 0, 0, .35) 94%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0 74%, rgba(0, 0, 0, .35) 94%, transparent 100%);
}
.mrh-hero-media-inner {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	-webkit-mask-image: radial-gradient(76% 84% at 50% 44%, #000 52%, rgba(0, 0, 0, .5) 82%, transparent 100%);
	mask-image: radial-gradient(76% 84% at 50% 44%, #000 52%, rgba(0, 0, 0, .5) 82%, transparent 100%);
}
/* Fit the whole figure inside the hero rather than cropping his head off the
   top: the base still meets the fact strip, but nothing above it is lost. */
.mrh-hero-blend .mrh-hero-media img {
	width: auto;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: bottom center;
	border-radius: 0;
	filter: none;
}
.mrh-hero-blend .mrh-kicker { color: #86ABE0; }
.mrh-hero-blend .mrh-lead { color: #9FB1C8; }
.mrh-hero-blend .mrh-note { color: #8DA0B8; }
.mrh-hero-blend .mrh-surname { color: #7FA6D8; }
.mrh-hero-blend .mrh-tags span { border-color: rgba(234, 240, 247, .22); color: #A9BACD; }
.mrh-hero-blend .mrh-btn { border-color: #EAF0F7; color: #EAF0F7; }
.mrh-hero-blend .mrh-btn:hover,
.mrh-hero-blend .mrh-btn:focus { background: #EAF0F7; color: #0A0E17; }
.mrh-hero-blend .mrh-btn.mrh-primary { background: #EAF0F7; color: #0A0E17; }
.mrh-hero-blend .mrh-btn.mrh-primary:hover,
.mrh-hero-blend .mrh-btn.mrh-primary:focus { background: var(--mrh-accent); border-color: var(--mrh-accent); color: #fff; }

/* The fact strip sits over the base of the photo, finishing the blend. */
.mrh-hero-blend + .mrh-strip {
	position: relative;
	z-index: 4;
	margin-top: -1px;
	background: #070A11;
	border-block: 1px solid rgba(255, 255, 255, .1);
}
.mrh-hero-blend + .mrh-strip div { background: transparent; color: #EAF0F7; }
.mrh-hero-blend + .mrh-strip span { color: #8DA0B8; }

.mrh-hero-copy h1 {
	font-size: clamp(40px, 8vw, 92px);
	line-height: .92;
	letter-spacing: -.03em;
	margin: 0 0 16px;
	text-transform: uppercase;
	font-weight: 800;
}
.mrh-lead {
	font-size: clamp(16px, 2vw, 21px);
	color: var(--mrh-muted);
	max-width: 46ch;
	margin: 0 0 20px;
}
.mrh-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; }
.mrh-tags span {
	border: 1px solid var(--mrh-line);
	border-radius: 999px;
	padding: 5px 14px;
	font-size: 13px;
	color: var(--mrh-muted);
}
.mrh-note { font-size: 14px; color: var(--mrh-muted); margin: 16px 0 0; }

/* Buttons */
.mrh-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.mrh-btn {
	display: inline-block;
	border: 1px solid var(--mrh-ink);
	border-radius: 3px;
	padding: 12px 22px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mrh-ink);
	transition: background .15s ease, color .15s ease;
}
.mrh-btn:hover, .mrh-btn:focus { background: var(--mrh-ink); color: var(--mrh-paper); }
.mrh-btn.mrh-primary { background: var(--mrh-ink); color: var(--mrh-paper); }
.mrh-btn.mrh-primary:hover, .mrh-btn.mrh-primary:focus { background: var(--mrh-accent); border-color: var(--mrh-accent); color: #fff; }

/* Fact strip */
.mrh-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 1px;
	background: var(--mrh-line);
	border-block: 1px solid var(--mrh-line);
	margin: 0 0 clamp(28px, 5vw, 64px);
}
.mrh-strip div { background: var(--mrh-paper); padding: 18px 14px; text-align: center; }
.mrh-strip strong { display: block; font-size: clamp(20px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; }
.mrh-strip span { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--mrh-muted); }

/* Sections */
.mrh-section { padding: clamp(28px, 5vw, 64px) 0; border-top: 1px solid var(--mrh-line); }
.mrh-section-head { max-width: 58ch; margin: 0 0 28px; }
.mrh-section-head h2 {
	font-size: clamp(26px, 4vw, 42px);
	letter-spacing: -.02em;
	line-height: 1.08;
	margin: 0 0 12px;
	font-weight: 800;
}
.mrh-section-head p { color: var(--mrh-muted); margin: 0; }

.mrh-traits { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.mrh-traits article { border-top: 2px solid var(--mrh-ink); padding-top: 14px; }
.mrh-traits span { font-size: 12px; font-weight: 700; color: var(--mrh-accent); letter-spacing: .1em; }
.mrh-traits h3 { font-size: 20px; margin: 6px 0 8px; text-transform: uppercase; letter-spacing: .02em; }
.mrh-traits p { color: var(--mrh-muted); font-size: 15px; margin: 0; }

/* Film */
.mrh-video { position: relative; aspect-ratio: 16 / 9; background: #000; margin: 0 0 18px; }
.mrh-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mrh-film-head { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--mrh-muted); margin: 30px 0 12px; }
.mrh-clip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.mrh-clip {
	display: block;
	border: 1px solid var(--mrh-line);
	padding: 14px;
	text-decoration: none;
	color: var(--mrh-ink);
}
.mrh-clip:hover { border-color: var(--mrh-ink); }
.mrh-clip-cat { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--mrh-accent); }
.mrh-clip-title { display: block; font-weight: 700; margin-top: 4px; }
.mrh-match-list { list-style: none; margin: 0; padding: 0; }
.mrh-match-list li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--mrh-line); }
.mrh-match-list span { color: var(--mrh-muted); font-size: 13px; }

/* Schedule */
.mrh-matches { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.mrh-match { display: flex; gap: 16px; border: 1px solid var(--mrh-line); padding: 16px; }
.mrh-match-date { text-align: center; min-width: 48px; }
.mrh-match-month { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--mrh-accent); font-weight: 700; }
.mrh-match-day { display: block; font-size: 28px; font-weight: 800; line-height: 1; }
.mrh-match-body h3 { margin: 0 0 4px; font-size: 17px; }
.mrh-match-body p { margin: 0; color: var(--mrh-muted); font-size: 13px; }
.mrh-empty { color: var(--mrh-muted); }

/* Player card */
.mrh-card { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr; gap: 24px; align-items: start; }
.mrh-card-photo img { width: 100%; height: auto; display: block; }
.mrh-card h2 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 14px; text-transform: uppercase; letter-spacing: -.01em; }
.mrh-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin: 0 0 16px; }
.mrh-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--mrh-muted); }
.mrh-facts dd { margin: 2px 0 0; font-weight: 700; }
.mrh-card-bio { color: var(--mrh-muted); margin: 0; }

@media (max-width: 780px) {
	.mrh-hero { grid-template-columns: 1fr; }
	.mrh-card { grid-template-columns: 1fr; }
	.mrh-hero-blend { min-height: 0; }
	.mrh-hero-blend .mrh-hero-copy { padding-bottom: clamp(20px, 5vw, 32px); }
	.mrh-hero-numeral { display: none; }
	.mrh-hero-blend .mrh-hero-media { max-width: 420px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.mrh-btn { transition: none; }
}

/* ---------------------------------------------------------------------------
   Scout card — one page, print-first.
   Fixed letter proportions so what appears on screen is what comes out of the
   printer. The palette is committed, like the hero: this sheet gets handed to
   people and has to look identical wherever it is opened.
--------------------------------------------------------------------------- */

.mrh-scout-card-wrap { --sc-ink: #12171C; --sc-soft: #414A52; --sc-muted: #6A737A; --sc-line: #E4E8EB; --sc-mark: #C4141C; }
.mrh-card-actions { margin: 0 0 18px; }

.mrh-scout-card {
	width: 816px;
	max-width: 100%;
	aspect-ratio: 816 / 1056;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	color: var(--sc-ink);
	border: 1px solid var(--sc-line);
	container-type: inline-size;
}

.mrh-sc-band {
	position: relative;
	flex: none;
	height: 33%;
	overflow: hidden;
	color: #EAF0F7;
	background:
		radial-gradient(120% 90% at 68% 16%, rgba(60, 120, 220, .36) 0%, rgba(60, 120, 220, 0) 58%),
		radial-gradient(80% 70% at 20% 92%, rgba(200, 26, 44, .20) 0%, rgba(200, 26, 44, 0) 62%),
		linear-gradient(168deg, #101A2C 0%, #0A0E17 62%, #070A11 100%);
}
.mrh-sc-band .mrh-hero-arcs { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; color: rgba(140, 180, 235, .20); }
.mrh-sc-numeral {
	position: absolute; z-index: 1; right: 36%; top: 6%;
	font-size: 20cqw; font-weight: 800; line-height: .8; color: rgba(150, 185, 235, .13);
}
.mrh-sc-copy { position: absolute; z-index: 3; left: 5%; top: 15%; }
.mrh-sc-copy h2 {
	font-size: 7.6cqw; font-weight: 800; line-height: .84;
	text-transform: uppercase; letter-spacing: -.01em; margin: 0;
}
.mrh-sc-copy .mrh-surname { color: #7FA6D8; }
.mrh-sc-copy .mrh-kicker { font-size: 1.3cqw; margin-bottom: 1.4cqw; color: #86ABE0; }
.mrh-sc-team { font-size: 1.7cqw; color: #9FB1C8; margin: 1.9cqw 0 0; }
.mrh-sc-shot {
	position: absolute; z-index: 2; right: 3%; bottom: 0; width: 28%;
	-webkit-mask-image: radial-gradient(76% 84% at 50% 44%, #000 52%, rgba(0, 0, 0, .5) 82%, transparent 100%);
	mask-image: radial-gradient(76% 84% at 50% 44%, #000 52%, rgba(0, 0, 0, .5) 82%, transparent 100%);
}
.mrh-sc-shot img { display: block; width: 100%; height: auto; }

.mrh-sc-facts {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
	background: #D3D9DE; border-bottom: 1px solid #D3D9DE; margin: 0; flex: none;
}
.mrh-sc-facts div { background: #fff; padding: 1.5cqw 2cqw; }
.mrh-sc-facts dt { font-size: 1.1cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-muted); margin: 0 0 2px; }
.mrh-sc-facts dd { margin: 0; font-size: 2.7cqw; font-weight: 700; letter-spacing: -.01em; }

.mrh-sc-body { padding: 2.2cqw 5% 0; flex: 1; }
.mrh-sc-body h3 {
	font-size: 1.25cqw; letter-spacing: .18em; text-transform: uppercase;
	color: var(--sc-mark); margin: 0 0 1.2cqw; font-weight: 700;
}
.mrh-sc-lens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; margin-bottom: 2.2cqw; }
.mrh-sc-lens article { border-top: 2px solid var(--sc-ink); padding-top: 1.1cqw; }
.mrh-sc-lens h4 { font-size: 2.3cqw; font-weight: 700; text-transform: uppercase; margin: 0 0 .5cqw; }
.mrh-sc-lens p { margin: 0; font-size: 1.5cqw; line-height: 1.45; color: var(--sc-soft); }

.mrh-sc-links { list-style: none; margin: 0; padding: 0; }
.mrh-sc-links li {
	display: flex; justify-content: space-between; gap: 1.8cqw;
	padding: .75cqw 0; border-bottom: 1px solid var(--sc-line); font-size: 1.6cqw;
}
.mrh-sc-links b { font-weight: 600; }
.mrh-sc-links span { color: var(--sc-muted); text-align: right; word-break: break-all; }
.mrh-sc-pending { color: var(--sc-mark) !important; }

.mrh-sc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 3.2cqw; margin-top: 2cqw; }
.mrh-sc-routes { list-style: none; margin: 0; padding: 0; }
.mrh-sc-routes li { position: relative; padding: 0 0 1cqw 2.2cqw; font-size: 1.55cqw; line-height: 1.5; color: var(--sc-soft); }
.mrh-sc-routes li::before {
	content: ""; position: absolute; left: 0; top: .55cqw;
	width: .9cqw; height: .9cqw; border: 1.5px solid var(--sc-mark);
}

.mrh-sc-foot {
	margin-top: auto; flex: none; background: #0A0E17; color: #9FB1C8;
	padding: 2cqw 5%; display: flex; justify-content: space-between; align-items: center; gap: 2.4cqw;
}
.mrh-sc-foot p { margin: 0; font-size: 1.45cqw; color: #EAF0F7; font-weight: 600; }
.mrh-sc-foot .mrh-sc-stamp {
	font-size: 1.15cqw; letter-spacing: .12em; text-transform: uppercase;
	white-space: nowrap; color: #9FB1C8; font-weight: 400;
}

@media print {
	@page { size: letter; margin: 0; }
	body * { visibility: hidden; }
	.mrh-scout-card, .mrh-scout-card * { visibility: visible; }
	.mrh-scout-card {
		position: absolute; left: 0; top: 0;
		width: 8.5in; height: 11in; aspect-ratio: auto; border: 0;
	}
	.mrh-no-print { display: none !important; }
	.mrh-scout-card { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.mrh-sc-split { display: grid; grid-template-columns: 1fr 18%; gap: 3.2cqw; align-items: start; }
.mrh-sc-qr { margin: 0; text-align: center; }
.mrh-sc-qr img { width: 100%; height: auto; display: block; margin: 0 auto .8cqw; }
.mrh-sc-qr figcaption {
	font-size: 1.1cqw; letter-spacing: .1em; text-transform: uppercase;
	color: var(--sc-muted); line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Feature hero.
   A committed single-colour field in both themes — the composition depends on
   the figure separating from a flat ground, which a theme-reactive background
   cannot guarantee. Every colour here is declared against that field.
--------------------------------------------------------------------------- */

.mrh-feature {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: clamp(460px, 56vw, 620px);
	font-family: "Archivo", var(--mrh-font, inherit), system-ui, sans-serif;
}

.mrh-feature-lime { --ff: #B7E32B; --fi: #101C06; --fs: #22330C; --fsweep: #1FA84E; --fname: #ffffff; }
.mrh-feature-blue { --ff: #1B47D6; --fi: #EAF0FF; --fs: rgba(234,240,255,.85); --fsweep: #0F2FA6; --fname: #ffffff; }
.mrh-feature-ink  { --ff: #0C1116; --fi: #E9EEF3; --fs: rgba(233,238,243,.82); --fsweep: #16202B; --fname: #ffffff; }

.mrh-feature { background: var(--ff); color: var(--fi); }

.mrh-feature-sweep {
	position: absolute;
	z-index: 0;
	right: -10%;
	bottom: -30%;
	width: 72%;
	height: 88%;
	border-radius: 58% 0 0 0;
	background: var(--fsweep);
	pointer-events: none;
}

.mrh-feature-numeral {
	position: absolute;
	z-index: 0;
	right: -3%;
	top: 30%;
	font-size: clamp(150px, 23vw, 300px);
	font-weight: 900;
	font-variation-settings: "wdth" 125, "wght" 900;
	line-height: .72;
	letter-spacing: -.04em;
	color: color-mix(in srgb, var(--fi) 16%, transparent);
	pointer-events: none;
	user-select: none;
}

.mrh-feature-rail {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 52px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 26px;
	color: var(--fs);
}
.mrh-rail-left { left: 0; }
.mrh-rail-right { right: 0; }
.mrh-feature-rail span {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	white-space: nowrap;
}
.mrh-rail-left span { writing-mode: vertical-rl; transform: rotate(180deg); }
.mrh-rail-right span { writing-mode: vertical-rl; }
.mrh-feature-rail i { display: block; width: 1px; height: 34px; background: currentColor; opacity: .45; }

.mrh-feature-figure {
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 66%;
	transform: translateX(-50%);
	height: 100%;
	display: flex;
	align-items: flex-end;
}
.mrh-feature-figure img {
	height: 100%;
	width: auto;
	max-width: none;
	display: block;
	object-fit: contain;
	object-position: bottom;
}

/* Type sits behind the figure: he crosses in front of his own name. */
.mrh-feature-type { position: absolute; z-index: 1; left: 70px; bottom: 52px; max-width: 60%; }
.mrh-feature-kick {
	font-size: clamp(15px, 1.7vw, 21px);
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	margin: 0 0 2px;
	color: var(--fi);
}
.mrh-feature-name {
	font-size: clamp(42px, 7.2vw, 100px);
	font-weight: 900;
	font-variation-settings: "wdth" 118, "wght" 900;
	text-transform: uppercase;
	line-height: .84;
	letter-spacing: -.025em;
	margin: 0;
	color: var(--fname);
}
.mrh-feature-facts {
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin: 20px 0 0;
	color: var(--fs);
}
.mrh-feature-cta {
	display: inline-block;
	margin-top: 22px;
	padding: 14px 34px;
	border-radius: 999px;
	border: 2px solid currentColor;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--fi);
	transition: background .15s ease, color .15s ease;
}
.mrh-feature-cta:hover,
.mrh-feature-cta:focus { background: var(--fi); color: var(--ff); }

.mrh-feature-badge {
	position: absolute;
	z-index: 5;
	width: 126px;
	height: 126px;
	top: 38px;
	right: 74px;
	color: var(--fi);
	text-decoration: none;
	display: block;
}
.mrh-feature-badge svg { width: 100%; height: 100%; animation: mrh-spin 22s linear infinite; }
.mrh-feature-badge-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}
@keyframes mrh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.mrh-feature-badge svg { animation: none; }
	.mrh-feature-cta { transition: none; }
}

@media (max-width: 820px) {
	.mrh-feature { min-height: 0; }
	.mrh-feature-rail { display: none; }
	.mrh-feature-badge { width: 92px; height: 92px; top: 18px; right: 18px; }
	.mrh-feature-type { position: static; padding: 34px 22px 0; max-width: none; }
	.mrh-feature-figure {
		position: relative;
		left: auto;
		transform: none;
		height: auto;
		max-width: 420px;
		margin: 0 auto;
	}
	.mrh-feature-figure img { width: 100%; height: auto; }
	.mrh-feature-numeral { font-size: 140px; top: auto; bottom: 6%; }
}

/* ---------------------------------------------------------------------------
   Match photography.
   Documentary tier: no filters, no duotone, no overlay. The hero can be as
   rendered as it likes — this is the surface a scout judges him on.
   --------------------------------------------------------------------------- */
.mrh-shots {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.mrh-shot {
	position: relative;
	margin: 0;
	grid-column: span 1;
	overflow: hidden;
	border-radius: 10px;
	background: #0d1218;
	aspect-ratio: 3 / 2;
}
.mrh-shot-lead { grid-column: span 4; aspect-ratio: 2 / 1; }
/* The lead frame crops hardest, and he is high in it — hold the top. */
.mrh-shot-lead img { object-position: center 34%; }
.mrh-shot img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center 42%;
}

@media (max-width: 860px) {
	.mrh-shots { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.mrh-shot-lead { grid-column: span 2; aspect-ratio: 16 / 9; }
}

/* ===========================================================================
   Editorial hero.

   A full-bleed photograph rather than a cut-out on a colour field. The grade is
   a two-layer duotone: greyscale the photo, `lighten` a shadow colour so blacks
   land on it, `darken` a highlight colour so whites land on it. The tonal range
   is then compressed between two chosen colours, which is what makes a busy
   suburban touchline read as one deliberate image.
   =========================================================================== */
/* Break out of a constrained column: a hero that stops short of the viewport
   edge reads as a banner, not a hero. */
.mrh-ed,
.mrh-ed-nav,
.mrh-site--dark .mrh-strip {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

.mrh-ed {
	--ed-shadow: #060A0F;
	--ed-high: #C6D4E2;
	--ed-accent: #E9EEF3;
	position: relative;
	isolation: isolate;
	min-height: clamp(560px, 88svh, 940px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--ed-shadow);
	color: #fff;
	font-family: "Archivo", var(--mrh-font, inherit), system-ui, sans-serif;
}

.mrh-ed-ink   { --ed-shadow: #060A0F; --ed-high: #C6D4E2; --ed-accent: #E9EEF3; }
.mrh-ed-gold  { --ed-shadow: #100E08; --ed-high: #EBDCAE; --ed-accent: #F2E6C4; }
.mrh-ed-steel { --ed-shadow: #0A2E5C; --ed-high: #CDE4F8; --ed-accent: #EAF4FF; }

.mrh-ed-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	isolation: isolate;
	overflow: hidden;
}
.mrh-ed-img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	filter: grayscale(1) contrast(1.1) brightness(1.02);
	transform: scale(1.06);
	animation: mrh-ed-drift 26s ease-out forwards;
}
.mrh-ed-duo-a,
.mrh-ed-duo-b,
.mrh-ed-scrim { position: absolute; inset: 0; pointer-events: none; }
.mrh-ed-duo-a { background: var(--ed-shadow); mix-blend-mode: lighten; }
.mrh-ed-duo-b { background: var(--ed-high); mix-blend-mode: darken; }

/* Keeps the type legible wherever the crop lands, without dimming the whole frame. */
.mrh-ed-scrim {
	background:
		/* The type sits on the photograph, so the photograph cannot be trusted to
		   provide contrast — a bright patch of sky or kit behind a caption drops
		   it below 4.5:1. These plates guarantee a floor under the text zones
		   rather than dimming the whole frame. */
		linear-gradient(to top,
			color-mix(in srgb, var(--ed-shadow) 96%, transparent) 0%,
			color-mix(in srgb, var(--ed-shadow) 88%, transparent) 26%,
			color-mix(in srgb, var(--ed-shadow) 55%, transparent) 46%,
			transparent 68%),
		linear-gradient(to bottom,
			color-mix(in srgb, var(--ed-shadow) 82%, transparent) 0%,
			color-mix(in srgb, var(--ed-shadow) 40%, transparent) 12%,
			transparent 26%),
		linear-gradient(to right, color-mix(in srgb, var(--ed-shadow) 62%, transparent) 0%, transparent 64%),
		radial-gradient(120% 90% at 50% 0%, transparent 40%, color-mix(in srgb, var(--ed-shadow) 45%, transparent) 100%);
}

/* Photograph: no duotone, just a grade. For when the real colours are the point. */
.mrh-ed-photograph .mrh-ed-img { filter: contrast(1.08) saturate(1.06); }
.mrh-ed-photograph .mrh-ed-duo-a,
.mrh-ed-photograph .mrh-ed-duo-b { display: none; }

@keyframes mrh-ed-drift {
	from { transform: scale(1.06); }
	to   { transform: scale(1.005); }
}

.mrh-ed-rail {
	position: absolute;
	z-index: 3;
	left: 0;
	top: 0;
	bottom: 0;
	width: 54px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	color: rgba(255, 255, 255, .92);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .24em;
	text-shadow: 0 1px 14px rgba(0, 0, 0, .55);
	text-transform: uppercase;
}
.mrh-ed-rail span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.mrh-ed-rail i { width: 1px; height: 40px; background: currentColor; opacity: .5; }

/* The mark and the marginalia share one row, so they cannot collide and the
   page has an identity of its own once the theme's header is out of the way. */
.mrh-ed-top {
	position: absolute;
	z-index: 4;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: clamp(18px, 2.4vw, 30px) clamp(20px, 3vw, 42px) 0 clamp(64px, 6vw, 96px);
}
.mrh-ed-mark {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: #fff;
}
.mrh-ed-mono {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 7px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .04em;
	backdrop-filter: blur(4px);
}
.mrh-ed-wordmark {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .26em;
	text-transform: uppercase;
	text-shadow: 0 1px 14px rgba(0, 0, 0, .55);
}
.mrh-ed-meta {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .94);
	text-shadow: 0 1px 14px rgba(0, 0, 0, .7);
	text-align: right;
}

.mrh-ed-lockup {
	position: relative;
	z-index: 3;
	padding: 0 clamp(24px, 5vw, 76px) clamp(46px, 7vw, 92px) clamp(64px, 7vw, 104px);
	max-width: min(1180px, 100%);
}
.mrh-ed-eyebrow {
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--ed-accent);
}
.mrh-ed-name { margin: 0; line-height: .82; text-transform: uppercase; }
.mrh-ed-given {
	display: block;
	font-size: clamp(15px, 1.9vw, 26px);
	font-weight: 500;
	font-variation-settings: "wdth" 100, "wght" 500;
	letter-spacing: .48em;
	margin-bottom: clamp(6px, 1vw, 14px);
	color: #ffffff;
}
.mrh-ed-family {
	display: block;
	font-size: clamp(48px, 10.5vw, 168px);
	font-weight: 800;
	font-variation-settings: "wdth" 112, "wght" 800;
	letter-spacing: -.03em;
	color: #fff;
}
.mrh-ed-facts {
	margin: clamp(18px, 2.4vw, 30px) 0 0;
	font-size: clamp(11px, 1.05vw, 13px);
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .94);
}
.mrh-ed-actions { margin: clamp(22px, 2.6vw, 32px) 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.mrh-ed-cta {
	display: inline-block;
	padding: 13px 26px;
	border-radius: 999px;
	background: #fff;
	color: #0B1017;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.mrh-ed-cta:hover, .mrh-ed-cta:focus-visible { transform: translateY(-2px); }
.mrh-ed-cta-ghost {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}
.mrh-ed-cta-ghost:hover, .mrh-ed-cta-ghost:focus-visible { background: rgba(255, 255, 255, .12); }

.mrh-ed-scroll {
	position: absolute;
	z-index: 3;
	right: 44px;
	bottom: 44px;
	width: 26px;
	height: 44px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}
.mrh-ed-scroll span {
	position: absolute;
	left: 50%;
	top: 10px;
	width: 3px;
	height: 8px;
	margin-left: -1.5px;
	border-radius: 2px;
	background: #fff;
	animation: mrh-ed-scroll 1.9s ease-in-out infinite;
}
@keyframes mrh-ed-scroll {
	0%, 100% { transform: translateY(0); opacity: 1; }
	60%      { transform: translateY(16px); opacity: .15; }
}

/* The Nadal move: destinations, not decoration, directly under the hero. */
.mrh-ed-nav {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: #0B1017;
	border-top: 1px solid rgba(255, 255, 255, .08);
}
.mrh-ed-nav a {
	position: relative;
	padding: clamp(20px, 2.6vw, 32px) clamp(16px, 2.4vw, 34px);
	text-decoration: none;
	color: #fff;
	border-left: 1px solid rgba(255, 255, 255, .08);
	transition: background-color .22s ease;
}
.mrh-ed-nav a:first-child { border-left: 0; }
.mrh-ed-nav a:hover, .mrh-ed-nav a:focus-visible { background: rgba(255, 255, 255, .06); }
.mrh-ed-nav strong {
	display: block;
	font-size: clamp(14px, 1.5vw, 20px);
	font-weight: 700;
	letter-spacing: .01em;
	text-transform: uppercase;
}
.mrh-ed-nav span {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	color: rgba(255, 255, 255, .55);
}

@media (max-width: 900px) {
	.mrh-ed { min-height: clamp(520px, 82svh, 760px); align-items: flex-end; }
	.mrh-ed-rail, .mrh-ed-scroll { display: none; }
	.mrh-ed-top { padding: 16px 18px 0; }
	.mrh-ed-wordmark { display: none; }
	.mrh-ed-meta { font-size: 10px; letter-spacing: .16em; max-width: 62%; }
	.mrh-ed-lockup { padding: 0 22px 40px; }
	.mrh-ed-nav { grid-template-columns: repeat(2, 1fr); }
	.mrh-ed-nav a:nth-child(3), .mrh-ed-nav a:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, .08); }
	.mrh-ed-nav a:nth-child(odd) { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.mrh-ed-img { animation: none; transform: none; }
	.mrh-ed-scroll span { animation: none; }
	.mrh-ed-cta { transition: none; }
}

/* ===========================================================================
   Editorial theme.

   The hero was the elite part and the rest of the page read like a plugin. This
   pins the dark palette, widens the type scale and gives the sections real
   rhythm, so the page below the fold belongs to the same object as the hero.
   Applied by the shortcode only when the editorial hero is in use, so the
   existing light profile is untouched for anyone on the other hero styles.
   =========================================================================== */
.mrh-site--dark {
	--mrh-ink: #F4F6F8;
	--mrh-paper: #0B1017;
	--mrh-muted: #98A3AE;
	--mrh-line: rgba(244, 246, 248, .14);
	--mrh-accent: #C8A94B;
	--mrh-rule: rgba(244, 246, 248, .1);
	background: var(--mrh-paper);
	color: var(--mrh-ink);
	/* Paint the dark ground edge to edge without changing layout, so the theme
	   survives being dropped into a constrained Divi column. */
	box-shadow: 0 0 0 100vmax var(--mrh-paper);
	clip-path: inset(0 -100vmax);
}
.mrh-site--dark .mrh-film,
.mrh-site--dark .mrh-matches {
	--mrh-ink: #F4F6F8;
	--mrh-paper: #0B1017;
	--mrh-muted: #98A3AE;
	--mrh-line: rgba(244, 246, 248, .14);
	--mrh-accent: #C8A94B;
	color: var(--mrh-ink);
}

/* The container has to breathe like an editorial page, not a content column. */
.mrh-site--dark .mrh-section {
	padding: clamp(56px, 7.5vw, 118px) clamp(0px, 2vw, 0px);
	border-top: 1px solid var(--mrh-rule);
}
.mrh-site--dark .mrh-section-head {
	max-width: min(52rem, 100%);
	margin: 0 0 clamp(30px, 4vw, 50px);
}
.mrh-site--dark .mrh-section-head h2 {
	font-size: clamp(30px, 4.6vw, 58px);
	line-height: 1.02;
	letter-spacing: -.028em;
	margin: 0;
}
.mrh-site--dark .mrh-section-head p {
	margin: 20px 0 0;
	font-size: clamp(15.5px, 1.35vw, 18px);
	line-height: 1.66;
	max-width: 36rem;
	color: #AEB8C2;
}
.mrh-site--dark .mrh-kicker {
	color: var(--mrh-accent);
	letter-spacing: .26em;
	font-size: 11px;
	margin: 0 0 16px;
}

/* Fact band: one row, aligned baselines, no orphaned second lines. */
.mrh-site--dark .mrh-strip {
	display: grid;
	/* Fixed columns, not auto-fit: seven facts belong on one line, and auto-fit
	   was leaving a lone cell on a row of its own. */
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
	background: var(--mrh-rule);
	border-top: 1px solid var(--mrh-rule);
	border-bottom: 1px solid var(--mrh-rule);
}
.mrh-site--dark .mrh-strip div {
	background: var(--mrh-paper);
	padding: clamp(20px, 2.4vw, 30px) 12px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 8px;
	min-height: 104px;
}
.mrh-site--dark .mrh-strip strong {
	font-size: clamp(15px, 1.75vw, 25px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.06;
}
.mrh-site--dark .mrh-strip span {
	font-size: 10px;
	letter-spacing: .2em;
	color: var(--mrh-muted);
}

.mrh-site--dark .mrh-traits { gap: clamp(24px, 3vw, 44px); }
.mrh-site--dark .mrh-traits article {
	border-top: 1px solid var(--mrh-ink);
	padding-top: 18px;
}
.mrh-site--dark .mrh-traits span { color: var(--mrh-accent); letter-spacing: .18em; }
.mrh-site--dark .mrh-traits h3 { font-size: clamp(17px, 1.8vw, 22px); margin: 10px 0 10px; }
.mrh-site--dark .mrh-traits p { font-size: 15px; line-height: 1.6; }

.mrh-site--dark .mrh-video { border-radius: 12px; overflow: hidden; }
.mrh-site--dark .mrh-film-head {
	letter-spacing: .22em;
	color: var(--mrh-accent);
	margin: clamp(34px, 4vw, 52px) 0 14px;
}

.mrh-site--dark .mrh-btn {
	border-color: rgba(244, 246, 248, .32);
	color: var(--mrh-ink);
	border-radius: 999px;
	padding: 12px 24px;
	font-size: 12px;
	letter-spacing: .14em;
}
.mrh-site--dark .mrh-btn:hover,
.mrh-site--dark .mrh-btn:focus { background: rgba(244, 246, 248, .12); color: var(--mrh-ink); }
.mrh-site--dark .mrh-btn.mrh-primary { background: var(--mrh-ink); color: var(--mrh-paper); border-color: var(--mrh-ink); }
.mrh-site--dark .mrh-btn.mrh-primary:hover,
.mrh-site--dark .mrh-btn.mrh-primary:focus { background: var(--mrh-accent); border-color: var(--mrh-accent); color: #10130C; }

/* Empty states should read as "not yet", not as a broken page. */
.mrh-site--dark .mrh-empty {
	border: 1px dashed var(--mrh-line);
	border-radius: 12px;
	padding: clamp(26px, 3.4vw, 40px);
	color: var(--mrh-muted);
	font-size: 15px;
	margin: 0;
}

.mrh-site--dark .mrh-shot { background: #0F151D; }

.mrh-foot {
	border-top: 1px solid var(--mrh-rule);
	padding: 34px 0 46px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 26px;
	align-items: baseline;
	justify-content: space-between;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #8E99A4;
}
.mrh-foot a { color: var(--mrh-muted); text-decoration: none; border-bottom: 1px solid transparent; }
.mrh-foot a:hover, .mrh-foot a:focus-visible { color: var(--mrh-ink); border-bottom-color: currentColor; }

@media (max-width: 1040px) {
	.mrh-site--dark .mrh-strip { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 700px) {
	.mrh-site--dark .mrh-strip { grid-template-columns: repeat(3, 1fr); }
	/* At three columns the seventh fact is alone on its row and the grid's rule
	   colour shows as a slab behind it. Let it span. */
	.mrh-site--dark .mrh-strip div:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
	.mrh-site--dark .mrh-strip div { min-height: 88px; padding: 16px 8px; }
	.mrh-site--dark .mrh-strip strong { font-size: 17px; }
	.mrh-ed-meta { font-size: 10px; letter-spacing: .16em; }
	.mrh-foot { flex-direction: column; gap: 10px; }
}