/* ============================================================================
   Libya Economy Journal — public theme (lej3)

   Built from the client's approved design (the export in reference/New Theme/,
   kept out of git as design material rather than code). That
   export carries its styling as inline attributes on every element plus a
   journal.css that corrects them afterwards; both are collected here into one
   token set and one class per component, so the site can be restyled in one
   place instead of across a thousand style attributes.

   Where the export's inline value and its journal.css override disagreed, the
   override wins — that file is the later correction and is what the approved
   screenshots actually show.
   ========================================================================= */

/* --- fonts: self-hosted, no external request ----------------------------- */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;          /* variable: one file covers every weight */
	font-display: swap;
	src: url('fonts/inter.woff2') format('woff2');
}
@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/source-serif-4.woff2') format('woff2');
}

/* Tajawal, the Arabic face. Unlike the two above it is not variable, so each
   weight is its own file, and it ships split by script the way Google serves
   it. The unicode-range on each pair is what makes that split pay: an Arabic
   piece pulls ~9KB and never touches the Latin file unless the text actually
   contains Latin — a figure, a currency code, an acronym. When it does, those
   characters come from Tajawal's own Latin rather than dropping to Inter
   mid-sentence, which is the whole reason to carry it. */
@font-face {
	font-family: 'Tajawal';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/tajawal-arabic-400.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
	font-family: 'Tajawal';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/tajawal-arabic-700.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
	font-family: 'Tajawal';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/tajawal-latin-400.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;
}
@font-face {
	font-family: 'Tajawal';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/tajawal-latin-700.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;
}

/* The faces the writing toolbar can apply. None of these is used by the design
   itself, so none is fetched until an article actually carries the class that
   names it — a piece that uses no formatting downloads exactly what it did
   before this existed. Same self-hosted rule as above: no external request. */
@font-face {
	font-family: 'Lora';
	font-style: normal;
	font-weight: 400 700;          /* variable */
	font-display: swap;
	src: url('fonts/lora.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;
}
@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 400 900;          /* variable */
	font-display: swap;
	src: url('fonts/playfair-display.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;
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/ibm-plex-mono-400.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;
}
/* Amiri is the Arabic serif, split the same way Tajawal is: an Arabic passage
   pulls only the Arabic file, and any Latin inside it comes from Amiri's own
   Latin rather than dropping to a different face mid-sentence. */
@font-face {
	font-family: 'Amiri';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/amiri-arabic-400.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
	font-family: 'Amiri';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/amiri-arabic-700.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
	font-family: 'Amiri';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/amiri-latin-400.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 -------------------------------------------------------------- */
:root {
	--ink:        #16130f;   /* headings, primary text, dark panels */
	--prose:      #221e19;   /* running body text */
	--dek:        #3d372f;   /* standfirsts */
	--muted:      #4a443b;   /* card summaries */
	--label:      #6f675c;   /* small caps labels */
	--meta:       #8a8175;   /* dates, bylines */
	--faint:      #b9b1a3;   /* separators, rank numbers */

	--paper:      #ffffff;   /* page ground */
	--warm:       #fbf8f4;   /* masthead / nav / markets / tinted panels */
	/* Neutral, and light enough to read as space waiting to be filled rather
	   than as a block of colour that belongs there. The shimmer highlight sits
	   just above it — a few percent apart is all a skeleton needs. */
	--placeholder:      #ebeae8;   /* image box before it loads */
	--placeholder-lift: #fbfbfa;   /* the band that sweeps across it */

	--rule:       #d8d0c1;   /* structural hairline */
	--rule-soft:  #e2dbcd;   /* section underlines */
	--rule-mid:   #ddd6c8;   /* list dividers */
	--rule-input: #c9c2b5;   /* form borders */

	--blue:       #162554;   /* links, buttons, active nav */
	--blue-light: #b9c4e0;   /* the same, on a dark ground */
	--gold:       #A68B3C;   /* eyebrows, report accents */
	--gold-light: #d6bd7e;   /* the same, on a dark ground */
	--gold-chip-bg: #f5efe1;
	--gold-chip-fg: #8a6d24;

	--on-dark:      #fffdf9; /* text on the ink panels */
	--on-dark-soft: #d8d2c6;
	--on-dark-dim:  #a39a8c;
	--rule-dark:    #4a443b;
	--rule-dark-soft: #3a352c;

	--up:   #16603c;
	--down: #8c3a26;

	--serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

	/* The design pads the whole page by this much and bleeds panels through
	   it with negative margins. Every top-level band uses it. */
	--pad-x: clamp(56px, 9vw, 128px);
	--stack: clamp(54px, 7vw, 86px);   /* gap between homepage sections */
}

@media (max-width: 760px) { :root { --pad-x: clamp(18px, 5vw, 40px); } }
@media (max-width: 480px) { :root { --pad-x: 18px; } }

/* --- reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* height:auto matters: picture() emits width/height attributes, and a definite
   height makes the browser ignore every aspect-ratio set below it. */
img { max-width: 100%; height: auto; display: block; transition: opacity 120ms ease; }
/* picture() wraps every image in <picture><source…><img>. Blockify the wrapper
   so it fills its grid cell or flex track and the <img> rules below apply to
   the space it occupies. NOT display:contents — that promotes <source> to a
   layout box of its own and shunts the next sibling into a second grid row. */
picture { display: block; }
a {
	color: inherit;
	text-decoration: none;
	transition: color 150ms ease, opacity 150ms ease;
}
a:hover { color: var(--blue); opacity: 0.72; }
a:hover img { opacity: 0.88; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
input, button, textarea, select { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }

:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

/* The nav is sticky, so anchor targets must clear it. */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.lej-shell { width: 100%; background: var(--paper); }

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

/* Every top-level band shares the page gutter. */
.lej-pad { padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* ============================================================================
   THE PICTURE FRAME

   One shape for every image on the site: a 16:9 box the picture fills edge to
   edge. Uploads arrive in every proportion an editor's camera produces, and
   without a fixed frame each card is a different height and the grid combs.
   The frame also clips, which is what lets the picture scale on hover without
   shoving its neighbours around.
   ========================================================================= */

.lej-frame {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--placeholder);
}
.lej-frame picture { display: block; width: 100%; height: 100%; }
.lej-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
	transition: transform 620ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/**
 * Skeleton shimmer.
 *
 * The text and the layout arrive complete from the server, so there is nothing
 * to withhold there — hiding delivered copy behind grey blocks would only make
 * the page feel slower. What genuinely lands later is the pictures, so each
 * frame shimmers until its own image decodes and clears independently. The
 * effect is a page that assembles row by row as the photographs arrive.
 */
.lej-frame::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, transparent, var(--placeholder-lift), transparent) 0 0 / 220% 100% no-repeat,
		var(--placeholder);
	animation: lej-shimmer 1.5s ease-in-out infinite;
	transition: opacity 420ms ease;
}
.lej-frame.is-loaded::before { opacity: 0; animation: none; }
.lej-frame-empty::before { display: none; }
.lej-frame img { position: relative; z-index: 2; }

@keyframes lej-shimmer {
	from { background-position: -110% 0; }
	to   { background-position: 210% 0; }
}

/* Scripting is what clears the shimmer, so without it the frames must not be
   veiled in the first place. */
.no-js .lej-frame::before { display: none; }

@media (prefers-reduced-motion: reduce) {
	.lej-frame::before { animation: none; }
}

/* A post with no picture keeps its place in the grid rather than collapsing. */
.lej-frame-empty {
	background:
		linear-gradient(135deg, transparent 46%, rgba(22, 19, 15, 0.05) 47%, rgba(22, 19, 15, 0.05) 53%, transparent 54%),
		var(--warm);
	border: 1px solid var(--rule-soft);
}

/* ============================================================================
   SCROLL REVEAL

   Blocks rise into place as they come into view. Only ever applied by script,
   and only to things below the fold — whatever is already on screen at load
   paints immediately, because animating the first thing a reader sees is a
   delay dressed as polish.
   ========================================================================= */

.js .lej-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 620ms cubic-bezier(0.2, 0.7, 0.3, 1),
	            transform 620ms cubic-bezier(0.2, 0.7, 0.3, 1);
	will-change: opacity, transform;
}
.js .lej-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.js .lej-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   HOVER

   Applied only where a pointer can actually hover, so a tap on a phone never
   leaves a card stuck in its hover state.
   ========================================================================= */

@media (hover: hover) and (pointer: fine) {
	a:hover .lej-frame img { transform: scale(1.045); }

	/* The headline underline wipes in from the left rather than the whole card
	   fading out — the design's original hover dimmed the thing you were
	   pointing at, which reads as the card going away, not responding. */
	.lej-card-title,
	.lej-lead-title,
	.lej-feature-lead-title,
	.lej-feature-row-title,
	.lej-split-title,
	.lej-promo-title,
	.lej-mostread-title,
	.lej-news-title,
	.lej-rank-title,
	.lej-date-row-title,
	.lej-featured-title,
	.lej-result-title,
	.lej-side-title,
	.lej-byline-row-title,
	.lej-term-name,
	.lej-rail-title {
		background-image: linear-gradient(currentColor, currentColor);
		background-position: 0 100%;
		background-repeat: no-repeat;
		background-size: 0% 1px;
		transition: background-size 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
		padding-bottom: 1px;
	}
	a:hover .lej-card-title,
	a:hover .lej-lead-title,
	a:hover .lej-feature-lead-title,
	a:hover .lej-feature-row-title,
	a:hover .lej-split-title,
	a:hover .lej-promo-title,
	a:hover .lej-mostread-title,
	a:hover .lej-news-title,
	a:hover .lej-rank-title,
	a:hover .lej-date-row-title,
	a:hover .lej-featured-title,
	a:hover .lej-result-title,
	a:hover .lej-side-title,
	a:hover .lej-byline-row-title,
	a:hover .lej-term-name,
	a:hover .lej-rail-title,
	a.lej-card-title:hover,
	a.lej-lead-title:hover,
	a.lej-split-title:hover,
	a.lej-promo-title:hover,
	a.lej-cover-title:hover { background-size: 100% 1px; }

	/* Cards lift a hair. Enough to feel live, not enough to look like a button. */
	.lej-card, .lej-report-card, .lej-result-row, .lej-byline-row {
		transition: transform 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
	}
	.lej-card:hover, .lej-report-card:hover { transform: translateY(-3px); }
}

