/* ==========================================================================
   Mr Balaclava Journal — design system and shared components.
   Loaded on journal pages only (inc/journal.php). Article-only styles live in
   journal-article.css. Everything is scoped under .jr-page so the site header,
   footer and other templates are unaffected.

   Tokens: brief §2, values unchanged. Derived shades use color-mix() on the
   tokens (brief: "derive via color-mix(), do not add a new hex"). The single
   added colour is --amber for the warning callout, which the brief allows
   ("introduce one amber token").
   ========================================================================== */

/* Self-hosted Space Grotesk (approved over Google Fonts for GDPR, 2026-09-22). */
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
.jr-page {
	/* Surfaces */
	--bg: #F2F5F7;
	--surface: #FFFFFF;
	--line: #DCE4EA;
	--line-soft: #E4EBF0;
	--line-faint: #EEF2F4;
	--dark: #0A1A20;
	/* Text */
	--ink: #0E1418;
	--muted: #4A5A66;
	--muted-2: #8FA0AC;
	/* Brand */
	--brand: #13566E;
	--brand-d: #0E4560;
	--brand-xd: #0A3346;
	--brand-l: #D4EAF2;
	--brand-xl: #4AB8D4;
	--green: #1A7A5A;
	/* Radii */
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 16px;
	--r-xl: 20px;
	/* Motion */
	--ease: cubic-bezier(.32, .72, 0, 1);
	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(19, 86, 110, .20);
	--shadow-md: 0 8px 20px rgba(19, 86, 110, .16);
	--shadow-lg: 0 24px 60px -20px rgba(14, 69, 96, .50), 0 4px 12px rgba(14, 69, 96, .15);

	/* Derived (color-mix of tokens only) */
	/* --muted-2 is 2.6:1 on --bg; small text uses this 4.7:1 mix instead (WCAG AA). */
	--muted-2-text: color-mix(in srgb, var(--muted-2) 65%, var(--ink));
	/* Mid teal used by the pv1/pv2/pv4 gradients (≈ #2A7A98 in the reference). */
	--brand-m: color-mix(in srgb, var(--brand) 60%, var(--brand-xl));
	--brand-tint: color-mix(in srgb, var(--brand) 9%, var(--surface));
	--on-dark: var(--brand-l);
	--glass: color-mix(in srgb, var(--on-fill) 16%, transparent);
	--glass-line: color-mix(in srgb, var(--on-fill) 26%, transparent);
	/* The one added colour (warning callout). 5.9:1 on white. */
	--amber: #8A5A00;

	/* Semantic roles. Light values equal the brief tokens; dark mode (below) remaps them. */
	--on-fill: var(--surface);           /* text/lines on brand, photo or dark panels: always white */
	--brand-text: var(--brand);          /* brand-coloured text, borders, focus rings */
	--brand-text-hover: var(--brand-d);
	--brand-fill: var(--brand);          /* brand-filled buttons */
	--brand-fill-hover: var(--brand-d);
	--tint-info: var(--brand-l);         /* info callout, pull quote */
	--success-text: var(--green);
	--amber-text: var(--amber);

	--font-display: 'Space Grotesk', 'Inter', sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--wrap: 1320px;
	--pad: 40px;
	--r-btn: 10px;
	--r-chip: 7px;
	--t-fast: 150ms;
	--t-base: 250ms;
	--t-slow: 350ms;
	--jr-sticky-top: 120px;

	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	letter-spacing: -.005em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

/* ---------- Dark appearance ----------
   Follows the site's Appearance switch (header: Light / Dark / System), which sets
   html[data-theme="night"]. Values come from the site's own night palette
   (--mrb-color-*, assets/css/appearance.css) or color-mix() of it, so no new colours.
   Contrast (WCAG AA): ink/muted on surface ≥ 7:1, --muted-2-text ≥ 4.7:1,
   --brand-text 7:1, white on --brand-fill 4.8:1. Gradient visuals, the B2B card
   and photo overlays keep their brand colours in both modes. */
[data-theme="night"] .jr-page {
	color-scheme: dark;
	--bg: var(--mrb-color-bg);
	--surface: color-mix(in srgb, var(--mrb-color-bg) 92%, var(--mrb-color-text));
	--line: color-mix(in srgb, var(--mrb-color-bg) 82%, var(--mrb-color-text));
	--line-soft: color-mix(in srgb, var(--mrb-color-bg) 88%, var(--mrb-color-text));
	--line-faint: color-mix(in srgb, var(--mrb-color-bg) 90%, var(--mrb-color-text));
	--ink: var(--mrb-color-text);
	--muted: var(--mrb-color-muted);
	--muted-2: color-mix(in srgb, var(--mrb-color-muted) 55%, var(--mrb-color-bg));
	--muted-2-text: color-mix(in srgb, var(--mrb-color-muted) 82%, var(--mrb-color-bg));
	--on-fill: var(--mrb-color-on-primary);
	--brand-text: var(--mrb-color-link);
	--brand-text-hover: color-mix(in srgb, var(--mrb-color-link) 70%, var(--mrb-color-text));
	--brand-fill: var(--mrb-color-primary);
	--brand-fill-hover: var(--mrb-color-primary-hover);
	--brand-tint: color-mix(in srgb, var(--mrb-color-link) 14%, var(--surface));
	--tint-info: color-mix(in srgb, var(--mrb-color-link) 16%, var(--surface));
	--success-text: color-mix(in srgb, var(--green) 40%, var(--mrb-color-text));
	--amber-text: color-mix(in srgb, var(--amber) 45%, var(--mrb-color-text));
	--shadow-sm: 0 1px 2px color-mix(in srgb, var(--mrb-color-bg) 60%, transparent);
	--shadow-md: 0 8px 20px color-mix(in srgb, var(--mrb-color-bg) 55%, transparent);
	--shadow-lg: 0 24px 60px -20px color-mix(in srgb, var(--mrb-color-bg) 85%, transparent), 0 4px 12px color-mix(in srgb, var(--mrb-color-bg) 50%, transparent);
}

/* ---------- Scoped reset (the theme styles bare elements globally) ----------
   :where() keeps these at element-level specificity: they still beat the theme's
   bare element rules (this file loads later) but never a component class. */
:where(.jr-page) :is(h1, h2, h3, h4) {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--ink);
	overflow-wrap: break-word;
}
:where(.jr-page) p { margin: 0; }
:where(.jr-page) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.jr-page) figure { margin: 0; }
:where(.jr-page) :is(dl, dd) { margin: 0; }
:where(.jr-page) a { color: inherit; text-decoration: none; }
:where(.jr-page) img { display: block; max-width: 100%; height: auto; }
:where(.jr-page) button {
	min-block-size: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	cursor: pointer;
}
:where(.jr-page) button:hover { background: none; }
.jr-page :focus-visible {
	outline: 2px solid var(--brand-text);
	outline-offset: 3px;
	border-radius: 4px;
}
.jr-page .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.jr-main:focus { outline: none; }

