/* =============================================================
   Unequal Justice Report — front-end styles
   Scoped to .ujr- classes + body.ujr-report-page page overrides
   ============================================================= */

/* -------------------------------------------------------------
   TYPE SCALE — read this before changing any size.

   Metro Pro sets html { font-size: 62.5% }, so on the FRONT END
   1rem = 10px. The block editor runs on a normal 16px root. The
   same scale is therefore declared twice below; both resolve to
   identical pixel sizes. Comments give the intended px value.

   Change sizes ONLY via these tokens — never inline in a rule.
   ------------------------------------------------------------- */

body.ujr-report-page,
.ujr-tokens {
	/* display / UI — Oswald */
	--ujr-t-hero:     clamp(4.4rem, 8.4vw, 8rem);      /* 44 → 80 */
	--ujr-t-h2:       clamp(3.4rem, 4.9vw, 5rem);      /* 34 → 50 */
	--ujr-t-h3:       clamp(2.4rem, 3vw, 3.4rem);      /* 24 → 34 */
	--ujr-t-title-sm: 2.1rem;                          /* 21 */
	--ujr-t-stat:     clamp(4.6rem, 6.4vw, 7.4rem);    /* 46 → 74 */
	--ujr-t-label:    1.5rem;                          /* 15 */
	--ujr-t-eyebrow:  1.7rem;                          /* 17 */
	--ujr-t-nav:      1.35rem;                         /* 13.5 */
	--ujr-t-micro:    1.25rem;                         /* 12.5 */

	/* body — Source Serif */
	--ujr-t-lead:     clamp(2.2rem, 2.6vw, 2.8rem);    /* 22 → 28 */
	--ujr-t-body:     2rem;                            /* 20 */
	--ujr-t-body-sm:  1.8rem;                          /* 18 */
	--ujr-t-caption:  1.4rem;                          /* 14 */

	/* layout */
	--ujr-measure:    68rem;                           /* 680 — ~68 chars */
	--ujr-w-wide:     112rem;                          /* 1120 */
	--ujr-w-mid:      88rem;                           /* 880 */
	--ujr-w-narrow:   78rem;                           /* 780 */
	--ujr-w-case:     86rem;                           /* 860 */
	--ujr-pad-y:      clamp(5.6rem, 7vw, 8.8rem);      /* 56 → 88 */
	--ujr-pad-x:      2.4rem;                          /* 24 */
}

/* Same scale for the block editor's 16px root (front-end value ÷ 1.6). */
.editor-styles-wrapper {
	--ujr-t-hero:     clamp(2.75rem, 8.4vw, 5rem);
	--ujr-t-h2:       clamp(2.125rem, 4.9vw, 3.125rem);
	--ujr-t-h3:       clamp(1.5rem, 3vw, 2.125rem);
	--ujr-t-title-sm: 1.3125rem;
	--ujr-t-stat:     clamp(2.875rem, 6.4vw, 4.625rem);
	--ujr-t-label:    0.9375rem;
	--ujr-t-eyebrow:  1.0625rem;
	--ujr-t-nav:      0.84375rem;
	--ujr-t-micro:    0.78125rem;

	--ujr-t-lead:     clamp(1.375rem, 2.6vw, 1.75rem);
	--ujr-t-body:     1.25rem;
	--ujr-t-body-sm:  1.125rem;
	--ujr-t-caption:  0.875rem;

	--ujr-measure:    42.5rem;
	--ujr-w-wide:     70rem;
	--ujr-w-mid:      55rem;
	--ujr-w-narrow:   48.75rem;
	--ujr-w-case:     53.75rem;
	--ujr-pad-y:      clamp(3.5rem, 7vw, 5.5rem);
	--ujr-pad-x:      1.5rem;
}

:root {
	--ujr-maroon: #800000;
	--ujr-maroon-deep: #5d0a0a;
	--ujr-ink: #1c1917;
	--ujr-ink-soft: #56504a;
	--ujr-paper: #f7f4ee;
	--ujr-line: #e2ddd4;
	--ujr-dark: #221e1b;
	--ujr-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	--ujr-display: "Oswald", "Arial Narrow", sans-serif;

	--ujr-bar-bg: #14110f;
	--ujr-bar-fg: #f7f4ee;
	--ujr-bar-mute: #a8a19a;
	--ujr-bar-accent: #c0554f;
	--ujr-bar-h: 64px;                 /* written by JS from the bar's measured bottom */

	--ujr-lh-body: 1.62;
	--ujr-lh-snug: 1.5;
	--ujr-lh-tight: 1.12;
}

/* ---------- page-level: quiet the theme on report pages ---------- */

body.ujr-report-page {
	background: #fff;
	overflow-x: clip;
}

/* Metro Pro is a boxed theme. The ONLY thing stopping the full-bleed bands
   escaping is `overflow: hidden` on .site-container — the negative-margin
   technique already works through any number of centred ancestors. So clear
   the clip and the vertical spacing, and leave max-width, horizontal padding
   and auto-centring exactly as the theme sets them.

   Do not override .wrap here. The theme ladders .site-container/.wrap at
   1140 → 960 → 772px; pinning it to one value squeezes the site header and
   wraps the main menu onto a second row. */