/* The whole-card fade is gone; hovering a link no longer dims it. */
a:hover { color: var(--blue); opacity: 1; }
a:hover img { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.lej-frame img,
	.lej-card,
	.lej-report-card { transition: none !important; }
	a:hover .lej-frame img { transform: none; }
	.lej-card:hover, .lej-report-card:hover { transform: none; }
}

/* ============================================================================
   SHARED TYPOGRAPHY
   ========================================================================= */

.lej-eyebrow {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--blue);
}
.lej-eyebrow-gold { color: var(--gold); }
.lej-eyebrow-lg { font-size: 11px; letter-spacing: 0.2em; }
.lej-eyebrow-row {
	display: flex;
	gap: 9px;
	align-items: center;
	flex-wrap: wrap;
}
.lej-eyebrow-row .lej-sep { color: var(--faint); }
.lej-eyebrow-row .lej-dim { color: var(--meta); }

.lej-meta {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--meta);
}
.lej-meta-row {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.lej-serif { font-family: var(--serif); }

/* ============================================================================
   SITE HEADER — masthead, nav, markets
   ========================================================================= */

.lej-site-header { position: relative; background: var(--warm); }

/* The logo carries the brand, so it is given room to be large while the space
   around it is pulled in — presence without pushing the cover story down. */
.lej-masthead-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: clamp(0px, 0.5vw, 8px) var(--pad-x) clamp(14px, 2.2vw, 26px);
}
.lej-site-header .lej-masthead-wrap {
	padding-top: clamp(8px, 1.1vw, 14px);
	padding-bottom: clamp(6px, 1vw, 12px);
}
.lej-masthead-logo {
	height: clamp(62px, 9.5vw, 124px);
	width: auto;
}
.lej-site-header .lej-masthead-logo { height: clamp(42px, 5.4vw, 74px); }

/* --- nav ----------------------------------------------------------------- */
.lej-nav {
	position: sticky;
	top: 0;
	z-index: 30;
	padding: 13px var(--pad-x);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	background: rgba(251, 248, 244, 0.96);
	backdrop-filter: blur(10px);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}
.lej-nav-inner {
	position: relative;
	width: 100%;
	min-height: 20px;
	display: flex;
	align-items: center;
}

.lej-nav-links {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 6px;
	gap: 22px;
	width: 100%;
	transition: opacity 200ms ease;
}
.lej-nav-links a {
	position: relative;
	color: var(--label);
	padding: 2px 0 6px;
	transition: color 200ms ease;
}
.lej-nav-links a:hover { color: var(--ink); }
.lej-nav-links a.is-active { color: var(--blue); font-weight: 600; }

/* Without scripting each link draws its own underline, so the bar still shows
   where you are and what you are pointing at. */
.lej-nav-links a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.lej-nav-links a:hover::after,
.lej-nav-links a.is-active::after { transform: scaleX(1); }

/* With scripting, one bar slides between them instead — the per-link rules
   above are switched off so the two never draw at once. */
.lej-nav-links.has-indicator a::after { display: none; }
.lej-nav-indicator {
	position: absolute;
	bottom: 0;
	/* left:0 is load-bearing. Without it the static position of an absolutely
	   positioned child of a flex container is resolved as though it were the
	   only flex item — which this row centres — so the bar started half a
	   container to the right and every translateX pushed it further out. */
	left: 0;
	height: 2px;
	background: var(--blue);
	opacity: 0;
	transition: transform 340ms cubic-bezier(0.2, 0.7, 0.3, 1),
	            width 340ms cubic-bezier(0.2, 0.7, 0.3, 1),
	            opacity 200ms ease;
	pointer-events: none;
}
.lej-nav-links.has-indicator .lej-nav-indicator.is-visible { opacity: 1; }

/* The bar lifts off the page once you scroll past it. */
.lej-nav.is-stuck {
	background: rgba(251, 248, 244, 0.86);
	box-shadow: 0 6px 24px rgba(22, 19, 15, 0.07);
}

@media (prefers-reduced-motion: reduce) {
	.lej-nav-indicator, .lej-nav-links a::after { transition: none; }
}

.lej-nav-icon {
	border: 0;
	background: transparent;
	color: var(--ink);
	padding: 0;
	display: flex;
	align-items: center;
}


/* The collapsed bar: hamburger, wordmark, search. Only rendered on narrow
   viewports, or when the link row would need more than one line. */
.lej-nav-collapsed {
	display: none;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.lej-nav-collapsed .lej-masthead-logo { height: clamp(46px, 12vw, 58px); }
.lej-nav-collapsed .lej-nav-icon { padding: 6px; margin: -6px; }

/* Search slides in over the links rather than pushing the bar taller. */
.lej-nav-search {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}
.lej-nav-search input {
	flex: 1;
	min-width: 0;
	border: 0;
	border-bottom: 1px solid var(--rule-input);
	outline: 0;
	background: transparent;
	font-size: 16px;
	letter-spacing: 0.02em;
	text-transform: none;
	padding: 6px 2px;
	color: var(--ink);
}
.lej-nav-search-go {
	border: 0;
	background: transparent;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--blue);
	padding: 6px;
	white-space: nowrap;
}
.lej-nav-search-close {
	border: 0;
	background: transparent;
	color: var(--muted);
	padding: 6px;
	display: flex;
	flex-shrink: 0;
}

.lej-nav.is-searching .lej-nav-links,
.lej-nav.is-searching .lej-nav-collapsed { opacity: 0; pointer-events: none; }
.lej-nav.is-searching .lej-nav-search { opacity: 1; pointer-events: auto; }

/* Collapsed mode — set by theme.js when the links wrap, and unconditionally
   below the small breakpoint so it still works without scripting. */
.lej-nav.is-collapsed { padding-top: 11px; padding-bottom: 11px; }
.lej-nav.is-collapsed .lej-nav-links { display: none; }
.lej-nav.is-collapsed .lej-nav-collapsed { display: flex; }
.lej-nav.is-collapsed .lej-nav-inner { min-height: clamp(46px, 12vw, 58px); }

/* Whenever the collapsed bar is showing it carries the wordmark, so the
   standalone masthead stands down — at any width, not just under the
   breakpoint. On the front page the bar also moves above the cover band, so
   the reader gets one logo, pinned, at the top. */
.nav-collapsed .lej-site-header .lej-masthead-wrap,
.nav-collapsed .lej-hero .lej-masthead-wrap { display: none; }
.nav-collapsed .lej-shell { display: flex; flex-direction: column; }
.nav-collapsed .lej-site-header { order: -1; }
.nav-collapsed .lej-hero { padding-top: clamp(22px, 5vw, 34px); }

@media (max-width: 900px) {
	.lej-nav .lej-nav-links { display: none; }
	.lej-nav .lej-nav-collapsed { display: flex; }
	.lej-nav .lej-nav-inner { min-height: clamp(46px, 12vw, 58px); }

	/* backdrop-filter makes an element the containing block for its fixed
	   descendants, which would trap the search overlay inside this bar. The bar
	   is opaque at these widths anyway, so the blur goes. */
	.lej-nav {
		padding-top: 11px;
		padding-bottom: 11px;
		background: var(--warm);
		-webkit-backdrop-filter: none;
		        backdrop-filter: none;
	}

	/* Search opens as its own centred layer rather than a hairline field
	   squeezed into a 40px bar. */
	.lej-nav-search {
		position: fixed;
		inset: 0;
		z-index: 50;
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		gap: 18px;
		padding: 0 clamp(24px, 8vw, 64px);
		background: rgba(251, 248, 244, 0.82);
		-webkit-backdrop-filter: blur(20px) saturate(1.15);
		        backdrop-filter: blur(20px) saturate(1.15);
		transition: opacity 240ms ease;
	}
	.lej-nav-search input {
		/* flex:1 makes sense in the desktop bar, where the axis is horizontal.
		   Here the axis is vertical and it stretches the field the full height
		   of the screen. */
		flex: 0 0 auto;
		width: 100%;
		font-size: clamp(22px, 6vw, 30px);
		text-align: center;
		border-bottom-width: 2px;
		padding: 14px 4px;
	}
	.lej-nav-search-go {
		align-self: center;
		font-size: 12px;
		padding: 12px 26px;
		background: var(--blue);
		color: #fffdf8;
	}
	.lej-nav-search-close {
		position: absolute;
		top: 14px;
		right: 16px;
		padding: 10px;
	}

	/* The one-logo rules live with .nav-collapsed above so they apply at every
	   width the collapsed bar appears at, not only below this breakpoint. Here
	   we only need the no-scripting fallback, since that class never arrives. */
	.no-js .lej-shell { display: flex; flex-direction: column; }
	.no-js .lej-site-header { order: -1; }
	.no-js .lej-site-header .lej-masthead-wrap,
	.no-js .lej-hero .lej-masthead-wrap { display: none; }
}

/* --- the menu overlay -----------------------------------------------------
   A sheet sliding in from the left is a 2013 mobile pattern. This is a single
   full-screen layer: the page frosts over behind it and the sections stand in
   the middle at reading size, arriving one after another.
   ------------------------------------------------------------------------- */
.lej-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 39;
	border: 0;
	padding: 0;
	background: rgba(251, 248, 244, 0.78);
	-webkit-backdrop-filter: blur(20px) saturate(1.15);
	        backdrop-filter: blur(20px) saturate(1.15);
	animation: lej-fade-in 260ms ease forwards;
}
.lej-drawer {
	position: fixed;
	inset: 0;
	z-index: 40;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(18px, 4vh, 34px);
	padding: 72px 24px 40px;
	background: transparent;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.lej-drawer-head {
	position: absolute;
	top: 0; left: 0; right: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 16px 20px;
}
.lej-drawer nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 0;
	width: 100%;
}
.lej-drawer nav a {
	display: block;
	padding: 9px 18px;
	font-family: var(--serif);
	font-size: clamp(25px, 6.4vw, 38px);
	line-height: 1.15;
	font-weight: 500;
	color: var(--ink);
	text-transform: none;
	letter-spacing: -0.01em;
	text-align: center;
	opacity: 0;
	transform: translateY(12px);
	animation: lej-overlay-item 460ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
	animation-delay: calc(var(--i, 0) * 38ms + 60ms);
}
.lej-drawer nav a.is-active { color: var(--blue); font-weight: 600; }