/* ---------- Layout primitives ---------- */
.jr-wrap {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--pad);
}
.jr-section { padding-block: 56px; }
.jr-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.jr-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: 28px;
}
.jr-section-desc { max-width: 560px; margin-top: 10px; color: var(--muted); font-size: 15.5px; }
.jr-deferred { content-visibility: auto; contain-intrinsic-size: auto 640px; }

/* ---------- Type ---------- */
.jr-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--brand-text);
}
.jr-eyebrow--line::before, .jr-kicker--line::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
}
.jr-page .jr-h2 {
	margin-top: 10px;
	font-size: clamp(28px, 2.6vw, 38px);
	letter-spacing: -.03em;
	line-height: 1.1;
}
.jr-page .jr-h2--sm { margin-top: 0; font-size: clamp(22px, 2vw, 26px); letter-spacing: -.028em; }
.jr-lead { font-size: 18px; line-height: 1.65; color: var(--muted); }
.jr-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--brand-text);
}
.jr-side-label {
	margin-bottom: 12px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--muted-2-text);
}
.jr-page .jr-side-label { font-family: var(--font-body); font-weight: 700; color: var(--muted-2-text); }
.jr-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--brand-text);
}
.jr-arrow-link .jr-icon { transition: transform var(--t-base) var(--ease); }
.jr-arrow-link:hover { color: var(--brand-text-hover); }
.jr-arrow-link:hover .jr-icon { transform: translateX(3px); }
.jr-icon { flex: none; }

/* ---------- Buttons ---------- */
.jr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: var(--r-btn);
	font-family: var(--font-body);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.005em;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.jr-page .jr-btn--brand { background: var(--brand-fill); color: var(--on-fill); }
.jr-page .jr-btn--brand:hover { background: var(--brand-fill-hover); }
.jr-page .jr-btn--ghost { border-color: var(--line); background: var(--surface); color: var(--ink); }
.jr-page .jr-btn--ghost:hover { border-color: var(--brand-text); color: var(--brand-text); background: var(--surface); }
.jr-page .jr-btn--white { background: var(--on-fill); color: var(--brand-xd); }
.jr-page .jr-btn--white:hover { background: color-mix(in srgb, var(--on-fill) 82%, var(--brand-xl)); }
.jr-page .jr-btn--outline-light { border-color: color-mix(in srgb, var(--on-fill) 38%, transparent); color: var(--on-fill); }
.jr-page .jr-btn--outline-light:hover { border-color: var(--on-fill); }
.jr-btn-arrow { display: inline-flex; transition: transform var(--t-base) var(--ease); }
.jr-btn:hover .jr-btn-arrow { transform: translateX(4px); }

/* ---------- Chips ---------- */
.jr-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: var(--r-chip);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
}
.jr-chip--light { background: var(--on-fill); color: var(--brand-xd); }
.jr-chip--glass {
	border: 1px solid var(--glass-line);
	background: var(--glass);
	color: var(--on-fill);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	letter-spacing: .06em;
}
.jr-page .jr-chip--brand { background: var(--brand-tint); color: var(--brand-text); }
.jr-page a.jr-chip--brand:hover { background: var(--brand-fill); color: var(--on-fill); }
.jr-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }

.jr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jr-chips[hidden] { display: none; }
.jr-cchip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ink);
	transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.jr-page button.jr-cchip { background: var(--surface); }