body.ujr-report-page .site-container {
	overflow: visible;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

body.ujr-report-page .site-inner,
body.ujr-report-page .content {
	padding: 0;
	background: transparent;
}

body.ujr-report-page .entry {
	padding: 0;
	margin: 0;
	background: transparent;
}

body.ujr-report-page .entry-header,
body.ujr-report-page .entry-title {
	display: none;
}

body.ujr-report-page .content .entry-content .ujr-full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* full-bleed helper */
.ujr-full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Beat the theme's .entry-content ul/li rules inside report components. */
.ujr-bar .ujr-bar__list,
.ujr-bar .ujr-bar__item,
.ujr-contents .ujr-contents__list,
.ujr-contents .ujr-contents__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ujr-key-facts .ujr-key-facts__body ul,
.ujr-other-cases .ujr-other-cases__body ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ujr-key-facts .ujr-key-facts__body li,
.ujr-other-cases .ujr-other-cases__body li {
	list-style: none;
}

.ujr-key-facts .ujr-key-facts__body li::marker,
.ujr-other-cases .ujr-other-cases__body li::marker {
	content: none;
}

.ujr-reforms .ujr-reforms__list,
.ujr-reforms .ujr-reform {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ujr-reforms .ujr-reform::marker {
	content: none;
}

.ujr-hero,
.ujr-bar,
.ujr-contents,
.ujr-stat-band,
.ujr-reforms,
.ujr-section {
	box-sizing: border-box;
}

.ujr-hero *,
.ujr-bar *,
.ujr-contents *,
.ujr-stat-band *,
.ujr-reforms *,
.ujr-section * {
	box-sizing: inherit;
}

/* ---------- hero ---------- */

.ujr-hero {
	background:
		radial-gradient(120% 90% at 20% 0%, rgba(128, 0, 0, 0.35), transparent 60%),
		linear-gradient(160deg, #2b2320 0%, var(--ujr-dark) 55%, #191512 100%);
	color: #fff;
	padding: clamp(7rem, 11vw, 13rem) var(--ujr-pad-x) clamp(6rem, 9vw, 10rem);
	text-align: center;
}

.ujr-hero__inner {
	max-width: var(--ujr-w-mid);
	margin: 0 auto;
}

.ujr-hero__eyebrow {
	font-family: var(--ujr-display);
	font-weight: 500;
	font-size: var(--ujr-t-eyebrow);
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: #d9ab84;
	margin: 0 0 2.4rem;
}

.ujr-hero .ujr-hero__title {
	font-family: var(--ujr-display);
	font-weight: 700;
	font-size: var(--ujr-t-hero);
	line-height: 0.98;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 2.4rem;
}

.ujr-hero__subtitle {
	text-wrap: balance;
	font-family: var(--ujr-serif);
	font-style: italic;
	font-size: var(--ujr-t-lead);
	line-height: var(--ujr-lh-snug);
	color: #ece5dc;
	max-width: 80rem;
	margin: 0 auto 3rem;
}

.ujr-hero__rule {
	width: 7rem;
	height: 4px;
	background: var(--ujr-maroon);
	margin: 0 auto 2.4rem;
}

.ujr-hero__meta {
	font-family: var(--ujr-display);
	font-weight: 400;
	font-size: var(--ujr-t-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #a99f95;
	margin: 0;
}

.ujr-hero__actions {
	margin: 3.2rem 0 0;
}

.ujr-btn,
.ujr-btn:visited {
	display: inline-block;
	font-family: var(--ujr-display);
	font-weight: 500;
	font-size: var(--ujr-t-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	background: var(--ujr-maroon);
	padding: 1.4rem 2.8rem;
	text-decoration: none;
	border: none;
	transition: background 0.2s ease;
}

.ujr-btn:hover,
.ujr-btn:focus {
	background: var(--ujr-maroon-deep);
	color: #fff;
}

/* ---------- screen-reader utility ---------- */

.ujr-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- static contents index ----------
   In flow, right after the hero. This is the primary index and the
   bypass-blocks route (WCAG G124), which is what allows the fixed bar to be
   relocated late in the DOM without an ordering problem.                    */

.ujr-contents {
	background: var(--ujr-paper);
	border-top: 1px solid var(--ujr-line);
	border-bottom: 1px solid var(--ujr-line);
	padding: clamp(4rem, 6vw, 6.5rem) var(--ujr-pad-x);
}

.ujr-contents__inner {
	max-width: var(--ujr-w-narrow);
	margin: 0 auto;
}

.ujr-contents .ujr-contents__heading {
	font-family: var(--ujr-display);
	font-weight: 600;
	font-size: var(--ujr-t-label);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ujr-maroon);
	margin: 0 0 2.6rem;
}

.ujr-contents .ujr-contents__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--ujr-line);
}

.ujr-contents .ujr-contents__item {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--ujr-line);
}

.ujr-contents__link,
.ujr-contents__link:visited {
	display: grid;
	grid-template-columns: 4.4rem 1fr;
	gap: 1.6rem;
	align-items: baseline;
	min-height: 48px;
	padding: 1.8rem 1.2rem;
	text-decoration: none;
	color: var(--ujr-ink);
	transition: background-color 0.16s ease;
}

.ujr-contents__link:hover,
.ujr-contents__link:focus-visible {
	background: rgba(28, 25, 23, 0.04);
}

.ujr-contents__link:focus-visible {
	outline: 2px solid var(--ujr-ink);
	outline-offset: 2px;
}

.ujr-contents__num {
	font-family: var(--ujr-display);
	font-weight: 600;
	font-size: var(--ujr-t-title-sm);
	line-height: 1;
	color: var(--ujr-maroon);
	text-align: right;
}

.ujr-contents__body {
	display: block;
}

.ujr-contents__title {
	display: block;
	font-family: var(--ujr-display);
	font-weight: 500;
	font-size: var(--ujr-t-title-sm);
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--ujr-ink);
}

.ujr-contents__link:hover .ujr-contents__title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ujr-contents__dek {
	display: block;
	font-family: var(--ujr-serif);
	font-style: italic;
	font-size: var(--ujr-t-body-sm);
	line-height: 1.45;
	color: var(--ujr-ink-soft);
	margin-top: 0.5rem;
}