@keyframes lej-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lej-overlay-item { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.lej-drawer-backdrop { animation: none; }
	.lej-drawer nav a { animation: none; opacity: 1; transform: none; }
}

[hidden] { display: none !important; }

/* --- markets ------------------------------------------------------------- */
.lej-market-wrap {
	background: var(--warm);
	padding: 11px var(--pad-x);
	border-bottom: 1px solid var(--rule-soft);
}
.lej-market {
	display: flex;
	align-items: center;
	gap: 10px 26px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.lej-market-date { color: var(--meta); flex-shrink: 0; white-space: nowrap; }

/**
 * The rates change over rather than crawl past.
 *
 * Script groups them into however many fit the bar, then slides one group up
 * out of view as the next arrives and holds it there for a few seconds. A
 * continuous horizontal loop asks the reader to track a moving number, which is
 * the one thing you cannot do with a moving number.
 */
.lej-market-scroll {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}
.lej-market-track {
	display: flex;
	align-items: center;
	gap: 22px;
}
.lej-market-track > span,
.lej-rate { flex-shrink: 0; white-space: nowrap; }
.lej-market-track b { font-weight: 600; }

/* Paged mode, switched on by script once the groups are built. */
.lej-market-track.is-paged {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	transform: translate3d(0, 0, 0);
	transition: transform 620ms cubic-bezier(0.3, 0.8, 0.3, 1);
}
.lej-market-track.is-paged.no-transition { transition: none; }
.lej-market-page {
	display: flex;
	align-items: center;
	gap: 22px;
	flex: 0 0 auto;
	height: var(--rate-line, 20px);
}

@media (prefers-reduced-motion: reduce) {
	.lej-market-track.is-paged { transition: none; }
}
.lej-market-up { color: var(--up); }
.lej-market-down { color: var(--down); }

/* --- flash --------------------------------------------------------------- */
.lej-flash {
	margin: 14px var(--pad-x) 0;
	padding: 13px 16px;
	font-size: 14px;
	border-left: 3px solid var(--blue);
	background: var(--warm);
	color: var(--ink);
}
.lej-flash-err { border-left-color: var(--down); background: #f7ece7; color: #7a3323; }

/* ============================================================================
   HOMEPAGE — cover band
   ========================================================================= */

.lej-hero {
	position: relative;
	background: var(--warm);
	padding: clamp(40px, 5.5vw, 68px) clamp(22px, 4vw, 52px) clamp(36px, 5vw, 64px);
	border-bottom: 1px solid var(--rule);
}
.lej-cover-grid {
	margin-top: clamp(28px, 4vw, 46px);
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 52px);
	align-items: stretch;
}
.lej-cover-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
}
.lej-cover-title {
	font-family: var(--serif);
	font-size: clamp(30px, 4vw, 46px);
	/* Tight leading is correct at the top of the clamp, where this is genuine
	   display type at 46px. The size is fluid but the leading was not, so the
	   same 1.05 also applied at 30px on a phone, where the headline wraps to
	   four lines and needs the room. Loosened a little here and more below. */
	line-height: 1.08;
	letter-spacing: -0.015em;
	font-weight: 600;
}
@media (max-width: 700px) {
	.lej-cover-title { line-height: 1.16; letter-spacing: -0.01em; }
}
.lej-cover-dek {
	font-size: 17px;
	line-height: 1.55;
	color: var(--dek);
}
.lej-cover-meta {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #7a7166;
}

/* ============================================================================
   HOMEPAGE — section stack
   ========================================================================= */

.lej-home-main { padding: clamp(42px, 5vw, 68px) var(--pad-x) 14px; }
.lej-section-stack { display: flex; flex-direction: column; gap: var(--stack); }

.lej-section-heading {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding-bottom: 13px;
	border-bottom: 1px solid var(--rule);
}
.lej-section-heading h2 {
	font-family: var(--serif);
	font-size: clamp(25px, 2.3vw, 31px);
	letter-spacing: -0.01em;
}
.lej-section-more {
	align-self: flex-start;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--blue);
}
/* Only inside a heading does it belong hard right; elsewhere it sits under the
   copy it follows. */
.lej-section-heading .lej-section-more { margin-left: auto; padding-top: 4px; }

/* The end-of-section button. Hidden on wide screens, where the heading link
   already does this job beside the title. */
.lej-more-pill { display: none; }

@media (max-width: 760px) {
	/* Centred headings, the way the New Yorker sets them on a phone: the
	   eyebrow, the title and the standfirst share one axis down the middle. */
	.lej-section-heading {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 8px;
	}
	.lej-section-heading .lej-section-more { display: none; }

	/* …and the link it replaces reappears after the last card, as a button.
	   Above the section it offered a way out before there was anything to
	   leave; below it, it reads as the end of the run. */
	.lej-more-pill,
	.lej-split-body .lej-section-more,
	.lej-promo > .lej-section-more {
		display: flex;
		align-items: center;
		justify-content: center;
		width: fit-content;
		max-width: 100%;
		margin: 26px auto 0;
		padding: 14px 30px;
		border: 1px solid var(--rule);
		border-radius: 999px;
		background: transparent;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--ink);
		text-align: center;
	}
	.lej-more-pill:hover { color: var(--ink); background: var(--warm); }

	/* On the dark panel the button has to sit on the dark ground. */
	.lej-feature-panel .lej-more-pill {
		border-color: var(--rule-dark);
		color: var(--on-dark);
	}
	.lej-feature-panel .lej-more-pill:hover { background: rgba(255, 255, 255, 0.06); color: var(--on-dark); }
}

/* --- card grids ---------------------------------------------------------- */
.lej-grid {
	margin-top: 24px;
	display: grid;
	grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
	gap: clamp(24px, 3vw, 36px);
}
.lej-card { display: flex; flex-direction: column; gap: 11px; }
.lej-card-title {
	font-family: var(--serif);
	font-size: var(--title-size, 23px);
	/* 1.14 was borrowed from display type, where tight leading is right. At
	   23px a card headline is not display type: it runs to two and three lines,
	   and at that size the ascenders of one line were nearly touching the
	   descenders of the last, which reads as cramped rather than considered. */
	line-height: 1.22;
	font-weight: 600;
	text-wrap: pretty;
}
.lej-card-dek {
	font-size: 15px;
	line-height: 1.5;
	color: var(--muted);
	text-wrap: pretty;
}
.lej-card-sm .lej-card-title { --title-size: 21px; }
.lej-card-sm .lej-card-dek { font-size: 14.5px; }


/* --- lead-plus-stack (the Articles section) ------------------------------ */
.lej-lead-split {
	margin-top: 24px;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(28px, 3.5vw, 46px);
	align-items: start;
}
.lej-card-feature .lej-card-title { --title-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; }
.lej-card-feature .lej-card-dek { font-size: 16px; line-height: 1.55; }

.lej-lead-side { display: flex; flex-direction: column; gap: 20px; }
.lej-side-row {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--rule-soft);
}
.lej-side-row:last-child { border-bottom: 0; padding-bottom: 0; }
.lej-side-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lej-side-title {
	font-family: var(--serif);
	font-size: 19px;
	line-height: 1.18;
	font-weight: 600;
	text-wrap: pretty;
}

/* --- most read ----------------------------------------------------------- */
.lej-mostread { --cols: 5; gap: 22px; }
.lej-mostread a { display: flex; flex-direction: column; gap: 8px; }
.lej-mostread-num {
	font-family: var(--serif);
	font-size: 13px;
	font-weight: 600;
	color: #b9b1a3;
}
.lej-mostread-title {
	font-family: var(--serif);
	font-size: 18px;
	line-height: 1.28;
	font-weight: 600;
}
@media (max-width: 1080px) { .lej-mostread { --cols: 3; } }
@media (max-width: 760px)  { .lej-mostread { --cols: 2; } }

/* --- dark feature panel (bleeds through the page gutter) ------------------ */
.lej-feature-panel {
	background: var(--ink);
	color: var(--on-dark);
	padding: clamp(34px, 4vw, 48px) var(--pad-x);
	margin-left: calc(-1 * var(--pad-x));
	margin-right: calc(-1 * var(--pad-x));
	width: calc(100% + 2 * var(--pad-x));
}
.lej-feature-panel .lej-section-heading { border-bottom-color: var(--rule-dark); }
.lej-feature-panel .lej-section-heading h2 { color: #fffdf8; }
.lej-feature-panel .lej-section-more { color: var(--blue-light); }
.lej-feature-panel a:hover { color: var(--blue-light); }

.lej-feature-split {
	margin-top: 28px;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 30px;
	align-items: start;
}
.lej-feature-lead { display: flex; flex-direction: column; gap: 12px; color: var(--on-dark); }
.lej-feature-lead .lej-frame { background: #2a251f; }
.lej-feature-lead-title {
	font-family: var(--serif);
	font-size: 30px;
	line-height: 1.1;
	font-weight: 600;
}
.lej-feature-lead-dek { font-size: 15.5px; line-height: 1.55; color: var(--on-dark-soft); }

.lej-feature-list { display: flex; flex-direction: column; gap: 16px; }
.lej-feature-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--rule-dark);
	color: var(--on-dark);
}
.lej-feature-row:last-child { padding-bottom: 0; border-bottom: 0; }
.lej-feature-row .lej-eyebrow { color: var(--blue-light); }
.lej-feature-row-title {
	font-family: var(--serif);
	font-size: 21px;
	line-height: 1.16;
	font-weight: 600;
}

/* --- news list ----------------------------------------------------------- */
.lej-news-list { display: flex; flex-direction: column; margin-top: 8px; }
.lej-news-row {
	display: grid;
	grid-template-columns: 112px minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: 28px;
	align-items: baseline;
	padding: 20px 0;
	position: relative;
}
/* A faint rule between dispatches. Without it three date/headline/summary rows
   run together and the block reads as one paragraph of noise. */