.jr-cchip:hover { border-color: var(--brand-text); }
.jr-page .jr-cchip.is-active, .jr-page .jr-cchip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.jr-cchip-count { font-size: 12px; font-weight: 600; color: var(--muted-2-text); }
.jr-cchip.is-active .jr-cchip-count, .jr-cchip[aria-pressed="true"] .jr-cchip-count { color: color-mix(in srgb, var(--surface) 72%, transparent); }
.jr-cchip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-text); }
.jr-cchip.is-active .jr-cchip-dot { background: var(--brand-xl); }
.jr-page .jr-cchip--soft { border-color: transparent; background: var(--line-soft); }
.jr-page .jr-cchip--soft:hover { border-color: var(--brand-text); background: var(--line-soft); }
/* On the tinted chip the lighter count colour drops to 4.3:1; --muted keeps it above 4.5:1. */
.jr-cchip--soft .jr-cchip-count { color: var(--muted); }

.jr-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.jr-tag {
	display: inline-flex;
	padding: 4px 9px;
	border-radius: var(--r-chip);
	background: var(--line-soft);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--muted);
}

/* ---------- Avatars ---------- */
.jr-avatar {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--brand);
	color: var(--on-fill);
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1;
}
.jr-avatar--28 { width: 28px; height: 28px; font-size: 10px; letter-spacing: -.02em; }
.jr-avatar--40 { width: 40px; height: 40px; font-size: 14px; }
.jr-avatar--48 { width: 48px; height: 48px; font-size: 16px; }
.jr-avatar--64 { width: 64px; height: 64px; font-size: 21px; }
.jr-avatar--96 { width: 96px; height: 96px; font-size: 30px; }
.jr-avatar--glass { border: 1px solid var(--glass-line); background: var(--glass); }
.jr-avatar-stack { display: inline-flex; }
.jr-avatar-stack .jr-avatar { box-shadow: 0 0 0 2px var(--line-soft); }
.jr-avatar-stack .jr-avatar + .jr-avatar { margin-left: -4px; }
.jr-avatar-stack .jr-avatar:nth-child(2) { background: var(--brand-d); }
.jr-avatar-stack .jr-avatar:nth-child(3) { background: var(--green); }
.jr-avatar-stack .jr-avatar:nth-child(4) { background: var(--brand-xd); }

/* ---------- Bylines ---------- */
.jr-byline--compact { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.jr-byline--compact .jr-byline-name { overflow: hidden; font-size: 13px; font-weight: 600; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Knit visual ---------- */
.jr-visual {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	aspect-ratio: 16 / 10;
	background: var(--brand);
	color: var(--on-fill);
}
.jr-visual--pv1 { background: linear-gradient(140deg, var(--brand), var(--brand-m)); }
.jr-visual--pv2 { background: linear-gradient(140deg, var(--brand-d), var(--brand-m)); }
.jr-visual--pv3 { background: linear-gradient(140deg, var(--brand-xd), var(--brand)); }
.jr-visual--pv4 { background: linear-gradient(140deg, var(--brand-m), var(--brand-xl)); }
.jr-visual--pv5 { background: linear-gradient(140deg, var(--brand-d), var(--green)); }
.jr-visual--pv6 { background: linear-gradient(140deg, var(--brand), var(--brand-xd)); }
.jr-visual--pvhero { background: linear-gradient(155deg, var(--brand), var(--brand-d), var(--brand-xd)); }
.jr-visual-img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.jr-visual-knit, .jr-visual-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.jr-visual-knit {
	background-image:
		linear-gradient(115deg, color-mix(in srgb, var(--on-fill) 7%, transparent) 1px, transparent 1px),
		linear-gradient(-115deg, color-mix(in srgb, var(--on-fill) 5%, transparent) 1px, transparent 1px);
	background-size: 12px 12px;
	opacity: .6;
	mix-blend-mode: overlay;
}
.jr-visual-vignette { background: radial-gradient(circle at 50% 50%, transparent 30%, color-mix(in srgb, var(--dark) 35%, transparent) 100%); }
.jr-visual--photo .jr-visual-vignette {
	background:
		linear-gradient(to top, color-mix(in srgb, var(--dark) 55%, transparent), transparent 45%),
		radial-gradient(circle at 50% 50%, transparent 30%, color-mix(in srgb, var(--dark) 35%, transparent) 100%);
}
.jr-visual-num {
	position: absolute;
	right: 12px;
	bottom: -.2em;
	z-index: 2;
	font-family: var(--font-display);
	font-size: 128px;
	font-weight: 700;
	letter-spacing: -.06em;
	line-height: 1;
	color: color-mix(in srgb, var(--on-fill) 14%, transparent);
	pointer-events: none;
	user-select: none;
}
.jr-visual-tag, .jr-visual-tl { position: absolute; top: 14px; left: 14px; z-index: 3; }
.jr-visual-tr { position: absolute; top: 14px; right: 14px; z-index: 3; }
.jr-visual-br { position: absolute; right: 14px; bottom: 14px; z-index: 3; }

/* ---------- PostCard ---------- */
.jr-card { min-width: 0; }
.jr-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.jr-card-link:hover {
	border-color: color-mix(in srgb, var(--line) 70%, var(--ink));
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}
.jr-card-body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px 22px 20px; }
.jr-page .jr-card-title {
	font-size: 19px;
	letter-spacing: -.022em;
	line-height: 1.28;
	transition: color var(--t-fast) var(--ease);
}
.jr-card-link:hover .jr-card-title { color: var(--brand-text); }
.jr-card-excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--muted);
}
.jr-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--line-faint);
}
.jr-card-time { display: inline-flex; flex: none; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--muted-2-text); }
.jr-card--lead .jr-visual { aspect-ratio: 16 / 9; }
.jr-card--lead .jr-card-body { gap: 12px; padding: 26px 28px; }
.jr-page .jr-card--lead .jr-card-title { font-size: clamp(22px, 2vw, 27px); letter-spacing: -.03em; line-height: 1.18; }
.jr-card--lead .jr-card-excerpt { -webkit-line-clamp: 4; font-size: 15.5px; }