.ujr-contents__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.6rem;
	margin-top: 0.8rem;
	font-family: var(--ujr-serif);
	font-size: var(--ujr-t-caption);
	color: var(--ujr-ink-soft);
}

.ujr-contents__mins {
	min-width: 6ch;
	visibility: hidden;
	font-style: italic;
}

.ujr-contents__mins.is-filled {
	visibility: visible;
}

@media (max-width: 600px) {
	.ujr-contents__link {
		grid-template-columns: 3rem 1fr;
		gap: 1.2rem;
		padding: 1.6rem 0.4rem;
	}
}

/* Reveal trigger, sitting immediately after the contents index. Needs a real
   box — a bare inline span has zero area and cannot be observed. */
[data-ujr-bar-sentinel] {
	display: block;
	height: 1px;
	margin-top: -1px;
}

/* ---------- masthead bar ----------
   One opaque surface, fixed to the top, carrying a one-word label per section
   so every section name is visible at every width. No disclosure, no hover
   reveal, no horizontal scroll — the list wraps if it must.                 */

.ujr-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 90;                       /* above the report, below the case panel (1000) */
	background: var(--ujr-bar-bg);
	border-bottom: 1px solid rgba(247, 244, 238, 0.16);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
	overflow: visible;                 /* never clip a focus ring */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-100%);
	transition:
		opacity 0.24s cubic-bezier(0.2, 0.6, 0.2, 1),
		transform 0.24s cubic-bezier(0.2, 0.6, 0.2, 1),
		visibility 0s linear 0.24s;
}

.ujr-bar.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

body.admin-bar .ujr-bar { top: 32px; }
@media (max-width: 782px) { body.admin-bar .ujr-bar { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .ujr-bar { top: 0; } }

/* The bar lives on <body>, outside the .site-container that gets `inert`
   when a case story opens — so it needs its own suppression. */
body.ujr-immersive-open .ujr-bar {
	display: none;
}

.ujr-bar__inner {
	display: flex;
	align-items: center;
	gap: 2.4rem;
	max-width: 128rem;
	margin: 0 auto;
	padding: 0 2.4rem;
	min-height: 6.4rem;
}

.ujr-bar__mark,
.ujr-bar__mark:visited {
	flex: 0 0 auto;
	font-family: var(--ujr-display);
	font-weight: 600;
	font-size: 1.15rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ujr-bar-mute);
	text-decoration: none;
	white-space: nowrap;
}

.ujr-bar__mark:hover,
.ujr-bar__mark:focus-visible {
	color: var(--ujr-bar-fg);
}

.ujr-bar__nav {
	flex: 1 1 auto;
	min-width: 0;
}