.lej-news-row + .lej-news-row { border-top: 1px solid var(--rule-soft); }
@media (hover: hover) and (pointer: fine) {
	.lej-news-row { transition: background-color 200ms ease; }
	.lej-news-row:hover {
		background: var(--warm);
		box-shadow: 0 0 0 12px var(--warm);
	}
}
.lej-news-date {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--meta);
}
.lej-news-title {
	font-family: var(--serif);
	font-size: 24px;
	line-height: 1.18;
	font-weight: 600;
}
.lej-news-dek { font-size: 15px; line-height: 1.5; color: var(--muted); }

@media (max-width: 1080px) {
	.lej-news-row { grid-template-columns: 96px minmax(0, 1fr); gap: 20px; }
	.lej-news-dek { grid-column: 2; }
}
@media (max-width: 760px) {
	.lej-news-row { grid-template-columns: minmax(0, 1fr); gap: 7px; }
	.lej-news-dek { grid-column: 1; }
}

/* --- newsletter band ----------------------------------------------------- */
.lej-newsletter-band {
	background: var(--warm);
	color: var(--ink);
	padding: clamp(34px, 4vw, 48px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.lej-newsletter-copy {
	max-width: 520px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.lej-newsletter-copy .lej-eyebrow { letter-spacing: 0.22em; color: var(--blue); }
.lej-newsletter-title {
	font-family: var(--serif);
	font-size: 26px;
	line-height: 1.18;
	font-weight: 600;
}
.lej-newsletter-sub { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.lej-newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.lej-newsletter-form input[type="email"] {
	background: var(--paper);
	border: 1px solid var(--rule-input);
	color: var(--ink);
	padding: 13px 16px;
	font-size: 13.5px;
	min-width: 220px;
	outline: 0;
}
.lej-newsletter-form button {
	background: var(--blue);
	color: #fffdf8;
	border: 0;
	padding: 13px 22px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
@media (max-width: 760px) {
	.lej-newsletter-form,
	.lej-newsletter-form input[type="email"],
	.lej-newsletter-form button { width: 100%; }
}

/* --- split feature (the design's "Investment" band) ---------------------- */
.lej-split-feature {
	display: grid;
	grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
	gap: 30px;
	align-items: center;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	padding: clamp(28px, 4vw, 40px) 0;
}
.lej-split-body {
	padding-right: clamp(0px, 2vw, 24px);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.lej-split-body h2 { font-family: var(--serif); font-size: 24px; }
.lej-split-title {
	font-family: var(--serif);
	font-size: 28px;
	line-height: 1.1;
	font-weight: 600;
}
.lej-split-dek { font-size: 15px; line-height: 1.55; color: var(--muted); }

/* --- promo band ---------------------------------------------------------- */
.lej-promo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: clamp(6px, 1vw, 12px) 0;
}
.lej-promo-body { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.lej-promo-body .lej-eyebrow { letter-spacing: 0.2em; color: var(--label); }
.lej-promo-title {
	font-family: var(--serif);
	font-size: 28px;
	line-height: 1.15;
	font-weight: 600;
}
.lej-promo-dek { font-size: 15px; line-height: 1.5; color: var(--muted); }

/* --- report cards -------------------------------------------------------- */
.lej-report-card { gap: 12px; }
/* The gold keyline over report thumbnails is gone: on a 16:9 frame it read as
   a strip of unfilled space above the picture rather than as an accent. */
.lej-report-chip {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 6px;
	background: var(--gold-chip-bg);
	color: var(--gold-chip-fg);
	padding: 4px 9px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ============================================================================
   INDEX / LISTING PAGES
   ========================================================================= */

.lej-index-page { padding: clamp(38px, 5vw, 62px) var(--pad-x) 0; }

.lej-index-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--rule);
}
.lej-index-head-body { display: flex; flex-direction: column; gap: 8px; }
.lej-index-head h1 {
	font-family: var(--serif);
	font-size: clamp(34px, 5vw, 52px);
	line-height: 1;
	letter-spacing: -0.02em;
}
.lej-index-standfirst {
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--muted);
	max-width: 68ch;
}
.lej-index-count {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--label);
	padding-bottom: 6px;
}

/* dark variant, used by Reports */
.lej-index-hero-dark {
	background: var(--ink);
	color: var(--on-dark);
	padding: clamp(38px, 5vw, 62px) var(--pad-x) 34px;
}
.lej-index-hero-dark .lej-index-head { border-bottom: 0; padding-bottom: 0; }
.lej-index-hero-dark h1 { color: #fffdf8; }
.lej-index-hero-dark .lej-eyebrow { color: var(--blue-light); }
.lej-index-hero-dark .lej-index-standfirst { color: var(--on-dark-soft); max-width: 66ch; }
.lej-index-hero-dark .lej-index-count { color: var(--on-dark-dim); }

/* --- subcategory tabs ---------------------------------------------------- */
.lej-subnav {
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
	padding: 15px 0 0;
	border-bottom: 1px solid var(--rule);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}
/* The tab strip carries the rule when it is present, so the head above it does
   not draw a second one two lines away. */
.lej-index-head:has(+ .lej-subnav) { border-bottom: 0; }
.lej-subnav a {
	position: relative;
	color: var(--label);
	padding-bottom: 12px;
}
.lej-subnav a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: var(--blue);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.lej-subnav a:hover { color: var(--ink); opacity: 1; }
.lej-subnav a:hover::after { transform: scaleX(1); }
.lej-subnav a.is-active { color: var(--blue); font-weight: 600; }
.lej-subnav a.is-active::after { transform: scaleX(1); }

@media (max-width: 760px) {
	.lej-subnav {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		gap: 20px;
	}
	.lej-subnav::-webkit-scrollbar { display: none; }
	.lej-subnav a { white-space: nowrap; flex-shrink: 0; }
}

/* --- filter row ---------------------------------------------------------- */
.lej-filter-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding: 17px 0;
	border-bottom: 1px solid var(--rule-soft);
}
.lej-chip-row { display: flex; flex-wrap: wrap; gap: 18px; }
.lej-chip {
	border: 0;
	border-bottom: 1px solid transparent;
	background: transparent;
	padding: 4px 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--label);
}
.lej-chip.is-on { color: var(--blue); font-weight: 600; border-bottom-color: var(--blue); }
.lej-filter-input {
	border: 0;
	border-bottom: 1px solid var(--rule-input);
	padding: 7px 2px;
	font-size: 13.5px;
	width: 220px;
	background: transparent;
	outline: 0;
}
@media (max-width: 760px) {
	.lej-filter-row { flex-direction: column; align-items: stretch; gap: 12px; }
	.lej-chip-row {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 2px;
		scrollbar-width: none;
	}
	.lej-chip-row::-webkit-scrollbar { display: none; }
	.lej-chip { white-space: nowrap; flex-shrink: 0; }
	.lej-filter-input { width: 100%; }
}

/* --- lead story ---------------------------------------------------------- */
.lej-lead {
	padding: 28px 0 26px;
	border-bottom: 1px solid var(--rule-soft);
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 32px;
	align-items: center;
}
.lej-lead-body { display: flex; flex-direction: column; gap: 13px; }
.lej-lead-title {
	font-family: var(--serif);
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.06;
	font-weight: 600;
	letter-spacing: -0.015em;
}
.lej-lead-dek {
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--dek);
	max-width: 56ch;
}
.lej-lead .lej-eyebrow { letter-spacing: 0.18em; }

.lej-btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }

.lej-index-grid { padding: 26px 0 34px; }
.lej-index-grid.lej-grid { margin-top: 0; gap: 30px 26px; }

.lej-empty {
	padding: 48px 24px 56px;
	margin: 16px auto 36px;
	max-width: 580px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.lej-empty-illustration {
	display: block;
	margin: 0 auto 22px;
	color: var(--muted);
	filter: drop-shadow(0 2px 8px rgba(0,0,0,0.03));
}
.lej-empty-title {
	font-family: var(--serif);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ink);
	margin: 0 0 10px;
	letter-spacing: -0.01em;
}
.lej-empty-desc,
.lej-empty-sub {
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.65;
	color: var(--muted);
	margin: 0 0 20px;
	max-width: 48ch;
}
.lej-empty-desc a,
.lej-empty-sub a {
	color: var(--navy);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 500;
}
.lej-empty-desc a:hover,
.lej-empty-sub a:hover {
	color: var(--gold);
}
.lej-empty-actions {
	justify-content: center;
	gap: 12px;
	margin-top: 4px;
}
.lej-empty-home {
	padding: 64px 24px 72px;
	margin: 0 auto 40px;
}
.lej-empty-404 {
	padding: 64px 24px 80px;
	max-width: 620px;
	margin: 20px auto 60px;
}
.lej-empty-404 .lej-empty-title {
	font-size: 28px;
	margin-top: 4px;
}
.lej-empty-code {
	display: inline-block;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 8px;
}

/* --- pagination ---------------------------------------------------------- */
.lej-pagination {
	list-style: none;
	margin: 0;
	padding: 0 0 44px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}
.lej-pagination a {
	display: block;
	border: 1px solid var(--rule-mid);
	padding: 9px 14px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.lej-pagination .MarkupPagerNavOn a {
	border-color: var(--ink);
	font-weight: 600;
}
/* Kept in the markup for crawlers and for readers without scripting; hidden
   once the automatic loader takes over so there are not two ways to page. */
.lej-pagination.is-replaced { display: none; }

.lej-infinite {
	display: flex;
	justify-content: center;
	padding: 0 0 44px;
	min-height: 1px;
}
.lej-infinite-msg {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--meta);
	padding-top: 18px;
	border-top: 1px solid var(--rule-mid);
	width: 100%;
	text-align: center;
}
.lej-infinite-sentinel { height: 1px; }

/* --- closing promo row (Articles index) ---------------------------------- */
.lej-endnotes {
	border-top: 1px solid var(--rule-soft);
	margin-bottom: 40px;
	padding: 26px 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}