/* ---------- Breadcrumbs ---------- */
.jr-breadcrumbs { padding-block: 24px 0; }
.jr-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 12.5px; line-height: 1.5; color: var(--muted-2-text); }
.jr-breadcrumbs li { display: inline-flex; align-items: center; min-width: 0; }
.jr-breadcrumbs li + li::before { content: "/"; margin-inline: 10px; color: var(--muted-2); }
.jr-breadcrumbs a:hover { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.jr-breadcrumbs [aria-current="page"] { overflow: hidden; max-width: 48ch; font-weight: 600; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Landing hero ---------- */
.jr-landing-hero { position: relative; overflow: hidden; padding-bottom: 72px; }
.jr-hero-knit {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(115deg, color-mix(in srgb, var(--brand-text) 6%, transparent) 1px, transparent 1px),
		linear-gradient(-115deg, color-mix(in srgb, var(--brand-text) 5%, transparent) 1px, transparent 1px);
	background-size: 14px 14px;
	-webkit-mask-image: linear-gradient(to bottom, var(--ink), transparent 85%);
	mask-image: linear-gradient(to bottom, var(--ink), transparent 85%);
	pointer-events: none;
}
.jr-landing-hero > .jr-wrap { position: relative; z-index: 1; }
.jr-landing-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 72px;
	align-items: center;
	margin-top: 32px;
}
.jr-page .jr-landing-title {
	margin-top: 18px;
	font-size: clamp(40px, 5.2vw, 70px);
	letter-spacing: -.045em;
	line-height: 1.02;
}
.jr-landing-deck { max-width: 560px; margin-top: 22px; font-size: 18.5px; line-height: 1.6; color: var(--muted); }
.jr-landing-stats { display: flex; flex-wrap: wrap; gap: 8px 0; margin-top: 28px; font-size: 14px; color: var(--muted); }
.jr-landing-stats li { display: inline-flex; align-items: baseline; gap: 6px; }
.jr-landing-stats li + li { margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--line); }
.jr-landing-stats strong { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }

.jr-search-inline, .jr-search-form {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 560px;
	margin-top: 28px;
	padding: 6px 6px 6px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface);
	color: var(--muted-2-text);
	transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.jr-search-inline:focus-within, .jr-search-form:focus-within { border-color: var(--brand-text); box-shadow: 0 0 0 3px var(--brand-tint); }
/* #jr-top out-ranks the theme's input:not()×5 rule (base.css) without !important. */
#jr-top .jr-search-inline input, #jr-top .jr-search-form input {
	flex: 1;
	min-width: 0;
	min-block-size: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	font-size: 15px;
	outline: none;
}
#jr-top .jr-search-inline input::placeholder, #jr-top .jr-search-form input::placeholder { color: var(--muted-2-text); }
.jr-search-inline .jr-btn, .jr-search-form .jr-btn { min-height: 42px; padding: 10px 18px; }

/* ---------- FeaturedCard ---------- */
.jr-featured-card-link {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background: var(--surface);
	box-shadow: var(--shadow-lg);
	transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.jr-featured-card-link:hover { transform: translateY(-4px); }
.jr-featured-card .jr-visual { aspect-ratio: 16 / 10; }
.jr-featured-card .jr-visual-num { font-size: 190px; }
.jr-featured-card-body { display: flex; flex-direction: column; gap: 12px; padding: 26px 28px 24px; }
.jr-page .jr-featured-card-title { font-size: clamp(22px, 2.1vw, 28px); letter-spacing: -.03em; line-height: 1.18; }
.jr-featured-card-link:hover .jr-featured-card-title { color: var(--brand-text); }
.jr-featured-card-excerpt { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 15px; color: var(--muted); }
.jr-featured-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line-faint); }

/* ---------- Latest + filter ---------- */
.jr-latest { padding-block: 64px; border-top: 1px solid var(--line); }
.jr-latest .jr-chips { margin-bottom: 28px; }
.jr-grid.is-loading { opacity: .45; transition: opacity var(--t-base) var(--ease); }

/* ---------- Editor's picks ---------- */
.jr-picks { padding-block: 16px 72px; }
.jr-picks-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.jr-picks-list { border-top: 1px solid var(--line); }
.jr-pick-link {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) 20px;
	gap: 18px;
	align-items: start;
	padding: 20px 0;
	border-bottom: 1px solid var(--line);
}
.jr-pick-rank { font-family: var(--font-display); font-size: 32px; font-weight: 700; letter-spacing: -.05em; line-height: 1; color: var(--muted-2-text); }
.jr-pick-body { display: flex; flex-direction: column; gap: 6px; }
.jr-pick-cat { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-text); }
.jr-pick-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; color: var(--ink); transition: color var(--t-fast) var(--ease); }
.jr-pick-meta { font-size: 12.5px; color: var(--muted-2-text); }
.jr-pick-arrow { margin-top: 4px; color: var(--muted-2); transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease); }
.jr-pick-link:hover .jr-pick-title { color: var(--brand-text); }
.jr-pick-link:hover .jr-pick-rank { color: var(--brand-text); }
.jr-pick-link:hover .jr-pick-arrow { color: var(--brand-text); transform: translateX(3px); }