.ujr-bar .ujr-bar__list {
	display: flex;
	flex-wrap: wrap;                   /* the only permitted overflow behaviour */
	justify-content: space-between;
	column-gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ujr-bar .ujr-bar__item {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ujr-bar__link,
.ujr-bar__link:visited {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.8rem;
	height: 4.4rem;
	padding: 0 1.2rem;
	text-decoration: none;
	color: var(--ujr-bar-mute);
	transition: color 0.12s ease;
}

.ujr-bar__link:focus-visible {
	outline: 2px solid var(--ujr-bar-fg);
	outline-offset: 2px;
}

.ujr-bar__chip {
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	border: 1px solid rgba(247, 244, 238, 0.42);
	border-radius: 50%;
	font-family: var(--ujr-display);
	font-weight: 500;
	font-size: 1.2rem;
	line-height: 1;
	color: var(--ujr-bar-mute);
	transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.ujr-bar__label {
	font-family: var(--ujr-display);
	font-weight: 400;
	font-size: 1.3rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color 0.12s ease;
}

/* underline track + within-section fill, inset by the link's own padding */
.ujr-bar__link::after,
.ujr-bar__link::before {
	content: '';
	position: absolute;
	left: 1.2rem;
	right: 1.2rem;
	bottom: 0;
	height: 2px;
}

.ujr-bar__link::after {
	background: rgba(247, 244, 238, 0.18);
}

.ujr-bar__link::before {
	background: var(--ujr-bar-accent);
	transform: scaleX(0);
	transform-origin: left;
	z-index: 1;
}

.ujr-bar__link.is-current::before {
	transform: scaleX(var(--fill, 0));
	transition: transform 0.12s linear;
}

.ujr-bar__link.is-passed::after {
	background: rgba(247, 244, 238, 0.5);
}

.ujr-bar__link.is-passed .ujr-bar__chip {
	background: rgba(247, 244, 238, 0.18);
	border-color: transparent;
}

.ujr-bar__link.is-current {
	color: var(--ujr-bar-fg);
}

.ujr-bar__link.is-current .ujr-bar__label {
	color: var(--ujr-bar-fg);
	font-weight: 500;
}

.ujr-bar__link.is-current .ujr-bar__chip {
	background: var(--ujr-bar-fg);
	border-color: var(--ujr-bar-fg);
	color: var(--ujr-bar-bg);
}

.ujr-bar__link:hover .ujr-bar__label {
	color: var(--ujr-bar-fg);
}

.ujr-bar__link:hover .ujr-bar__chip {
	border-color: rgba(247, 244, 238, 0.75);
}

.ujr-bar__link:hover::after {
	background: rgba(247, 244, 238, 0.32);
}

/* readout + jump: only ever shown in the short-viewport variant */
.ujr-bar__now,
.ujr-bar__jump {
	display: none;
}

/* --- tier B: drop the wordmark --- */
@media (max-width: 1439px) {
	.ujr-bar__mark { display: none; }
}

/* --- tier C: bare numerals --- */
@media (max-width: 1199px) {
	.ujr-bar__inner { min-height: 6rem; }
	.ujr-bar__link { height: 4.2rem; gap: 0.5rem; }

	.ujr-bar__chip {
		width: auto;
		height: auto;
		border: 0;
		background: none !important;
		border-radius: 0;
		font-size: 1.1rem;
		color: var(--ujr-bar-mute);
	}

	.ujr-bar__link.is-current .ujr-bar__chip {
		color: var(--ujr-bar-fg);
	}
}

/* --- tablet --- */
@media (max-width: 1023px) {
	.ujr-bar__inner {
		max-width: none;
		padding: 0 2rem;
		min-height: 5.6rem;
	}

	.ujr-bar__link { padding: 0 1rem; height: 4rem; }
	.ujr-bar__link::after,
	.ujr-bar__link::before { left: 1rem; right: 1rem; }
	.ujr-bar__label { font-size: 1.2rem; }
}

/* --- mobile: the list wraps rather than scrolls --- */
@media (max-width: 767px) {
	.ujr-bar__inner {
		padding: 0.4rem 1.6rem;
		min-height: 0;
	}

	.ujr-bar .ujr-bar__list {
		justify-content: center;       /* space-between spreads a short last row */
		column-gap: 0.2rem;
		row-gap: 0;
	}

	.ujr-bar__link { height: 3.4rem; padding: 0 0.8rem; }
	.ujr-bar__link::after,
	.ujr-bar__link::before { left: 0.8rem; right: 0.8rem; }
	.ujr-bar__label { font-size: 1.15rem; }
	.ujr-bar__chip { font-size: 1.05rem; }
}

/* --- short viewport (landscape phone, ~400% zoom): readout strip --- */
@media (max-height: 520px) {
	.ujr-bar__nav { display: none; }

	.ujr-bar__inner {
		justify-content: space-between;
		min-height: 3.4rem;
		padding: 0 1.6rem;
	}

	.ujr-bar__now {
		display: flex;
		align-items: baseline;
		gap: 0.6rem;
		margin: 0;
		font-family: var(--ujr-display);
		font-weight: 500;
		font-size: 1.2rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--ujr-bar-fg);
	}

	.ujr-bar__now-num { color: var(--ujr-bar-mute); }

	.ujr-bar__jump,
	.ujr-bar__jump:visited {
		display: inline-flex;
		align-items: center;
		height: 4rem;
		padding: 0 1.2rem;
		border: 1px solid rgba(247, 244, 238, 0.42);
		font-family: var(--ujr-display);
		font-weight: 500;
		font-size: 1.2rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--ujr-bar-fg);
		text-decoration: none;
		white-space: nowrap;
	}
}

/* --- section-end navigation --- */

.ujr-section__next {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.6rem;
	max-width: var(--ujr-measure);
	margin: clamp(4rem, 6vw, 6rem) auto 0;
	padding-top: 2.4rem;
	border-top: 1px solid var(--ujr-line);
}

.ujr-section__nextLink,
.ujr-section__nextLink:visited {
	display: block;
	min-height: 48px;
	padding: 0.6rem 0;
	text-decoration: none;
	color: var(--ujr-ink);
}

.ujr-section__nextEyebrow {
	display: block;
	font-family: var(--ujr-display);
	font-weight: 500;
	font-size: var(--ujr-t-micro);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ujr-maroon);
	margin-bottom: 0.4rem;
}

.ujr-section__nextTitle {
	display: block;
	font-family: var(--ujr-display);
	font-weight: 500;
	font-size: var(--ujr-t-title-sm);
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.ujr-section__nextLink:hover .ujr-section__nextTitle {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ujr-section__nextToc,
.ujr-section__nextToc:visited {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	font-family: var(--ujr-display);
	font-weight: 500;
	font-size: var(--ujr-t-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ujr-ink-soft);
	text-decoration: none;
	border-bottom: 1px solid var(--ujr-line);
}

.ujr-section__nextToc:hover,
.ujr-section__nextToc:focus-visible {
	color: var(--ujr-maroon);
	border-bottom-color: var(--ujr-maroon);
}

.ujr-section__nextLink:focus-visible,
.ujr-section__nextToc:focus-visible {
	outline: 2px solid var(--ujr-ink);
	outline-offset: 2px;
}

/* --- forced colors --- */
@media (forced-colors: active) {
	.ujr-bar {
		background: Canvas;
		border-bottom: 1px solid CanvasText;
		box-shadow: none;
	}

	.ujr-bar__link { color: LinkText; }
	.ujr-bar__link::after { background: CanvasText; }
	.ujr-bar__link.is-passed::after { background: GrayText; }

	.ujr-bar__link[aria-current] {
		background: Highlight;
		color: HighlightText;
	}

	.ujr-bar__link[aria-current]::before { background: HighlightText; }
	.ujr-bar__chip { border-color: CanvasText; }
}

@media (prefers-contrast: more) {
	.ujr-bar__link { color: #d6d1ca; }
	.ujr-bar__chip { border-color: rgba(247, 244, 238, 0.7); }
	.ujr-bar__link::after { background: rgba(247, 244, 238, 0.35); }
}

@media (prefers-reduced-motion: reduce) {
	.ujr-bar {
		transform: none;
		transition: opacity 0s, visibility 0s;
	}

	.ujr-bar__link,
	.ujr-bar__label,
	.ujr-bar__chip,
	.ujr-bar__link.is-current::before {
		transition: none;
	}
}

@media print {
	.ujr-bar { display: none; }
}

/* ---------- stat band ---------- */

.ujr-stat-band {
	background: linear-gradient(135deg, var(--ujr-maroon) 0%, var(--ujr-maroon-deep) 100%);
	color: #fff;
	padding: clamp(5rem, 6.5vw, 7.5rem) var(--ujr-pad-x);
}

.ujr-stat-band__inner {
	display: flex;
	justify-content: center;
	gap: clamp(3rem, 6vw, 7rem);
	flex-wrap: wrap;
	max-width: var(--ujr-w-wide);
	margin: 0 auto;
	text-align: center;
}

.ujr-stat {
	flex: 1 1 22rem;
	max-width: 30rem;
}

.ujr-stat__value {
	display: block;
	font-family: var(--ujr-display);
	font-weight: 700;
	font-size: var(--ujr-t-stat);
	line-height: 1;
	margin-bottom: 1rem;
}

.ujr-stat__label {
	display: block;
	font-family: var(--ujr-serif);
	font-size: var(--ujr-t-body-sm);
	line-height: var(--ujr-lh-snug);
	color: #f4e7e3;
}

/* ---------- reforms unit chart ---------- */

.ujr-matrix {
	background: var(--ujr-dark);
	color: #efe9e2;
	padding: var(--ujr-pad-y) var(--ujr-pad-x);
}

.ujr-matrix__inner {
	max-width: var(--ujr-w-wide);
	margin: 0 auto;
}

.ujr-matrix .ujr-matrix__heading {
	text-wrap: balance;
	font-family: var(--ujr-display);
	font-weight: 600;
	font-size: var(--ujr-t-h2);
	line-height: var(--ujr-lh-tight);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #fff;
	text-align: center;
	margin: 0 0 1.6rem;
}

.ujr-matrix__intro {
	font-family: var(--ujr-serif);
	font-size: var(--ujr-t-lead);
	line-height: var(--ujr-lh-snug);
	color: #b8ada2;
	text-align: center;
	max-width: 62rem;
	margin: 0 auto;
}

.ujr-matrix__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(30rem, 38rem);
	gap: clamp(3rem, 5vw, 6rem);
	align-items: start;
	margin-top: clamp(4rem, 6vw, 6rem);
}

/* the grid of people */

.ujr-matrix__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(1.8rem, 1fr));
	gap: 0.6rem;
}