.lej-endnote { display: flex; flex-direction: column; gap: 8px; }
.lej-endnote .lej-eyebrow { letter-spacing: 0.2em; color: var(--label); }
.lej-endnote-title { font-family: var(--serif); font-size: 24px; font-weight: 600; }
.lej-endnote-dek { font-size: 14.5px; line-height: 1.5; color: var(--muted); }

/* ============================================================================
   BUTTONS
   ========================================================================= */
.lej-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: var(--ink);
	color: #fffdf8;
	padding: 12px 20px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.lej-btn:hover { color: #fffdf8; }
.lej-btn-blue { background: var(--blue); }
.lej-btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.lej-btn-ghost:hover { color: var(--ink); }
.lej-btn-light { background: #fffdf9; color: var(--ink); }
.lej-btn-light:hover { color: var(--ink); }
.lej-btn-ghost-dark { background: transparent; color: var(--on-dark); border: 1px solid var(--label); }
.lej-btn-ghost-dark:hover { color: var(--on-dark); }
.lej-btn-lg { padding: 14px 26px; font-size: 12px; letter-spacing: 0.16em; }

/* ============================================================================
   ARTICLE
   ========================================================================= */

.lej-progress {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 3px;
	z-index: 80;
	pointer-events: none;
}
.lej-progress span {
	display: block;
	height: 3px;
	width: 0;
	background: var(--blue);
}
.lej-progress-gold span { background: var(--gold); }

.lej-article-page { padding: clamp(34px, 5vw, 58px) var(--pad-x) 0; }
.lej-measure-wide { max-width: 1000px; margin: 0 auto; }
.lej-measure { max-width: 680px; margin: 0 auto; }

.lej-article-head { display: flex; flex-direction: column; gap: 16px; }
.lej-article-kicker {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
}
.lej-article-kicker a:first-child { color: var(--gold); }
.lej-article-kicker .lej-section-link { color: var(--blue); }
.lej-article-title {
	font-family: var(--serif);
	font-size: clamp(34px, 5.5vw, 62px);
	line-height: 1.02;
	letter-spacing: -0.025em;
}
.lej-article-standfirst {
	font-family: var(--serif);
	font-size: clamp(19px, 2vw, 24px);
	line-height: 1.45;
	color: var(--dek);
	font-style: italic;
	max-width: 62ch;
}

.lej-article-media { margin: 26px auto 0; }
.lej-figcaption {
	margin-top: 9px;
	font-family: var(--serif);
	font-style: italic;
	font-size: 15.5px;
	color: var(--label);
}

.lej-byline-bar {
	margin-top: 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	padding: 14px 0;
	border-top: 1px solid var(--rule-soft);
	border-bottom: 1px solid var(--rule);
}
.lej-byline { display: flex; align-items: center; gap: 12px; }
.lej-byline img {
	width: 46px; height: 46px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--placeholder);
	flex: 0 0 auto;
}
.lej-byline-text { display: flex; flex-direction: column; gap: 2px; }
.lej-byline-name { font-family: var(--serif); font-size: 19px; font-weight: 600; }
.lej-byline-role {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--meta);
}
.lej-article-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--label);
}
.lej-article-meta .lej-sep { color: var(--faint); }
.lej-time-left { color: var(--blue); font-weight: 600; }

/* --- writer's formatting -------------------------------------------------
   What the toolbar in the newsroom editor can apply. Every name here also
   appears in EditorJs::SPAN_CLASSES; a class missing from that list is
   stripped before it ever reaches this stylesheet, so the two must agree.

   Sizes are in em on purpose. The prose scale changes with the viewport and
   between contexts (a pull quote is not body text), and an em keeps a "large"
   run large relative to whatever it sits in instead of pinning it to one pixel
   value that is wrong everywhere else.
   ========================================================================= */

.lej-ff-sans         { font-family: var(--sans); }
.lej-ff-serif        { font-family: var(--serif); }
.lej-ff-lora         { font-family: 'Lora', Georgia, 'Times New Roman', serif; }
.lej-ff-display      { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; }
.lej-ff-arabic       { font-family: 'Tajawal', system-ui, sans-serif; }
.lej-ff-arabic-serif { font-family: 'Amiri', Georgia, serif; }
/* Mono runs optically large beside a serif at the same nominal size, which is
   why the slight reduction — it is a correction, not a size choice, and it
   compounds correctly if the writer also picks a size. */
.lej-ff-mono {
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.94em;
}

.lej-fs-sm { font-size: 0.84em; }
.lej-fs-lg { font-size: 1.18em; }
.lej-fs-xl { font-size: 1.42em; }

.lej-ink-muted { color: var(--muted); }
.lej-ink-blue  { color: var(--blue); }
.lej-ink-gold  { color: var(--gold); }
/* The same two the markets bar uses for a rise and a fall, so a tinted figure
   in an article means what the same colour means everywhere else on the site. */
.lej-ink-up    { color: var(--up); }
.lej-ink-down  { color: var(--down); }

/* Block alignment, set as a tune in the editor. "left" is deliberately absent:
   it is what everything already does, and emitting it would put a class on
   nearly every paragraph the site publishes in order to say nothing. */
.lej-ta-center  { text-align: center; }
.lej-ta-right   { text-align: right; }
.lej-ta-justify { text-align: justify; }

/* --- prose (Editor.js output) -------------------------------------------- */
.lej-prose {
	margin: 30px auto 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
	font-family: var(--serif);
	font-size: 20.5px;
	line-height: 1.62;
	color: var(--prose);
}
.lej-prose > * { margin: 0; }
.lej-prose h2 {
	font-family: var(--serif);
	font-size: 30px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin-top: 8px;
}
.lej-prose h3 { font-family: var(--serif); font-size: 24px; line-height: 1.2; margin-top: 4px; }
.lej-prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.lej-prose ul, .lej-prose ol { padding-left: 24px; display: flex; flex-direction: column; gap: 9px; }
.lej-prose img { width: 100%; }
.lej-prose figure { display: flex; flex-direction: column; gap: 9px; }
.lej-prose figcaption {
	font-family: var(--serif);
	font-style: italic;
	font-size: 15.5px;
	color: var(--label);
}
/* The credit sits with the caption but reads as an attribution, not prose, so
   it takes its own line under it in the label style used elsewhere. */
.lej-prose figcaption .post-image-credit {
	display: block;
	margin-top: 3px;
	font-family: var(--sans);
	font-style: normal;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--label);
}
.lej-prose blockquote {
	border-left: 3px solid var(--blue);
	padding: 6px 0 6px 22px;
	margin: 6px 0;
	font-size: 27px;
	line-height: 1.3;
	font-weight: 600;
}
.lej-prose blockquote cite {
	display: block;
	margin-top: 8px;
	font-family: var(--sans);
	font-style: normal;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--label);
}
.lej-prose table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--sans);
	font-size: 15px;
}
.lej-prose th, .lej-prose td {
	border-bottom: 1px solid var(--rule-soft);
	padding: 10px 12px;
	text-align: left;
}
.lej-prose th { font-weight: 600; background: var(--warm); }
.lej-prose code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.85em;
	background: var(--warm);
	padding: 2px 5px;
}
.lej-prose hr { border: 0; border-top: 1px solid var(--rule-soft); }

.lej-dropcap {
	float: left;
	font-size: 74px;
	line-height: 0.82;
	padding: 6px 10px 0 0;
	font-weight: 600;
}
@media (max-width: 760px) {
	.lej-dropcap { font-size: 52px; padding: 3px 6px 0 0; }
	/* Prose sizing for small screens lives further down, immediately after
	   .lej-news-prose. It has to: that rule is a plain class like this one, so
	   whichever is written last wins, and from up here it lost. */
}

/* --- filed under --------------------------------------------------------- */
.lej-tags {
	margin: 30px auto 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.lej-tags-label {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--label);
	margin-right: 4px;
}
.lej-tag {
	border: 1px solid var(--rule-mid);
	padding: 5px 10px;
	font-size: 12px;
}

/* --- inline subscribe box ------------------------------------------------ */
.lej-subscribe-box {
	margin: 26px auto 0;
	border: 1px solid var(--ink);
	padding: 20px 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}
.lej-subscribe-copy { display: flex; flex-direction: column; gap: 5px; }
.lej-subscribe-title { font-family: var(--serif); font-size: 23px; font-weight: 600; }
.lej-subscribe-sub { font-size: 14.5px; line-height: 1.5; color: var(--muted); }

/* --- read next ----------------------------------------------------------- */
.lej-readnext {
	max-width: 1160px;
	margin: 40px auto 0;
	border-top: 1px solid var(--rule-soft);
	padding-top: 24px;
}
.lej-readnext-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--label);
}
.lej-readnext-split {
	margin-top: 20px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
}
.lej-mini-col { display: flex; flex-direction: column; gap: 10px; }
.lej-mini-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding-bottom: 9px;
	border-bottom: 1px solid var(--rule-soft);
}
.lej-mini-head h2 { font-family: var(--serif); font-size: 22px; }
.lej-mini-head a {
	margin-left: auto;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--blue);
}
.lej-rank-row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 16px;
	align-items: baseline;
	padding: 12px 0;
	border-bottom: 1px solid var(--rule-mid);
}
.lej-rank-row:last-child { border-bottom: 0; }
.lej-rank-num { font-family: var(--serif); font-size: 26px; color: var(--faint); }
.lej-rank-body { display: flex; flex-direction: column; gap: 4px; }
.lej-rank-title { font-family: var(--serif); font-size: 20px; line-height: 1.16; font-weight: 600; }

.lej-date-row {
	display: grid;
	grid-template-columns: 74px minmax(0, 1fr);
	gap: 16px;
	align-items: baseline;
	padding: 12px 0;
	border-bottom: 1px solid var(--rule-mid);
}
.lej-date-row:last-child { border-bottom: 0; }
.lej-date-row .lej-news-date { font-size: 11px; }
.lej-date-row-title { font-family: var(--serif); font-size: 20px; line-height: 1.16; font-weight: 600; }

.lej-featured-row { margin-top: 34px; padding-bottom: 40px; }
.lej-featured-grid { --cols: 4; margin-top: 20px; gap: 24px; }
.lej-featured-grid a { display: flex; flex-direction: column; gap: 9px; }
.lej-featured-title { font-family: var(--serif); font-size: 20px; line-height: 1.14; font-weight: 600; }