/* ---------- B2B banner (our own service, clearly labelled) ---------- */
.jr-b2b { padding-block: 16px 72px; }
.jr-b2b-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
	overflow: hidden;
	isolation: isolate;
	padding: 56px;
	border-radius: var(--r-xl);
	background: linear-gradient(135deg, var(--brand-xd), var(--brand-d) 55%, var(--brand));
	color: var(--on-fill);
}
.jr-b2b-knit {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(115deg, color-mix(in srgb, var(--on-fill) 7%, transparent) 1px, transparent 1px),
		linear-gradient(-115deg, color-mix(in srgb, var(--on-fill) 5%, transparent) 1px, transparent 1px);
	background-size: 16px 16px;
	opacity: .6;
	mix-blend-mode: overlay;
}
.jr-b2b-glow {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--brand-xl) 38%, transparent), transparent 55%);
}
.jr-b2b-eyebrow {
	display: inline-flex;
	padding: 6px 10px;
	border: 1px solid color-mix(in srgb, var(--brand-xl) 40%, transparent);
	border-radius: var(--r-chip);
	background: color-mix(in srgb, var(--brand-xl) 14%, transparent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--brand-xl);
}
.jr-page .jr-b2b-title {
	margin-top: 18px;
	font-size: clamp(28px, 3.2vw, 42px);
	letter-spacing: -.035em;
	line-height: 1.08;
	color: var(--on-fill);
}
/* Space Grotesk has no italic; the accent word is set in cyan instead. */
.jr-b2b-title em { font-style: normal; color: var(--brand-xl); }
.jr-b2b-sub { max-width: 600px; margin-top: 16px; font-size: 15.5px; line-height: 1.65; color: var(--on-dark); }
.jr-b2b-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.jr-b2b :focus-visible { outline-color: var(--brand-xl); }
.jr-page .jr-b2b-trust-label { margin-bottom: 14px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark); }
.jr-trust { display: grid; gap: 10px; }
.jr-trust-row {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	padding: 14px 18px;
	border: 1px solid color-mix(in srgb, var(--on-fill) 13%, transparent);
	border-radius: var(--r-md);
	background: color-mix(in srgb, var(--on-fill) 7%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.jr-trust-row dd { min-width: 104px; font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--brand-xl); }
.jr-trust-row dt { font-size: 13.5px; line-height: 1.4; color: var(--on-dark); }

/* ---------- About the Journal ---------- */
.jr-about { padding-block: 72px; border-top: 1px solid var(--line); background: var(--surface); }
.jr-about-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.jr-about-copy > p:not(.jr-eyebrow) { max-width: 640px; margin-top: 16px; color: var(--muted); }
.jr-about-copy .jr-lead { margin-top: 20px; }
.jr-page .jr-about-sub { margin: 32px 0 14px; font-size: 17px; letter-spacing: -.02em; }
.jr-principles { display: grid; gap: 12px; max-width: 640px; }
.jr-principles li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.jr-principle-icon { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-text); }
.jr-about-links { margin-top: 26px; }
.jr-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.jr-stat {
	display: flex;
	flex-direction: column-reverse;
	gap: 6px;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--bg);
}
.jr-stat dd { font-family: var(--font-display); font-size: clamp(30px, 3vw, 40px); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.jr-stat dt { font-size: 13px; line-height: 1.4; color: var(--muted); }
.jr-about-faq { margin-top: 72px; }

/* ---------- JournalFAQ accordion ---------- */
.jr-faq { border-top: 1px solid var(--line); }
.jr-faq-item { border-bottom: 1px solid var(--line); }
.jr-page .jr-faq-q { font-size: inherit; }
.jr-page .jr-faq-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 20px 0;
	font-family: var(--font-display);
	font-size: 17.5px;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.35;
	text-align: left;
	color: var(--ink);
}
.jr-faq-btn:hover { color: var(--brand-text); }
.jr-faq-btn .jr-icon { color: var(--muted-2-text); transition: transform var(--t-base) var(--ease); }
.jr-faq-btn[aria-expanded="true"] .jr-icon { transform: rotate(180deg); }
.jr-faq-a { padding: 0 44px 22px 0; }
.jr-faq-a[hidden] { display: none; }
.jr-faq-a p { max-width: 72ch; font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.jr-faq-a a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Explore all categories ---------- */
.jr-explore { padding-block: 64px; }

/* ---------- Newsletter ---------- */
.jr-news { padding-block: 64px; background: var(--line-soft); scroll-margin-top: var(--jr-sticky-top); }
.jr-news-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.jr-page .jr-news-title { margin-top: 14px; font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -.035em; line-height: 1.06; }
.jr-news-body { max-width: 480px; margin-top: 14px; font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.jr-news-note { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--muted); }

/* Fluent Forms, restyled. Selectors out-rank Fluent's injected button rule
   (form.fluent_form_2 .wpf_has_custom_css.ff-btn-submit) without !important. */
.jr-page .jr-news-form .fluentform { margin: 0; font-family: var(--font-body); }
.jr-page .jr-news-form .ff-el-group { margin-bottom: 0; }
.jr-page .jr-news-form .ff-el-input--label label { font-size: 13px; font-weight: 600; color: var(--ink); }
.jr-page .jr-news-form .ff-el-input--label.asterisk-right label::after { color: var(--muted); }
#jr-top .jr-news-form .ff-el-form-control {
	width: 100%;
	font-family: var(--font-body);
	min-block-size: 46px;
	padding: 10px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-btn);
	background: var(--surface);
	color: var(--ink);
	font-size: 15px;
	box-shadow: none;
}
#jr-top .jr-news-form .ff-el-form-control::placeholder { color: var(--muted-2-text); opacity: 1; }
#jr-top .jr-news-form .ff-el-form-control:focus { border-color: var(--brand-text); outline: none; box-shadow: 0 0 0 3px var(--brand-tint); }
.jr-page .jr-news-form form.fluent_form_2 .ff-btn-submit.wpf_has_custom_css,
.jr-page .jr-news-form .ff-btn-submit {
	width: 100%;
	min-width: 0;
	min-block-size: 46px;
	padding: 10px 18px;
	border: 1px solid var(--brand-fill);
	border-radius: var(--r-btn);
	background-color: var(--brand-fill);
	color: var(--on-fill);
	font-size: 14.5px;
	font-weight: 600;
	transition: background-color var(--t-base) var(--ease);
}
.jr-page .jr-news-form form.fluent_form_2 .ff-btn-submit.wpf_has_custom_css:hover,
.jr-page .jr-news-form .ff-btn-submit:hover { border-color: var(--brand-fill-hover); background-color: var(--brand-fill-hover); color: var(--on-fill); }
.jr-page .jr-news-form .ff-t-container { display: flex; gap: 8px; align-items: flex-end; }
.jr-page .jr-news-form .error, .jr-page .jr-news-form .ff-el-is-error .text-danger { margin-top: 6px; font-size: 13px; color: var(--amber-text); }
#jr-top .jr-news-form .ff-el-is-error .ff-el-form-control { border-color: var(--amber-text); }
.jr-page .jr-news-form .ff-message-success, .jr-page .jr-news-success {
	padding: 14px 16px;
	border: 1px solid color-mix(in srgb, var(--green) 35%, var(--surface));
	border-radius: var(--r-md);
	background: color-mix(in srgb, var(--green) 8%, var(--surface));
	color: var(--success-text);
	font-size: 14.5px;
	font-weight: 500;
	box-shadow: none;
}
.jr-page .jr-news-form .ff-errors-in-stack { margin-top: 8px; color: var(--amber-text); font-size: 13px; }
/* Band variant: label visually hidden, input and button inside one bordered pill. */
.jr-page .jr-news-form--pill .ff-el-input--label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.jr-page .jr-news-form--pill .ff-t-container {
	align-items: center;
	padding: 6px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface);
}
.jr-page .jr-news-form--pill .ff-t-container:focus-within { border-color: var(--brand-text); box-shadow: 0 0 0 3px var(--brand-tint); }
#jr-top .jr-news-form--pill .ff-el-form-control { border-color: transparent; background: transparent; }
#jr-top .jr-news-form--pill .ff-el-form-control:focus { border-color: transparent; box-shadow: none; }