.ujr-matrix__dot {
	aspect-ratio: 1;
	background: rgba(255, 255, 255, 0.11);
	border-radius: 1px;
	transition: background-color 0.45s ease, transform 0.45s ease;
}

.ujr-matrix__dot.is-on {
	background: var(--ujr-maroon);
	background: linear-gradient(150deg, #a11414 0%, var(--ujr-maroon) 100%);
	transform: scale(1.06);
}

.ujr-matrix__unit {
	font-family: var(--ujr-serif);
	font-style: italic;
	font-size: var(--ujr-t-caption);
	color: #8e857c;
	margin: 1.8rem 0 0;
}

/* readout + reform picker */

.ujr-matrix__readout {
	border-left: 4px solid var(--ujr-maroon);
	padding-left: 2.2rem;
	margin-bottom: 3.4rem;
	min-height: 16rem;
}

.ujr-matrix__count {
	margin: 0 0 1rem;
	line-height: 1;
}

.ujr-matrix__count-num {
	font-family: var(--ujr-display);
	font-weight: 700;
	font-size: var(--ujr-t-stat);
	color: #fff;
	display: block;
}

.ujr-matrix__count-of {
	font-family: var(--ujr-display);
	font-weight: 400;
	font-size: var(--ujr-t-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #a99f95;
	display: block;
	margin-top: 0.8rem;
}

.ujr-matrix__desc {
	font-family: var(--ujr-serif);
	font-size: var(--ujr-t-body-sm);
	line-height: 1.6;
	color: #d6cdc3;
	margin: 0 0 1.6rem;
}

.ujr-matrix__jump,
.ujr-matrix__jump:visited {
	font-family: var(--ujr-display);
	font-weight: 500;
	font-size: var(--ujr-t-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #e2a98d;
	text-decoration: none;
	border-bottom: 1px solid rgba(226, 169, 141, 0.4);
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.ujr-matrix__jump:hover,
.ujr-matrix__jump:focus {
	color: #fff;
	border-bottom-color: #fff;
}

.ujr-matrix__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.ujr-matrix__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ujr-matrix__btn {
	display: grid;
	grid-template-columns: 8.5rem 1fr auto;
	align-items: center;
	gap: 1.4rem;
	width: 100%;
	text-align: left;
	background: rgba(255, 255, 255, 0.04);
	border: 0;
	border-left: 3px solid transparent;
	padding: 1.4rem 1.6rem;
	cursor: pointer;
	color: #cdc4ba;
	font: inherit;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ujr-matrix__btn:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.ujr-matrix__btn.is-active {
	background: rgba(128, 0, 0, 0.35);
	border-left-color: var(--ujr-maroon);
	color: #fff;
}

.ujr-matrix__btn-year {
	font-family: var(--ujr-display);
	font-weight: 500;
	font-size: var(--ujr-t-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #93887e;
	white-space: nowrap;
}

.ujr-matrix__btn.is-active .ujr-matrix__btn-year {
	color: #e2a98d;
}

.ujr-matrix__btn-label {
	font-family: var(--ujr-display);
	font-weight: 500;
	font-size: var(--ujr-t-label);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.25;
}

.ujr-matrix__btn-count {
	font-family: var(--ujr-display);
	font-weight: 700;
	font-size: var(--ujr-t-title-sm);
	color: #fff;
	opacity: 0.35;
	transition: opacity 0.2s ease;
}

.ujr-matrix__btn.is-active .ujr-matrix__btn-count,
.ujr-matrix__btn:hover .ujr-matrix__btn-count {
	opacity: 1;
}

@media (max-width: 900px) {
	.ujr-matrix__layout {
		grid-template-columns: 1fr;
	}

	.ujr-matrix__readout {
		min-height: 0;
	}

	.ujr-matrix__btn {
		grid-template-columns: 7.5rem 1fr auto;
		gap: 1rem;
		padding: 1.2rem 1.2rem;
	}
}

/* Heading rules below are scoped with their parent block class on purpose.
   The theme/plugin stack carries element-scoped rules (e.g. `.entry-content h2`,
   specificity 0,1,1) that silently out-rank a bare single class — h2s were
   rendering at the theme's 36px instead of the token value. Two classes wins. */

/* ---------- report sections ---------- */

.ujr-section {
	background: #fff;
	padding: var(--ujr-pad-y) var(--ujr-pad-x);
}

section.ujr-section:nth-of-type(even) {
	background: var(--ujr-paper);
}

.ujr-section__inner {
	max-width: var(--ujr-w-wide);
	margin: 0 auto;
}

/* Wider than the prose measure so the larger titles can breathe; the dek is
   pulled back in so it still reads as a short line, not a paragraph. */
.ujr-section__header {
	max-width: 82rem;
	margin: 0 auto clamp(3.5rem, 5vw, 5.5rem);
	text-align: center;
}

.ujr-section__eyebrow {
	font-family: var(--ujr-display);
	font-weight: 500;
	font-size: var(--ujr-t-eyebrow);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ujr-maroon);
	margin: 0 0 1.8rem;
}

.ujr-section .ujr-section__title {
	text-wrap: balance;
	font-family: var(--ujr-display);
	font-weight: 600;
	font-size: var(--ujr-t-h2);
	line-height: var(--ujr-lh-tight);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--ujr-ink);
	margin: 0 0 1.6rem;
}

.ujr-section__dek {
	text-wrap: balance;
	font-family: var(--ujr-serif);
	font-style: italic;
	font-size: var(--ujr-t-lead);
	line-height: var(--ujr-lh-snug);
	color: var(--ujr-ink-soft);
	max-width: 66rem;
	margin: 0 auto 2.6rem;
}

.ujr-section__rule {
	width: 6rem;
	height: 3px;
	background: var(--ujr-maroon);
	margin: 0 auto;
}

/* prose inside sections */

.ujr-section__content > p,
.ujr-section__content > ul,
.ujr-section__content > ol,
.ujr-section__content > h3,
.ujr-section__content > h4,
.ujr-section__content > blockquote {
	max-width: var(--ujr-measure);
	margin-left: auto;
	margin-right: auto;
}

.ujr-section__content > p {
	font-family: var(--ujr-serif);
	font-size: var(--ujr-t-body);
	line-height: var(--ujr-lh-body);
	color: var(--ujr-ink);
	margin-bottom: 2.6rem;
}

/* Drop cap — cap-height spans exactly three lines, cap top aligned to the
   first line's cap top, baseline resting on the third line's baseline.
   Derived from measured metrics rather than eyeballed:
     Oswald cap-height 0.81em, ascent 1.19em, descent 0.29em
     Source Serif cap-height 0.67em, ascent 1.04em, descent 0.34em
     body line-height 1.62em
   required cap-height = 2 × 1.62 + 0.67   = 3.91em  (body)
   font-size           = 3.91 / 0.81       = 4.83em  (body)
   With line-height:1 the glyph's cap top sits 0.14em below the box top (its
   own em), while line 1's cap top is 0.49em (body) below the content top —
   hence the small negative margin-top. Measured result: cap top and baseline
   both land within 0.3px of lines 1 and 3.
   margin-bottom is deliberately a shade under the arithmetic value: the float
   box must finish just *inside* three line boxes (97.2px), because landing
   even 0.1px past pushes a fourth line into the indent.
   All values are em-relative, so this holds at the mobile body size too. */
.ujr-section__content > p:first-child::first-letter {
	font-family: var(--ujr-display);
	font-weight: 600;
	font-size: 4.83em;
	line-height: 1;
	float: left;
	margin: -0.038em 0.07em 0.03em 0;
	padding: 0;
	color: var(--ujr-maroon);
	-webkit-font-smoothing: antialiased;
}

.ujr-section__content > ul li,
.ujr-section__content > ol li {
	font-family: var(--ujr-serif);
	font-size: var(--ujr-t-body-sm);
	line-height: 1.7;
	margin-bottom: 1.2rem;
}

.ujr-section__content a {
	color: var(--ujr-maroon);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.ujr-section__content a:hover {
	color: var(--ujr-maroon-deep);
}

/* scroll offset below sticky bar */
[data-ujr-section] {
	scroll-margin-top: calc(var(--ujr-bar-h) + 16px);
}

/* ---------- key facts ---------- */

.ujr-key-facts {
	max-width: var(--ujr-w-narrow);
	margin: 4rem auto;
	background: #fff;
	border: 1px solid var(--ujr-line);
	border-left: 6px solid var(--ujr-maroon);
	box-shadow: 0 8px 28px rgba(28, 25, 23, 0.07);
	padding: 3rem 3.4rem;
}

section.ujr-section:nth-of-type(even) .ujr-key-facts {
	background: #fffdf9;
}

.ujr-key-facts .ujr-key-facts__heading {
	font-family: var(--ujr-display);
	font-weight: 600;
	font-size: var(--ujr-t-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ujr-maroon);
	margin: 0 0 1.8rem;
}

.ujr-key-facts__body li {
	position: relative;
	font-family: var(--ujr-serif);
	font-size: var(--ujr-t-body-sm);
	line-height: 1.62;
	color: var(--ujr-ink);
	padding-left: 2.2rem;
	margin: 0 0 1.4rem;
}

.ujr-key-facts__body li:last-child {
	margin-bottom: 0;
}

.ujr-key-facts__body li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.8rem;
	height: 0.8rem;
	background: var(--ujr-maroon);
}

/* ---------- case story ---------- */

.ujr-case {
	display: grid;
	grid-template-columns: minmax(20rem, 26rem) 1fr;
	gap: 3.4rem;
	max-width: var(--ujr-w-case);
	margin: 4.5rem auto;
	background: var(--ujr-dark);
	color: #efe9e2;
	padding: 3.4rem;
}

.ujr-case__figure {
	margin: 0;
}

.ujr-case__photo {
	display: block;
	width: 100%;
	height: auto;
	filter: grayscale(35%);
}

.ujr-case__caption {
	font-family: var(--ujr-serif);
	font-style: italic;
	font-size: var(--ujr-t-caption);
	color: #a99f95;
	margin-top: 0.9rem;
}

.ujr-case__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 4;
	background:
		linear-gradient(160deg, rgba(128, 0, 0, 0.5), rgba(128, 0, 0, 0.15)),
		#332c27;
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.ujr-case__initials {
	font-family: var(--ujr-display);
	font-weight: 700;
	font-size: 4.4rem;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.05em;
}

.ujr-case__kicker {
	font-family: var(--ujr-display);
	font-weight: 500;
	font-size: var(--ujr-t-micro);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #d9ab84;
	margin: 0 0 1rem;
}

.ujr-case .ujr-case__name {
	font-family: var(--ujr-display);
	font-weight: 600;
	font-size: var(--ujr-t-h3);
	line-height: var(--ujr-lh-tight);
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 1.2rem;
}

.ujr-case__dek {
	font-family: var(--ujr-serif);
	font-style: italic;
	font-size: var(--ujr-t-lead);
	line-height: var(--ujr-lh-snug);
	color: #d9d0c6;
	margin: 0 0 2rem;
}

.ujr-case__content p {
	font-family: var(--ujr-serif);
	font-size: var(--ujr-t-body-sm);
	line-height: var(--ujr-lh-body);
	color: #e7e0d8;
	margin-bottom: 1.8rem;
}

.ujr-case__content p:last-child {
	margin-bottom: 0;
}

.ujr-case__content a {
	color: #e9bba9;
}

.ujr-case__summary {
	font-family: var(--ujr-serif);
	font-size: var(--ujr-t-body-sm);
	line-height: var(--ujr-lh-body);
	color: #e7e0d8;
	margin: 0 0 2.2rem;
}

.ujr-case__open {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	font-family: var(--ujr-display);
	font-weight: 500;
	font-size: var(--ujr-t-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #221e1b;
	background: #e5ded5;
	border: 0;
	padding: 1.2rem 2rem;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ujr-case__open:hover,
.ujr-case__open:focus-visible {
	background: #fff;
	transform: translateY(-1px);
}

/* ---------- immersive case panel ----------
   Without JS the panel is just part of the report, so the story always reads.
   `is-ready` is added on init (JS present), which takes it out of flow; `is-open`
   turns it into the full-viewport takeover.                                   */

.ujr-immersive {
	max-width: var(--ujr-w-case);
	margin: 4.5rem auto;
	background: var(--ujr-dark);
	color: #efe9e2;
	padding: 3.4rem;
}

.ujr-immersive.is-ready {
	display: none;
}

.ujr-immersive.is-ready.is-open {
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(0, 58%);
	position: fixed;
	inset: 0;
	z-index: 1000;
	max-width: none;
	margin: 0;
	padding: 0;
	background: #14100f;
}

body.ujr-immersive-open {
	overflow: hidden;
}

/* portrait column */

.ujr-immersive__media {
	position: relative;
	height: 100%;
	overflow: hidden;
	background: #241d1a;
}

.ujr-immersive__media .ujr-case__media,
.ujr-immersive__media .ujr-case__figure {
	height: 100%;
	margin: 0;
}

.ujr-immersive__media .ujr-case__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(30%);
}

.ujr-immersive__media .ujr-case__placeholder {
	height: 100%;
	aspect-ratio: auto;
	border: 0;
}

.ujr-immersive__media .ujr-case__initials {
	font-size: clamp(6rem, 9vw, 12rem);
}

.ujr-immersive__media .ujr-case__caption {
	position: absolute;
	left: 2.4rem;
	right: 2.4rem;
	bottom: 2rem;
	margin: 0;
	color: #cbc1b7;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
}

/* reading column */

.ujr-immersive__panel {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.ujr-immersive__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex: 0 0 auto;
	padding: 2rem 2rem 2rem 4rem;
}

.ujr-immersive__kicker {
	font-family: var(--ujr-display);
	font-weight: 500;
	font-size: var(--ujr-t-micro);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #d9ab84;
	margin: 0;
}

.ujr-immersive__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.4rem;
	height: 4.4rem;
	font-size: 2.8rem;
	line-height: 1;
	color: #b9afa5;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.16);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ujr-immersive__close:hover,
.ujr-immersive__close:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
}

.ujr-immersive__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 clamp(2.4rem, 4vw, 5rem) clamp(4rem, 6vw, 7rem) clamp(2.4rem, 4vw, 4rem);
}

.ujr-immersive__scroll:focus {
	outline: none;
}

.ujr-immersive__inner {
	max-width: 62rem;
}

.ujr-immersive__head {
	margin-bottom: 3.4rem;
}

.ujr-immersive .ujr-immersive__name {
	font-family: var(--ujr-display);
	font-weight: 600;
	font-size: var(--ujr-t-h2);
	line-height: var(--ujr-lh-tight);
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 1.4rem;
	text-wrap: balance;
}

.ujr-immersive__dek {
	font-family: var(--ujr-serif);
	font-style: italic;
	font-size: var(--ujr-t-lead);
	line-height: var(--ujr-lh-snug);
	color: #cfc5bb;
	margin: 0 0 2.2rem;
	text-wrap: balance;
}

.ujr-immersive__rule {
	width: 6rem;
	height: 3px;
	background: var(--ujr-maroon);
}

.ujr-immersive__content p {
	font-family: var(--ujr-serif);
	font-size: var(--ujr-t-body);
	line-height: var(--ujr-lh-body);
	color: #e4ddd5;
	margin: 0 0 2.4rem;
}

.ujr-immersive__content a {
	color: #e9bba9;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ujr-immersive__back {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	margin-top: 1.6rem;
	font-family: var(--ujr-display);
	font-weight: 500;
	font-size: var(--ujr-t-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #e2a98d;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.18);
	padding: 1.3rem 2.2rem;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ujr-immersive__back:hover,
.ujr-immersive__back:focus-visible {
	background: rgba(255, 255, 255, 0.07);
	border-color: var(--ujr-maroon);
	color: #fff;
}

@media (max-width: 900px) {
	.ujr-immersive.is-ready.is-open {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}

	.ujr-immersive__media {
		height: 34vh;
		min-height: 22rem;
	}

	.ujr-immersive__bar {
		padding: 1.6rem 1.6rem 1.6rem 2.4rem;
	}
}

/* ---------- transition choreography ----------
   Opening: the report recedes and dims while the panel arrives; the portrait
   is tagged with a shared view-transition-name on both sides, so the browser
   morphs it from its place in the card to its place in the panel.
   Closing runs the same movement in reverse.                                 */

@keyframes ujr-vt-recede { to   { opacity: 0; transform: scale(0.955); } }
@keyframes ujr-vt-return { from { opacity: 0; transform: scale(0.955); } }
@keyframes ujr-vt-arrive { from { opacity: 0; transform: scale(1.03);  } }
@keyframes ujr-vt-depart { to   { opacity: 0; transform: scale(1.03);  } }

html.ujr-vt-opening::view-transition-old(root) {
	animation: ujr-vt-recede 460ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

html.ujr-vt-opening::view-transition-new(root) {
	animation: ujr-vt-arrive 460ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

html.ujr-vt-closing::view-transition-old(root) {
	animation: ujr-vt-depart 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

html.ujr-vt-closing::view-transition-new(root) {
	animation: ujr-vt-return 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* The portrait rides above the fading report and keeps its framing while the
   group animates position and size. */
::view-transition-group(ujr-case-portrait) {
	z-index: 10;
	animation-duration: 520ms;
	animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(ujr-case-portrait),
::view-transition-new(ujr-case-portrait) {
	height: 100%;
	width: 100%;
	object-fit: cover;
	overflow: clip;
}

/* Soft fade where view transitions are unavailable. */
@supports not (view-transition-name: none) {
	.ujr-immersive.is-ready.is-open {
		animation: ujr-immersive-fade 300ms ease both;
	}

	@keyframes ujr-immersive-fade {
		from { opacity: 0; }
	}
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}

	.ujr-immersive.is-ready.is-open {
		animation: none;
	}
}

/* ---------- other cases ---------- */

.ujr-other-cases {
	max-width: var(--ujr-w-narrow);
	margin: 4rem auto;
	padding: 0;
}

.ujr-other-cases .ujr-other-cases__heading {
	font-family: var(--ujr-display);
	font-weight: 600;
	font-size: var(--ujr-t-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ujr-ink);
	border-bottom: 2px solid var(--ujr-maroon);
	padding-bottom: 1rem;
	margin: 0 0 2rem;
}

.ujr-other-cases__body li {
	font-family: var(--ujr-serif);
	font-size: var(--ujr-t-body-sm);
	line-height: 1.7;
	color: var(--ujr-ink);
	border-left: 3px solid var(--ujr-line);
	padding: 0.4rem 0 0.4rem 2rem;
	margin: 0 0 2rem;
	transition: border-color 0.2s ease;
}

.ujr-other-cases__body li:hover {
	border-left-color: var(--ujr-maroon);
}

.ujr-other-cases__body li:last-child {
	margin-bottom: 0;
}

/* ---------- animations ---------- */

.ujr-animate {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.ujr-animate.is-inview {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ujr-animate {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.ujr-reform__bar-fill {
		transition: none;
	}

	html {
		scroll-behavior: auto !important;
	}
}

html.ujr-smooth {
	scroll-behavior: smooth;
}

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

@media (max-width: 860px) {
	.ujr-case {
		grid-template-columns: 1fr;
		gap: 2.4rem;
		padding: 2.6rem;
	}

	.ujr-case__placeholder {
		max-width: 20rem;
		margin: 0 auto;
	}
}

@media (max-width: 600px) {
	/* Buy back reading width on small screens: narrower gutters and a
	   slightly smaller body size lift the measure from ~33 to ~36 chars. */
	body.ujr-report-page {
		--ujr-pad-x: 1.8rem;
		--ujr-t-body: 1.9rem;
	}

	.ujr-key-facts__body li {
		padding-left: 1.8rem;
	}

	.ujr-other-cases__body li {
		padding-left: 1.6rem;
	}
}

@media (max-width: 767px) {
	.ujr-key-facts {
		padding: 2.2rem 2.2rem;
	}

	.ujr-reform__link {
		padding: 2.2rem 2rem 2rem;
	}

	/* No drop-cap size override here: the 4.83em value is em-relative, so it
	   already rescales with the smaller mobile body size and keeps its
	   three-line span. Hard-coding a size here breaks that. */
}