/* ============================================================================
   NEWS ITEM — main + rail
   ========================================================================= */

/**
 * A dispatch is the text; the rail is a footnote to it.
 *
 * The article used to be capped at 78ch inside a track that was far wider, so
 * roughly 300px of the row sat empty between the prose and the rail. The column
 * read as narrow and the cards read as the larger half. Constraining the row
 * itself removes the dead space, and the measure then comes from the track
 * rather than fighting it.
 */
.lej-main-side {
	padding: clamp(30px, 4vw, 44px) var(--pad-x) 0;
	max-width: 1280px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 250px;
	gap: 56px;
	align-items: start;
}
.lej-main-col { min-width: 0; }

.lej-news-head h1 {
	margin-top: 14px;
	font-family: var(--serif);
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1.06;
	letter-spacing: -0.02em;
	max-width: 26ch;
}
.lej-news-meta-bar {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	padding: 11px 0;
	border-top: 1px solid var(--rule-soft);
	border-bottom: 1px solid var(--rule-soft);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--label);
}
.lej-news-meta-bar .lej-sep { color: var(--faint); }

.lej-news-item-media { margin: 22px 0 8px; }

.lej-news-prose {
	margin-top: 24px;
	gap: 18px;
	font-size: 20px;
	line-height: 1.6;
}

/* --- body text on a phone -------------------------------------------------
   Deliberately placed here rather than with the other max-width:760px rules,
   because .lej-news-prose above is a single class of the same weight: a media
   query adds no specificity, so an earlier rule simply loses to it. Written
   here, both kinds of piece get the same reading size.

   That is what made a dispatch read at 20px on a phone while an article read
   at 19px, when both were meant to be the smaller figure — six words to a
   line, and the reader scrolling twice as far for the same paragraph.
   ========================================================================= */
@media (max-width: 760px) {
	.lej-prose,
	.lej-news-prose { font-size: 17.5px; }
}

.lej-more-block { margin: 30px 0 40px; border-top: 1px solid var(--rule-soft); padding-top: 20px; }
.lej-more-list { margin-top: 14px; display: flex; flex-direction: column; }

.lej-rail {
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: sticky;
	top: 90px;
}
.lej-rail-card {
	background: var(--warm);
	border: 1px solid #d6cfc2;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.lej-rail-card .lej-eyebrow { letter-spacing: 0.2em; color: var(--label); }
/* Sized to read as secondary to the article, not as a competing headline. */
.lej-rail-title { font-family: var(--serif); font-size: 19px; line-height: 1.16; font-weight: 600; }
.lej-rail-dek { font-size: 13.5px; line-height: 1.5; color: var(--muted); }

.lej-rail-card-dark {
	background: var(--ink);
	color: var(--on-dark);
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.lej-rail-card-dark .lej-eyebrow { letter-spacing: 0.22em; color: var(--blue-light); }
.lej-rail-card-dark .lej-rail-title { font-size: 21px; line-height: 1.1; margin-top: 1px; }
.lej-rail-card-dark .lej-rail-dek { color: var(--on-dark-soft); font-size: 13.5px; }
.lej-rail-card-dark .lej-btn { margin-top: 4px; width: 100%; }

.lej-rail-list {
	border-top: 1px solid var(--rule-soft);
	border-bottom: 1px solid var(--rule-soft);
	padding: 16px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.lej-rail-list a {
	font-family: var(--serif);
	font-size: 19px;
	padding: 6px 0;
	border-bottom: 1px solid var(--rule-soft);
}
.lej-rail-list a:last-child { border-bottom: 0; }

/* ============================================================================
   REPORT
   ========================================================================= */

.lej-report-hero {
	background: var(--ink);
	color: var(--on-dark);
	padding: clamp(34px, 4.5vw, 52px) var(--pad-x);
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
}
.lej-report-hero-body { display: flex; flex-direction: column; gap: 14px; }
.lej-report-hero-kicker {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold-light);
}
.lej-report-hero-kicker .lej-sep { color: var(--label); }
.lej-report-hero-kicker .lej-blue { color: var(--blue-light); }
.lej-report-hero h1 {
	font-family: var(--serif);
	font-size: clamp(34px, 4.6vw, 56px);
	line-height: 1.03;
	letter-spacing: -0.025em;
	color: #fffdf8;
	max-width: 24ch;
}
.lej-report-hero-dek {
	font-family: var(--serif);
	font-size: clamp(18px, 1.9vw, 22px);
	line-height: 1.45;
	font-style: italic;
	color: var(--on-dark-soft);
	max-width: 60ch;
}
.lej-report-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--on-dark-dim);
}
.lej-report-hero-meta a { color: var(--on-dark); font-weight: 600; }
.lej-report-hero-meta .lej-time-left { color: var(--blue-light); }
.lej-report-hero .lej-frame { background: #2a251f; }

.lej-report-page {
	padding: clamp(30px, 4vw, 44px) var(--pad-x) 0;
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr) 260px;
	gap: 40px;
	align-items: start;
}
.lej-report-body { max-width: 68ch; min-width: 0; display: flex; flex-direction: column; gap: 26px; }

.lej-toc { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 9px; }
.lej-toc-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--rule-soft);
	padding-bottom: 8px;
}
.lej-toc a {
	font-family: var(--serif);
	font-size: 17.5px;
	padding: 6px 0;
	border-bottom: 1px solid var(--rule-soft);
}
.lej-toc a:last-child { border-bottom: 0; }

.lej-callout {
	border: 1px solid var(--ink);
	background: var(--warm);
	padding: 22px 24px;
}
.lej-callout-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold);
}
.lej-callout ul {
	margin: 12px 0 0;
	padding-left: 20px;
	font-family: var(--serif);
	font-size: 19px;
	line-height: 1.55;
	color: var(--prose);
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.lej-rule-block {
	border-top: 1px solid var(--rule-soft);
	border-bottom: 1px solid var(--rule-soft);
	padding: 18px 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.lej-rule-block-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--label);
}
.lej-rule-block-body {
	font-family: var(--serif);
	font-size: 18.5px;
	line-height: 1.55;
	color: var(--dek);
}

.lej-facts {
	border: 1px solid #d6cfc2;
	background: var(--warm);
	padding: 18px;
}
.lej-facts-list {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: 14px;
	color: var(--dek);
}
.lej-facts-list div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	border-bottom: 1px solid var(--rule-soft);
	padding-bottom: 6px;
}
.lej-facts-list div:last-child { border-bottom: 0; padding-bottom: 0; }
.lej-facts-list b { font-weight: 600; }

/* ============================================================================
   ABOUT
   ========================================================================= */

.lej-about-hero {
	background: var(--ink);
	color: var(--on-dark);
	padding: clamp(48px, 6vw, 76px) var(--pad-x);
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}
.lej-about-hero-body { display: flex; flex-direction: column; gap: 14px; }
.lej-about-hero .lej-eyebrow { letter-spacing: 0.2em; font-size: 11px; color: var(--blue-light); }
.lej-about-hero h1 {
	font-family: var(--serif);
	font-size: clamp(34px, 5vw, 56px);
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: #fffdf8;
	max-width: 24ch;
}
.lej-about-hero-dek {
	font-family: var(--serif);
	font-size: clamp(18px, 2vw, 22px);
	line-height: 1.5;
	font-style: italic;
	color: var(--on-dark-soft);
	max-width: 56ch;
}
.lej-about-hero .lej-frame { background: #2a251f; }
/* No hero picture uploaded: close the empty half rather than leaving the
   headline stranded against a void. */
.lej-hero-solo { grid-template-columns: minmax(0, 1fr); }
.lej-hero-solo .lej-about-hero-body,
.lej-hero-solo .lej-report-hero-body { max-width: 62ch; }

.lej-about-body {
	padding: clamp(48px, 10vw, 96px) var(--pad-x) clamp(56px, 11vw, 108px);
	display: flex;
	flex-direction: column;
	gap: clamp(48px, 9vw, 88px);
	max-width: calc(960px + 2 * var(--pad-x));
	margin: 0 auto;
}
.lej-about-row {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: clamp(20px, 6vw, 56px);
}
.lej-about-row h2 { font-family: var(--serif); font-size: 32px; letter-spacing: -0.01em; }
.lej-about-prose {
	font-family: var(--serif);
	font-size: 20.5px;
	line-height: 1.75;
	color: var(--prose);
	border-top: 1px solid var(--rule-soft);
	padding-top: clamp(18px, 4vw, 36px);
}
.lej-values { display: flex; flex-direction: column; border-top: 1px solid var(--rule-soft); }
.lej-value {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: clamp(20px, 4vw, 36px) 0;
	border-bottom: 1px solid var(--rule-mid);
}
.lej-value:last-child { border-bottom: 0; }
.lej-value-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--blue);
}
.lej-value-body {
	font-family: var(--serif);
	font-size: 18.5px;
	line-height: 1.65;
	color: var(--prose);
}

/* ============================================================================
   CONTACT
   ========================================================================= */

.lej-page-head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--rule-soft);
}
.lej-page-head h1 {
	font-family: var(--serif);
	font-size: clamp(34px, 5vw, 52px);
	line-height: 1;
	letter-spacing: -0.02em;
}
.lej-page-head .lej-eyebrow { letter-spacing: 0.2em; font-size: 11px; }
.lej-page-standfirst { font-size: 15.5px; line-height: 1.55; color: var(--muted); max-width: 72ch; }

.lej-contact-grid {
	padding: clamp(28px, 6vw, 44px) 0 clamp(40px, 8vw, 64px);
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr);
	gap: clamp(32px, 6vw, 64px);
	align-items: start;
}
.lej-form { display: flex; flex-direction: column; gap: 22px; }
.lej-field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lej-field { display: flex; flex-direction: column; gap: 8px; }
.lej-field > span {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--label);
}
.lej-input, .lej-form select, .lej-form textarea {
	border: 1px solid var(--rule-input);
	padding: 13px 14px;
	font-size: 16px;
	background: var(--paper);
	outline: 0;
	width: 100%;
	color: var(--ink);
}
.lej-form textarea { line-height: 1.55; resize: vertical; }
.lej-form-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 6px;
}
.lej-form-note { font-size: 13px; line-height: 1.5; color: var(--meta); max-width: 46ch; }
.lej-form-note a { text-decoration: underline; }