/* ---------- EmptyState ---------- */
.jr-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 560px;
	margin: 0 auto;
	padding: 56px 28px;
	border: 1px dashed var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	text-align: center;
}
.jr-empty-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-text); }
.jr-page .jr-empty-title { font-size: 22px; letter-spacing: -.025em; }
.jr-empty-body { color: var(--muted); }
.jr-empty .jr-btn { margin-top: 8px; }

/* ---------- Category archive ---------- */
.jr-cat-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 72px;
	align-items: center;
	padding-block: 32px 56px;
}
.jr-cat-excerpt { display: flex; align-items: center; gap: 12px; max-width: 560px; font-size: 13.5px; line-height: 1.5; color: var(--brand-text); }
.jr-cat-excerpt::before { content: ""; flex: none; width: 28px; height: 1px; background: currentColor; }
.jr-page .jr-cat-title {
	margin-top: 20px;
	font-size: clamp(48px, 6.6vw, 96px);
	letter-spacing: -.05em;
	line-height: .98;
}
.jr-cat-dot { display: inline-block; width: 14px; height: 14px; margin-left: .12em; border-radius: 50%; background: var(--brand-text); vertical-align: .1em; }
.jr-cat-stats { display: flex; flex-wrap: wrap; gap: 8px 0; margin-top: 28px; font-size: 14px; color: var(--muted); }
.jr-cat-stats li + li { margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--line); }
.jr-visual--4x3 { aspect-ratio: 4 / 3; border-radius: var(--r-xl); }
.jr-cat-issue {
	position: absolute;
	right: 22px;
	bottom: 6px;
	z-index: 3;
	font-family: var(--font-display);
	font-size: clamp(72px, 9vw, 128px);
	font-weight: 700;
	letter-spacing: -.06em;
	line-height: 1;
	color: color-mix(in srgb, var(--on-fill) 55%, transparent);
}

.jr-tabs { border-block: 1px solid var(--line); background: var(--surface); }
.jr-tabs-inner { display: flex; align-items: center; gap: 18px; padding-block: 14px; }
.jr-tabs-label { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2-text); }
.jr-tabs .jr-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
.jr-tabs .jr-chips::-webkit-scrollbar { display: none; }
.jr-tabs .jr-cchip { white-space: nowrap; }