.lej-alert {
	border-left: 3px solid var(--down);
	background: #f7ece7;
	padding: 12px 16px;
	font-size: 14.5px;
	line-height: 1.5;
	color: #7a3323;
}

.lej-panel-warm {
	background: var(--warm);
	padding: 32px 34px;
	display: flex;
	flex-direction: column;
	gap: 26px;
}
.lej-panel-block { display: flex; flex-direction: column; gap: 12px; }
.lej-panel-block + .lej-panel-block {
	border-top: 1px solid var(--rule-soft);
	padding-top: 26px;
}
.lej-panel-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--label);
}
.lej-panel-label-gold { color: var(--gold); }
.lej-panel-body { font-size: 15px; line-height: 1.55; color: var(--dek); }
.lej-panel-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14.5px;
	color: var(--dek);
	margin-top: 4px;
}
.lej-panel-list div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	border-bottom: 1px solid var(--rule-soft);
	padding-bottom: 8px;
}
.lej-panel-list div:last-child { border-bottom: 0; padding-bottom: 0; }
.lej-panel-list b { font-weight: 600; }

.lej-sent {
	background: var(--warm);
	padding: 36px 38px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.lej-sent .lej-eyebrow { letter-spacing: 0.2em; font-size: 11px; }
.lej-sent-title { font-family: var(--serif); font-size: 34px; line-height: 1.08; font-weight: 600; }
.lej-sent-body { font-size: 16px; line-height: 1.6; color: var(--dek); max-width: 60ch; }

/* ============================================================================
   NEWSLETTER PAGE
   ========================================================================= */

.lej-nl-split {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: stretch;
}
.lej-nl-left {
	padding: clamp(32px, 5vw, 52px) var(--pad-x);
	display: flex;
	flex-direction: column;
	gap: 18px;
	border-right: 1px solid #d6cfc2;
}
.lej-nl-left h1 {
	font-family: var(--serif);
	font-size: clamp(36px, 5vw, 58px);
	line-height: 1.02;
	letter-spacing: -0.025em;
	max-width: 20ch;
}
.lej-nl-dek {
	font-family: var(--serif);
	font-size: clamp(19px, 2vw, 22px);
	line-height: 1.5;
	color: var(--dek);
	max-width: 56ch;
}
.lej-nl-facts {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 6px;
	border-top: 1px solid var(--rule-soft);
	padding-top: 18px;
}
.lej-nl-fact {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 16px;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--dek);
}
.lej-nl-fact > span:first-child {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--label);
	padding-top: 3px;
}
.lej-nl-fact a { text-decoration: underline; }
/* a block the desk gave no heading: the label column has nothing to hold, so
   the text takes the full width rather than sitting in an indent */
.lej-nl-fact-untitled { grid-template-columns: minmax(0, 1fr); }
.lej-nl-fact-untitled > span:first-child { display: none; }

/* The privacy policy link, standing on its own under the block. */
.lej-nl-privacy {
	margin-top: 14px;
	font-size: 13.5px;
	color: var(--meta);
}
.lej-nl-privacy a { color: inherit; text-decoration: underline; }

.lej-nl-latest {
	margin-top: 14px;
	border: 1px solid #d6cfc2;
	background: var(--warm);
	padding: 22px 24px;
}
.lej-nl-latest-title {
	margin-top: 10px;
	font-family: var(--serif);
	font-size: 26px;
	line-height: 1.1;
	font-weight: 600;
}
.lej-nl-latest-dek { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.lej-nl-latest-link {
	display: inline-block;
	margin-top: 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--blue);
}

.lej-nl-right {
	background: var(--ink);
	color: var(--on-dark);
	padding: clamp(32px, 5vw, 52px) var(--pad-x);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.lej-nl-form { display: flex; flex-direction: column; gap: 14px; }
.lej-nl-form-title {
	font-family: var(--serif);
	font-size: 34px;
	line-height: 1.06;
	font-weight: 600;
	color: #fffdf8;
}
.lej-nl-form-sub { font-size: 15.5px; line-height: 1.55; color: var(--on-dark-soft); }
.lej-nl-form input[type="email"] {
	border: 0;
	padding: 14px 16px;
	font-size: 16px;
	background: #fffdf8;
	color: var(--ink);
	outline: 0;
	width: 100%;
}
.lej-nl-form button {
	border: 0;
	background: var(--blue);
	color: #fffdf8;
	padding: 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.lej-nl-fineprint { font-size: 12.5px; color: var(--meta); }
.lej-nl-error { font-size: 13.5px; color: #e4a89a; }

/* ============================================================================
   AUTHOR
   ========================================================================= */

.lej-author-head {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 34px;
	align-items: center;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--rule-soft);
}
/* The portrait is a circle at every width: 200px beside the name on a desktop,
   112px above it on a phone, where the head becomes a single column. */
.lej-author-portrait {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: var(--warm);
}
.lej-author-portrait-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--serif);
	font-size: 78px;
	line-height: 1;
	color: var(--label);
	background: var(--warm);
	border: 1px solid var(--rule-soft);
}
@media (max-width: 760px) {
	.lej-author-head { gap: 18px; }
	.lej-author-portrait { width: 112px; height: 112px; }
	.lej-author-portrait-empty { font-size: 44px; }
}
.lej-author-head-body { display: flex; flex-direction: column; gap: 10px; }
.lej-author-head h1 {
	font-family: var(--serif);
	font-size: clamp(34px, 4.4vw, 50px);
	line-height: 1.02;
	letter-spacing: -0.02em;
}
.lej-author-bio {
	font-family: var(--serif);
	font-size: 20px;
	line-height: 1.55;
	color: var(--dek);
	max-width: 74ch;
}
.lej-author-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin-top: 6px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--label);
}
.lej-author-facts .lej-sep { color: var(--faint); }
.lej-author-facts a { color: var(--blue); font-weight: 600; }

.lej-list-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--label);
	padding-bottom: 10px;
	border-bottom: 1px solid var(--rule-soft);
}
.lej-byline-rows { padding: 22px 0 40px; }
.lej-byline-row {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr) 120px;
	gap: 24px;
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid var(--rule-soft);
}
.lej-byline-row-body { display: flex; flex-direction: column; gap: 6px; }
.lej-byline-row-title {
	font-family: var(--serif);
	font-size: 25px;
	line-height: 1.12;
	font-weight: 600;
}
.lej-byline-row-dek { font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 74ch; }
.lej-byline-row-date {
	text-align: right;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--meta);
}

/* ============================================================================
   TAXONOMY INDEX
   ========================================================================= */

.lej-term-grid {
	padding: 26px 0 40px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 40px;
}
.lej-term-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 18px;
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid var(--rule-soft);
}
.lej-term-body { display: flex; flex-direction: column; gap: 5px; }
.lej-term-name {
	font-family: var(--serif);
	font-size: 28px;
	line-height: 1.1;
	font-weight: 600;
}
.lej-term-dek { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.lej-term-count { font-family: var(--serif); font-size: 34px; color: var(--faint); }

/* ============================================================================
   LEGAL / BASIC PAGE
   ========================================================================= */

.lej-legal-prose {
	padding: 24px 0 40px;
	display: flex;
	flex-direction: column;
	gap: 26px;
}
.lej-legal-prose > * { margin: 0; }
.lej-legal-prose h2 { font-family: var(--serif); font-size: 27px; }
.lej-legal-prose h3 { font-family: var(--serif); font-size: 22px; }
.lej-legal-prose p,
.lej-legal-prose ul,
.lej-legal-prose ol {
	font-family: var(--serif);
	font-size: 19.5px;
	line-height: 1.62;
	color: var(--prose);
}
.lej-legal-prose ul, .lej-legal-prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.lej-legal-prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.lej-legal-prose blockquote {
	border-left: 3px solid var(--blue);
	padding: 4px 0 4px 20px;
	font-family: var(--serif);
	font-size: 21px;
	line-height: 1.55;
	color: var(--prose);
}
.lej-legal-prose img { width: 100%; }

.lej-side-nav {
	border: 1px solid var(--ink);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.lej-side-nav a { font-size: 15px; padding: 5px 0; border-bottom: 1px solid var(--rule-soft); }
.lej-side-nav a:last-child { border-bottom: 0; }

/* ============================================================================
   SEARCH
   ========================================================================= */

.lej-search-page { padding: clamp(38px, 5vw, 62px) var(--pad-x) 0; max-width: calc(1000px + 2 * var(--pad-x)); }
.lej-search-head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--rule-soft);
}
.lej-search-head h1 {
	font-family: var(--serif);
	font-size: clamp(34px, 5vw, 52px);
	line-height: 1;
	letter-spacing: -0.02em;
}
.lej-search-form { display: flex; gap: 10px; max-width: 620px; }
.lej-search-form input {
	border: 1px solid var(--ink);
	padding: 14px 16px;
	font-size: 18px;
	background: var(--paper);
	outline: 0;
	flex: 1;
	min-width: 0;
	color: var(--ink);
}
.lej-search-count {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--label);
}
.lej-result-rows { padding: 12px 0 40px; }
.lej-result-row {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 22px;
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid var(--rule-soft);
}
.lej-result-body { display: flex; flex-direction: column; gap: 6px; }
.lej-result-title {
	font-family: var(--serif);
	font-size: 25px;
	line-height: 1.12;
	font-weight: 600;
}
.lej-result-dek { font-size: 15px; line-height: 1.5; color: var(--muted); }
mark { background: #f5efe1; color: inherit; }

/* ============================================================================
   FOOTER
   ========================================================================= */

.lej-footer {
	background: var(--ink);
	padding: clamp(40px, 5vw, 56px) var(--pad-x) clamp(20px, 2vw, 26px);
	margin-top: clamp(36px, 5vw, 60px);
}
.lej-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 36px;
	align-items: start;
	padding-bottom: 36px;
	border-bottom: 1px solid var(--rule-dark-soft);
}
.lej-footer a { color: var(--on-dark-soft); }
.lej-footer a:hover { color: #fffdf9; opacity: 0.85; }
.lej-footer-brand { display: flex; flex-direction: column; gap: 12px; }
.lej-footer-name {
	font-family: var(--serif);
	font-size: 24px;
	font-weight: 600;
	color: #fffdf9;
}
.lej-footer-blurb {
	font-size: 14.5px;
	line-height: 1.55;
	color: #b9b1a3;
	max-width: 40ch;
}
.lej-social { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.lej-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	border: 1px solid var(--rule-dark);
	color: var(--on-dark-soft);
}
.lej-footer-col { display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.lej-footer-col a { line-height: 1.7; }
.lej-footer-col-label {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--meta);
	margin-bottom: 5px;
}
.lej-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 20px;
	padding-top: 18px;
	font-size: 12px;
	color: var(--meta);
}

/* Four columns of link lists do not survive a phone: the last one runs off the
   edge and its labels wrap to one word per line. Brand across the top, then
   two columns of links. */
@media (max-width: 760px) {
	.lej-footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 32px;
	}
	.lej-footer-brand { grid-column: 1 / -1; }
}

/* ============================================================================
   COOKIE NOTICE
   The engine owns the behaviour and ships zero-specificity defaults; these
   rules are the design's own, and win.
   ========================================================================= */

.cookie-consent {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	top: auto;
	z-index: 60;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: var(--ink);
	color: var(--on-dark);
	padding: 16px var(--pad-x);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	box-shadow: 0 -8px 28px rgba(22, 19, 15, 0.22);
}
.cookie-consent-text {
	font-size: 14px;
	line-height: 1.5;
	color: var(--on-dark-soft);
	max-width: 78ch;
}
.cookie-consent-text a { color: var(--blue-light); text-decoration: underline; }
.cookie-consent-accept {
	flex: 0 0 auto;
	background: var(--blue);
	color: #fffdf8;
	border: 0;
	padding: 10px 18px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

@media (max-width: 760px) {
	.cookie-consent { flex-direction: column; align-items: stretch; gap: 14px; }
	.cookie-consent-text { max-width: none; font-size: 13px; line-height: 1.45; }
	.cookie-consent-accept { width: 100%; }
}

/* ============================================================================
   RESPONSIVE — the design defines two breaks, 1080 and 760
   ========================================================================= */

@media (max-width: 1080px) {
	.lej-cover-grid,
	.lej-feature-split,
	.lej-split-feature,
	.lej-lead,
	.lej-readnext-split,
	.lej-lead-split,
	.lej-main-side,
	.lej-report-hero,
	.lej-about-hero,
	.lej-about-row,
	.lej-contact-grid,
	.lej-nl-split,
	.lej-author-head,
	.lej-byline-row,
	.lej-result-row,
	.lej-nl-fact { grid-template-columns: minmax(0, 1fr) !important; }

	.lej-report-page { grid-template-columns: minmax(0, 1fr); }
	.lej-toc, .lej-rail { position: static; }
	.lej-toc { display: none; }

	.lej-grid { --cols: 2 !important; }
	.lej-mostread { --cols: 3 !important; }
	.lej-featured-grid { --cols: 2 !important; }
	.lej-endnotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lej-term-grid { grid-template-columns: minmax(0, 1fr); }

	.lej-main-col, .lej-report-body { max-width: none; }
	.lej-byline-row-date { text-align: left; }
	.lej-split-body { padding-right: 0; }
	.lej-nl-left { border-right: 0; border-bottom: 1px solid #d6cfc2; }
	.lej-report-hero-body { order: 1; }
}

@media (max-width: 760px) {
	/* Page heads centre too, so a section, an index and an article all open the
	   same way on a phone. */
	.lej-index-head { flex-direction: column; align-items: center; text-align: center; }
	.lej-index-head-body { align-items: center; }
	.lej-index-standfirst, .lej-page-standfirst { max-width: 46ch; }
	.lej-index-count { padding-bottom: 0; }
	.lej-page-head { align-items: center; text-align: center; }
	.lej-search-head { align-items: center; text-align: center; }
	.lej-subnav { justify-content: flex-start; }

	.lej-article-head { align-items: center; text-align: center; }
	.lej-article-kicker, .lej-report-hero-kicker { justify-content: center; }
	.lej-article-standfirst, .lej-report-hero-dek { max-width: 46ch; }
	.lej-news-head h1 { max-width: none; text-align: center; }
	.lej-news-meta-bar, .lej-report-hero-meta, .lej-article-meta { justify-content: center; }
	.lej-byline-bar { flex-direction: column; align-items: center; gap: 12px; }
	.lej-report-hero-body { align-items: center; text-align: center; }
	.lej-report-hero .lej-btn-row, .lej-about-hero { text-align: center; }
	.lej-about-hero-body { align-items: center; text-align: center; }

	.lej-grid { --cols: 1 !important; }
	.lej-mostread { --cols: 2 !important; }
	.lej-featured-grid { --cols: 1 !important; }
	.lej-endnotes { grid-template-columns: minmax(0, 1fr); }
	.lej-field-pair { grid-template-columns: minmax(0, 1fr); }
	.lej-newsletter-band { padding: 26px 22px; }
	.lej-panel-warm { padding: 26px 22px; }
	.lej-sent { padding: 26px 22px; }
	.lej-hero { padding-left: var(--pad-x); padding-right: var(--pad-x); }
}

/* ============================================================================
   ARTICLE LANGUAGE TABS + ARABIC BODY

   The Journal is an English publication that sometimes runs a piece in Arabic.
   Flipping the whole document to RTL mirrored a navigation, markets bar and
   footer that are all still written in English, which read as broken rather
   than translated. So nothing here escapes the article body.
   ========================================================================== */

/* ---- The link to a piece's other language ---------------------------------
   It rides at the end of the kicker row, in that row's typography, and pushes
   itself to the far end so the kind and section stay together at the start.
   On a narrow screen the row wraps and the link simply follows on its own
   line rather than being squeezed. */

.lej-lang-switch {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--blue);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	text-transform: none;
	letter-spacing: 0.02em;
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
}
.lej-lang-switch:hover { border-bottom-color: currentColor; }
/* the one Arabic word in an otherwise English line, so it takes the Arabic
   face too rather than falling to whatever the machine substitutes */
.lej-lang-switch .lej-lang-name {
	font-size: 13.5px;
	letter-spacing: 0;
	font-family: 'Tajawal', 'Noto Naskh Arabic', 'Geeza Pro', sans-serif;
}
/* On the report's dark hero the blue is too dark to read. */
.lej-report-hero-kicker .lej-lang-switch { color: var(--gold-light); }
@media (max-width: 620px) {
	.lej-lang-switch { margin-inline-start: 0; white-space: normal; }
}

/* ---- An Arabic headline and standfirst ------------------------------------
   The title and summary come back in Arabic alongside the body, but they used
   to be left in the Latin serif and left-aligned, so a translated piece opened
   with a headline set in whatever Arabic face the reader's machine happened to
   substitute, ranged the wrong way.

   Applied to those two elements only, never to the kicker row above them: that
   row names the kind and the section in English and belongs to the site's
   furniture, so turning it would mirror English words for no reason. */

/* Qualified with the element so these carry the same weight as the Latin
   rules they replace (.lej-news-head h1, .lej-report-hero h1) and the
   narrow-screen rule that centres the news headline. Being later in the file,
   an equal score is enough — no !important needed. */
h1.lej-ar-title,
p.lej-ar-dek {
	direction: rtl;
	text-align: right;
	font-family: 'Tajawal', 'Noto Naskh Arabic', 'Geeza Pro', sans-serif;
	letter-spacing: 0;
}
h1.lej-ar-title { font-weight: 700; line-height: 1.4; }
p.lej-ar-dek { line-height: 1.8; }

/* ---- The Arabic body ------------------------------------------------------
   Applied to one container. Everything outside it is untouched. */

.lej-body-ar {
	direction: rtl;
	text-align: right;
	/* Tajawal, self-hosted like the Latin faces. This used to name the
	   reader's own system Arabic font, which meant the same piece was set in
	   Noto Naskh on one machine and Geeza Pro on another; the Journal now
	   picks its Arabic face the way it picks its English one. */
	font-family: 'Tajawal', 'Noto Naskh Arabic', 'Geeza Pro', sans-serif;
	line-height: 1.95;
}
.lej-body-ar h1,
.lej-body-ar h2,
.lej-body-ar h3,
.lej-body-ar h4 {
	font-family: 'Tajawal', 'Noto Naskh Arabic', 'Geeza Pro', sans-serif;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.5;
}
.lej-body-ar p { text-align: right; }
.lej-body-ar ul,
.lej-body-ar ol { padding-right: 1.4em; padding-left: 0; }
.lej-body-ar blockquote {
	border-right: 3px solid var(--blue);
	border-left: 0;
	padding-right: 18px;
	padding-left: 0;
}
/* a dropcap is a Latin device and has no business in Arabic text */
.lej-body-ar .lej-dropcap {
	float: none;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	color: inherit;
}

/* ---- Byline portrait ------------------------------------------------------
   A small round face beside the name, in the meta bars that carry one line of
   credits. The article's own byline block has its own larger treatment. */

.lej-byline-inline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
/* The byline is a link on every kind of piece; it should look like one when
   pointed at, without turning the meta bar into a row of underlines. */
.lej-byline-link { color: inherit; text-decoration: none; }
.lej-byline-link:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.lej-byline-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	background: var(--warm);
	border: 1px solid var(--rule-soft);
}
/* no photo uploaded: the initial keeps the byline's shape */
.lej-byline-avatar-empty {
	background: var(--ink);
	color: var(--on-dark);
	font-family: var(--sans);
	font-weight: 600;
	letter-spacing: 0;
	border-color: transparent;
}

/* The read-next block on a news dispatch sits outside the article-and-rail
   row, so it takes that row's width and centring rather than its own: the two
   have to start on the same left edge or the page looks stepped. */
.lej-readnext-wrap {
	max-width: 1280px;
	margin-inline: auto;
	padding: 0 var(--pad-x);
}
.lej-readnext-wrap .lej-readnext { max-width: none; }