.jr-feature { padding-block: 56px; }
.jr-feature-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.jr-visual--feature-lg { aspect-ratio: 1.15 / 1; border-radius: var(--r-xl); }
.jr-visual--feature-lg .jr-visual-num {
	right: 18px;
	bottom: -.22em;
	font-size: clamp(200px, 26vw, 380px);
	color: color-mix(in srgb, var(--on-fill) 8%, transparent);
}
.jr-visual-quote { position: absolute; top: 38%; left: 26px; z-index: 2; color: color-mix(in srgb, var(--on-fill) 28%, transparent); }
.jr-visual-author { position: absolute; bottom: 20px; left: 20px; z-index: 3; display: flex; align-items: center; gap: 10px; max-width: 60%; color: var(--on-fill); line-height: 1.3; }
.jr-visual-author strong { display: block; font-size: 13.5px; font-weight: 600; }
.jr-visual-author span span { display: block; font-size: 12px; color: color-mix(in srgb, var(--on-fill) 78%, transparent); }
.jr-feature-copy .jr-kicker { font-size: 11px; }
.jr-page .jr-feature-title { margin-top: 16px; font-size: clamp(30px, 3.2vw, 42px); letter-spacing: -.035em; line-height: 1.08; }
.jr-feature-title a:hover { color: var(--brand-text-hover); }
.jr-feature-title em { font-style: normal; color: var(--brand-text); }
.jr-feature-excerpt { max-width: 460px; margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--muted); }
.jr-feature-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 20px; font-size: 12.5px; color: var(--muted-2-text); }
.jr-feature-copy .jr-btn { margin-top: 26px; }

.jr-archive { padding-block: 8px 64px; }
.jr-archive-count { font-size: 13px; color: var(--muted-2-text); }
.jr-loadmore { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 40px; text-align: center; }
.jr-loadmore-btn.is-loading { pointer-events: none; opacity: .7; }
.jr-loadmore-note { font-size: 12.5px; color: var(--muted-2-text); }
.jr-loadmore-note.is-error { color: var(--amber-text); }

.jr-cat-desc { padding-block: 64px; border-top: 1px solid var(--line); }
.jr-cat-desc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 72px; }
.jr-page .jr-cat-desc-title { margin-top: 12px; font-size: clamp(26px, 2.6vw, 32px); letter-spacing: -.03em; line-height: 1.15; }
.jr-cat-desc-body p { max-width: 68ch; font-size: 16px; line-height: 1.75; color: var(--muted); }
.jr-cat-desc-body p + p { margin-top: 16px; }

/* ---------- Hub pages (archive, FAQ, policy, search, author, topic) ---------- */
.jr-page-hero { max-width: 820px; padding-block: 32px 40px; }
.jr-page .jr-page-title { margin-top: 16px; font-size: clamp(36px, 4.6vw, 58px); letter-spacing: -.045em; line-height: 1.04; }
.jr-page-deck { max-width: 680px; margin-top: 18px; font-size: 18px; line-height: 1.6; color: var(--muted); }
.jr-page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; font-size: 13.5px; color: var(--muted-2-text); }
/* Topic pages are a sub-taxonomy: a cyan rule marks them apart from categories. */
.jr-page-hero--topic { position: relative; padding-left: 24px; }
.jr-page-hero--topic::before { content: ""; position: absolute; top: 32px; bottom: 40px; left: 0; width: 3px; border-radius: 2px; background: var(--brand-xl); }

.jr-index { display: grid; gap: 40px; padding-bottom: 32px; }
.jr-page .jr-index-month { padding-bottom: 12px; border-bottom: 1px solid var(--ink); font-size: 20px; letter-spacing: -.025em; }
.jr-index-row {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr) 220px 64px;
	gap: 20px;
	align-items: baseline;
	padding-block: 14px;
	border-bottom: 1px solid var(--line-faint);
	font-size: 13px;
	color: var(--muted-2-text);
}
.jr-index-title { font-family: var(--font-display); font-size: 16.5px; font-weight: 600; letter-spacing: -.018em; line-height: 1.35; color: var(--ink); }
.jr-index-title:hover { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.jr-index-cat { color: var(--brand-text); font-weight: 600; font-size: 12px; letter-spacing: .02em; }
.jr-index-time { text-align: right; }

.jr-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding-block: 24px 64px; }
.jr-page-list { display: flex; flex-wrap: wrap; gap: 6px; }
.jr-page-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	padding: 8px 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-btn);
	background: var(--surface);
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}
.jr-page-btn:hover { border-color: var(--brand-text); color: var(--brand-text); }
.jr-page-btn.is-current { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.jr-page-gap { align-self: center; padding-inline: 4px; color: var(--muted-2-text); }

.jr-doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; padding-bottom: 72px; }
.jr-doc-nav { position: sticky; top: var(--jr-sticky-top); }
.jr-doc-nav ol { display: grid; gap: 2px; border-left: 1px solid var(--line); }
.jr-doc-nav a { display: block; margin-left: -1px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.4; color: var(--muted); }
.jr-doc-nav a:hover { border-left-color: var(--brand-text); color: var(--brand-text); }
.jr-doc-body { max-width: 780px; }
.jr-doc-section + .jr-doc-section { margin-top: 48px; }
.jr-page .jr-doc-h2 { margin-bottom: 8px; font-size: 24px; letter-spacing: -.026em; scroll-margin-top: var(--jr-sticky-top); }
.jr-doc-body section { scroll-margin-top: var(--jr-sticky-top); }

.jr-search-form { margin-top: 26px; max-width: 640px; }
.jr-search-results { padding-bottom: 32px; }
.jr-page .jr-results-count { margin-bottom: 8px; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--muted); }
.jr-result { max-width: 820px; padding-block: 22px; border-bottom: 1px solid var(--line); }
.jr-result-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; color: var(--muted-2-text); }
.jr-page .jr-result-title { margin-top: 8px; font-size: 20px; letter-spacing: -.022em; line-height: 1.3; }
.jr-result-title a:hover { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.jr-result-excerpt { margin-top: 8px; font-size: 15px; color: var(--muted); }

.jr-author-hero {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) 300px;
	gap: 32px;
	align-items: start;
	padding-block: 32px 48px;
}
.jr-author-role { margin-top: 10px; font-size: 15px; font-weight: 500; color: var(--muted); }
.jr-author-hero .jr-page-deck { font-size: 16.5px; }
.jr-author-hero .jr-side-label { margin-top: 24px; }
.jr-author-social { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; }
.jr-author-creds { padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.jr-author-creds ul { display: grid; gap: 10px; }
.jr-author-creds li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.jr-author-count { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-faint); font-size: 13px; color: var(--muted); }
.jr-author-count strong { font-family: var(--font-display); font-size: 22px; letter-spacing: -.03em; color: var(--ink); }
.jr-section .jr-h2--sm { margin-bottom: 24px; }

/* ---------- 404 ---------- */
.jr-notfound { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; align-items: start; padding-block: 56px 88px; }
.jr-notfound-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 24px; }
.jr-notfound-picks { padding: 24px 26px 6px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.jr-notfound-picks .jr-picks-list { border-top: 0; }
.jr-notfound-picks .jr-pick-link { grid-template-columns: 40px minmax(0, 1fr) 20px; padding: 16px 0; }
.jr-notfound-picks li:last-child .jr-pick-link { border-bottom: 0; }
.jr-notfound-picks .jr-pick-rank { font-size: 24px; }

/* ---------- ≤1080px ---------- */
@media (max-width: 1080px) {
	.jr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jr-landing-grid, .jr-cat-hero, .jr-feature-grid, .jr-b2b-card, .jr-about-grid, .jr-picks-grid,
	.jr-cat-desc-grid, .jr-news-inner, .jr-notfound { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.jr-b2b-card { padding: 44px; }
	.jr-doc { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.jr-doc-nav { position: static; }
	.jr-author-hero { grid-template-columns: auto minmax(0, 1fr); }
	.jr-author-creds { grid-column: 1 / -1; }
	.jr-index-row { grid-template-columns: 130px minmax(0, 1fr) 64px; }
	.jr-index-cat { display: none; }
}

/* ---------- ≤640px ---------- */
@media (max-width: 640px) {
	.jr-page { --pad: 20px; }
	.jr-grid { grid-template-columns: minmax(0, 1fr); }
	.jr-section, .jr-latest, .jr-about, .jr-cat-desc, .jr-news, .jr-explore { padding-block: 48px; }
	.jr-landing-hero { padding-bottom: 48px; }
	.jr-landing-deck, .jr-page-deck { font-size: 16.5px; }
	.jr-landing-stats li + li { margin-left: 12px; padding-left: 12px; }
	.jr-search-inline .jr-btn, .jr-search-form .jr-btn { padding-inline: 14px; }
	.jr-b2b-card { padding: 28px 22px; }
	.jr-b2b-actions .jr-btn { flex: 1 1 100%; }
	.jr-trust-row dd { min-width: 88px; font-size: 21px; }
	.jr-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.jr-stat { padding: 16px; }
	.jr-cat-hero { padding-block: 20px 40px; }
	/* Stats as three cells so wrapping never leaves a divider at a line start. */
	.jr-cat-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; font-size: 13px; line-height: 1.4; }
	.jr-cat-stats li + li { padding-left: 12px; margin-left: 12px; }
	.jr-feature { padding-block: 40px; }
	.jr-visual-quote { display: none; }
	.jr-visual-author { max-width: 70%; }
	.jr-tabs-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
	.jr-tabs .jr-chips { width: 100%; }
	.jr-pick-link { grid-template-columns: 40px minmax(0, 1fr) 16px; gap: 14px; }
	.jr-pick-rank { font-size: 24px; }
	.jr-author-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.jr-index-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.jr-index-time { text-align: left; }
	.jr-page .jr-news-form .ff-t-container { flex-direction: column; align-items: stretch; }
	.jr-page .jr-news-form .ff-t-cell { flex-basis: auto; width: 100%; }
	.jr-page .jr-faq-a { padding-right: 0; }
	.jr-breadcrumbs [aria-current="page"] { max-width: 28ch; }
}

/* The ID selector out-ranks every component transition, so no !important is needed (brief §8). */
@media (prefers-reduced-motion: reduce) {
	#jr-top *, #jr-top *::before, #jr-top *::after {
		scroll-behavior: auto;
		transition-duration: 0s;
		animation-duration: 0s;
	}
	#jr-top .jr-card-link:hover, #jr-top .jr-featured-card-link:hover { transform: none; }
}