/* =============================================================
 * Eekad — main stylesheet
 * RTL-only, dark theme. Tokens mirror theme.json so PHP templates
 * and the block editor share one source of truth.
 * =========================================================== */

:root {
	/* ----- Brand (unchanged between modes) ----- */
	--c-lime:         #CDFE64;
	--c-indigo:       #5050D1;
	--c-indigo-deep:  #4040A8;
	--c-indigo-soft:  #8a8af0;
	--c-indigo-muted: #4040A8;
	--c-coral:        #d13636;

	/* ----- Backgrounds ----- */
	--c-bg-base:     #0E1012;
	--c-bg-alt:      #16191C;
	--c-bg-surface:  #1C1F24;
	--c-bg-elevated: #2A2F36;

	/* ----- Text ----- */
	--c-text:          #EAECF0;
	--c-text-2:        #D5DCDC;
	--c-text-3:        #C9D1D0;
	--c-text-muted:    #ABB7B6;
	--c-text-faint:    #727A79;
	--c-text-on-accent: #0E1012;

	/* ----- Borders / overlays (rgb channel list) ----- */
	--c-border-rgb: 255, 255, 255;

	/* ----- Brand-colour rgb channels (for rgba overlays) ----- */
	--c-lime-rgb: 205, 254, 100;

	/* ----- Surface-colour rgb channels (for rgba overlays) ----- */
	--c-bg-base-rgb:     14, 16, 18;
	--c-bg-alt-rgb:      22, 25, 28;
	--c-bg-surface-rgb:  28, 31, 36;
	--c-bg-elevated-rgb: 42, 47, 54;

	/* ----- Tints ----- */
	--c-tint-green: #2D3533;

	/* ----- Legacy aliases (keep until fully migrated) ----- */
	--c-bg:      var(--c-bg-elevated);
	--c-surface: var(--c-bg-elevated);
	--c-ink:     var(--c-text-on-accent);
	--c-grey-50:  var(--c-text);
	--c-grey-100: var(--c-text-2);
	--c-grey-200: var(--c-text-3);
	--c-grey-300: var(--c-text-muted);
	--c-grey-500: var(--c-text-faint);
	--c-white:    #ffffff;

	/* ----- Type ----- */
	/* Somaya carries Arabic + numerals; the Latin fallback only kicks in
	   for stray Latin words (demo/guide pages). Production is Arabic, so
	   this never shows there — it just keeps mixed-script pages clean.
	   NOTE: Arabic is a connected script — letter-spacing must stay 0 on
	   Arabic text at every size (it breaks the letterforms). Reserve
	   tracking for Latin/mono labels only. */
	--font-sans: "itf Somaya Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--font-mono: "itf Somaya Arabic", ui-monospace, "SF Mono", Menlo, monospace;

	--fs-xs:   12px;
	--fs-sm:   17px;
	--fs-base: 20px;
	--fs-lg:   24px;
	--fs-h3:   30px;
	--fs-h2:   40px;
	--fs-h1:   52px;
	--fs-article: 24px;
	--fs-article-mobile: 21px;

	--lh-tight: 1.2;
	--lh-title: 1.3;
	--lh-base:  1.6;

	/* ----- Motion -----
	   One easing family for the whole surface. Both curves are
	   critically damped (no overshoot): --ease-out for small color/
	   opacity moves, --ease-spring (Apple's sheet curve) for anything
	   that travels. Press feedback is near-instant by design. */
	--ease-out:    cubic-bezier(.25, .1, .25, 1);
	--ease-spring: cubic-bezier(.32, .72, 0, 1);
	--dur-press: 110ms;
	--dur-quick: 220ms;
	--dur-move:  420ms;

	/* ----- Layout ----- */
	--container:    1232px;
	--container-px: 24px;
	/* Fixed-header height. Narrowed at the two header breakpoints; anything
	   that has to sit directly under the header reads it from here. */
	--eekad-header-h: 64px;
	/* One vertical rhythm for every homepage section. */
	--section-pad: clamp(56px, 7vw, 88px);

	/* ----- Glass material recipe (dark theme) -----
	   Shared by the homepage Apple layer and the article reading
	   layer — one material, one vocabulary. */
	--glass-bg:        rgba(255, 255, 255, .045);
	--glass-bg-hover:  rgba(255, 255, 255, .075);
	--glass-edge:      rgba(255, 255, 255, .09);
	--glass-edge-top:  rgba(255, 255, 255, .16);

	/* Display type scale (Arabic: bigger sizes need MORE leading
	   head-room than Latin, so 1.2 is our floor, never 1.05) */
	--fs-display: clamp(34px, 3.6vw, 52px);

	/* Section sub-heading — the one rung between a page title and card
	   type: "أبرز التقارير", "جميع المقالات", "أحدث التحققات". Every
	   list page sets its section headings from this so they cannot drift
	   apart again; several had grown their own size (52px on the
	   verifications archive, 26px on the submit block, 22px on the file
	   pages) and the same rung read differently page to page.
	   Clamped rather than stepped in a media query so the phone size
	   lives with the token instead of in per-page overrides. */
	--fs-section: clamp(24px, 2.2vw, 28px);

	/* ----- Investigation block system -----
	   Shared rhythm + surface tokens so every evidence block reads as
	   one family: predictable spacing, one card recipe, one hairline. */
	--iv-block-gap:   clamp(72px, 9vw, 112px); /* between blocks        */
	--iv-label-gap:   28px;                    /* eyebrow → content     */
	--iv-pad:         32px;                    /* card interior         */
	--iv-caption-gap: 16px;                    /* media → caption       */
	/* Card recipe = the homepage glass material — one card, one kit. */
	--iv-card-bg:     var(--glass-bg);
	--iv-card-border: 1px solid var(--glass-edge);
	--iv-hairline:    rgba(var(--c-border-rgb), 0.10);

	/* Fact-check verdict palette — one source shared by claim-verdict
	   and verification-basic so the two blocks read as one genre. */
	--verdict-false:      #ed5d5d;
	--verdict-misleading: #fbbf24;
	--verdict-true:       var(--c-lime);
	--verdict-unverified: var(--c-text-muted);
}
/* ----- Font faces (loaded from /assets/fonts/) ----- */
@font-face {
	font-family: "itf Somaya Arabic";
	src: url("../fonts/SomayaArabic-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "itf Somaya Arabic";
	src: url("../fonts/SomayaArabic-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "itf Somaya Arabic";
	src: url("../fonts/SomayaArabic-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "itf Somaya Arabic";
	src: url("../fonts/SomayaArabic-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
/* ----- Latin & digit glyphs: DM Mono -----
   Somaya's Latin letters and numerals are weak, so DM Mono overlays
   them via unicode-range — extra faces of the SAME family, scoped to
   digits and A-Z/a-z only. The browser picks per character: Arabic
   (and all punctuation) stays Somaya, "Maersk" and 13/7/2026 render
   in DM Mono. No markup, no spans, no JS — these faces must simply
   come after Somaya's so they win the overlap.

   Each face must declare a SINGLE discrete weight matching a Somaya face,
   never a range. Weight is matched before unicode-range, so a face
   declared `font-weight: 500 700` is an exact match for both 500 and
   700 and outranks Somaya's discrete faces at those weights; the Latin
   unicode-range then excludes Arabic, leaving those weights with no
   Arabic face at all, and the browser silently fakes bold from the 400
   file. That shipped once — every Medium and Bold heading on the site
   was synthetic, ~9px wider than real Somaya Bold at 80px.

   DM Mono has no bold of its own, so 700 reuses the Medium file and
   the browser emboldens the Latin run next to Somaya Bold.
   OFL-licensed, self-hosted (see fonts/README.md). */
@font-face {
	font-family: "itf Somaya Arabic";
	src: url("../fonts/DMMono-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
}
@font-face {
	font-family: "itf Somaya Arabic";
	src: url("../fonts/DMMono-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
}
@font-face {
	font-family: "itf Somaya Arabic";
	src: url("../fonts/DMMono-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
}
@font-face {
	font-family: "itf Somaya Arabic";
	src: url("../fonts/DMMono-Medium.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
}

/* ----- The double quote: Work Sans -----
   Somaya draws U+0022 as a curly comma-shaped pair. Arabic headlines
   quote constantly and the house style is a straight mark, so one more
   face of the same family takes that single character.

   Scoped to U+0022 alone, which is why the files are ~0.5KB each:
   subset from the Google Fonts latin build down to one glyph. Two
   weights, matching the Somaya faces text is actually set in — the
   discrete-weight rule above applies here too, and a range would strip
   Arabic from those weights exactly the same way.
   OFL-licensed, self-hosted (see fonts/README.md). */
@font-face {
	font-family: "itf Somaya Arabic";
	src: url("../fonts/WorkSans-Quote-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0022;
}
@font-face {
	font-family: "itf Somaya Arabic";
	src: url("../fonts/WorkSans-Quote-400.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0022;
}
@font-face {
	font-family: "itf Somaya Arabic";
	src: url("../fonts/WorkSans-Quote-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0022;
}
@font-face {
	font-family: "itf Somaya Arabic";
	src: url("../fonts/WorkSans-Quote-400.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0022;
}

/* ----- Reset (minimal) ----- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
	margin: 0;
	background: var(--c-bg-surface);
	color: var(--c-text);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	font-weight: 500;
	direction: rtl;
	text-align: right;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Alternating section backgrounds — odd/even auto-striping so
   sections always contrast regardless of which ones render.
   --card-bg flips so cards always contrast with their section.
   --section-bg echoes the section color for deeper nesting. */
.eekad-main > section:nth-of-type(odd)  { background: var(--c-bg-elevated); --card-bg: var(--c-bg-surface); --section-bg: var(--c-bg-elevated); }
.eekad-main > section:nth-of-type(even) { background: var(--c-bg-surface);  --card-bg: var(--c-bg-elevated); --section-bg: var(--c-bg-surface); }

/* =============================================================
 * Fluid interface foundations
 *
 * Feedback lives on the press, not the release: every interactive
 * surface compresses the instant it's touched (:active), using the
 * shared motion tokens. Hover states may take --dur-quick; the press
 * itself must feel immediate (--dur-press).
 * =========================================================== */

/* --- Press feedback: buttons, pills, arrows, chips --- */
.eekad-btn:active,
.eekad-news__pill:active,
.eekad-picks__pill:active,
.eekad-verify__nav-btn:active,
.eekad-tv__nav-btn:active,
.eekad-categories__arrow:active,
.eekad-site-header__verify:active,
.eekad-verify__cta:active,
.eekad-category__cta:active,
.eekad-hero__cta:active,
.eekad-site-footer__form button:active {
	transform: scale(.97);
	transition-duration: var(--dur-press);
}
/* The header DB CTA centers itself with translateY(-50%) — a bare
   scale() would replace it and drop the button by half its height. */
.eekad-site-header__cta:active {
	transform: translateY(-50%) scale(.97);
	transition-duration: var(--dur-press);
}

/* --- Press feedback: full-card surfaces (gentler compression) --- */
.eekad-news__link:active,
.eekad-tv__rail .eekad-tv-reel:active,
.eekad-verify__card:active,
.eekad-picks__card:active,
.eekad-category:active {
	transform: scale(.99);
	transition-duration: var(--dur-press);
}

/* --- Unified hover lift for card surfaces ---
   Cards answer the cursor with a small, calm rise. No 3D tilt. */
.eekad-news__link,
.eekad-picks__card,
.eekad-verify__card {
	transition: transform var(--dur-quick) var(--ease-spring),
	            background var(--dur-quick) var(--ease-out),
	            filter var(--dur-quick) var(--ease-out);
}
.eekad-news__link:hover,
.eekad-picks__card:hover,
.eekad-verify__card:hover {
	transform: translateY(-3px);
}

/* --- Keyboard focus: one visible language everywhere --- */
.eekad-btn:focus-visible,
.eekad-news__pill:focus-visible,
.eekad-picks__pill:focus-visible,
.eekad-verify__nav-btn:focus-visible,
.eekad-tv__nav-btn:focus-visible,
.eekad-categories__arrow:focus-visible,
.eekad-news__link:focus-visible,
.eekad-verify__card:focus-visible,
.eekad-picks__card:focus-visible {
	outline: 2px solid var(--c-lime);
	outline-offset: 2px;
}

/* --- Reduced motion: gentle equivalents, never dead UI ---
   Reveals become simple cross-fades already in place; travel,
   parallax and decorative sweeps are dropped. */
@media (prefers-reduced-motion: reduce) {
	.eekad-reveal,
	.eekad-reveal.eekad-reveal--card {
		opacity: 1;
		transform: none;
		transition: opacity var(--dur-quick) var(--ease-out);
	}
	.eekad-bracket-anim {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.eekad-hero__scan-line { display: none; }
	.eekad-news__link:hover,
	.eekad-picks__card:hover,
	.eekad-verify__card:hover,
	.eekad-tv__rail .eekad-tv-reel:hover { transform: none; }
}

/* --- Reduced transparency: frost the glass --- */
@media (prefers-reduced-transparency: reduce) {
	.eekad-site-header.is-scrolled::before,
	.eekad-nav .sub-menu,
	.eekad-nav__mega-panel {
		background: var(--c-bg-alt);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* =============================================================
 * Entrance Animations
 * =========================================================== */

/* --- Hero scan line --- */
.eekad-hero__scan-line {
	position: absolute;
	top: 0;
	inset-inline-end: 100%;
	width: 100%;
	height: 100%;
	z-index: 10;
	pointer-events: none;
	background: linear-gradient(
		to left,
		transparent 0%,
		rgba(205, 254, 100, .06) 20%,
		rgba(205, 254, 100, .12) 50%,
		rgba(205, 254, 100, .06) 80%,
		transparent 100%
	);
	opacity: 0;
}
.eekad-hero__scan-line.is-active {
	opacity: 1;
	animation: hero-scan 1.6s cubic-bezier(.25,.1,.25,1) forwards;
}
@keyframes hero-scan {
	0%   { inset-inline-end: 100%; }
	100% { inset-inline-end: -100%; }
}

/* --- Scroll reveal --- */
.eekad-reveal {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .45s var(--ease-out),
	            transform .55s var(--ease-spring);
}
.eekad-reveal.is-revealed {
	opacity: 1;
	transform: translateY(0);
}
/* Cards get a slightly different compose: scale from 98% + fade */
.eekad-reveal.eekad-reveal--card {
	transform: translateY(8px) scale(.985);
	transition: opacity .45s var(--ease-out),
	            transform .55s var(--ease-spring);
}
.eekad-reveal--card.is-revealed {
	transform: translateY(0) scale(1);
}

/* --- Section bracket expansion --- */
.eekad-bracket-anim {
	display: inline-block;
	opacity: 0;
	transition: opacity .8s ease, transform 1s cubic-bezier(.19,1,.22,1);
}
/* Determine which bracket slides which direction */
.eekad-bracket-anim:first-child {
	transform: translateX(-12px);
}
.eekad-bracket-anim:last-child {
	transform: translateX(12px);
}
.eekad-bracket-anim.is-expanded {
	opacity: 1;
	transform: translateX(0);
}

/* --- Cursor glow (scoped to OSINT hero) --- */
.eekad-cursor-glow {
	position: absolute;
	top: 0;
	left: 0;
	width: 140px;
	height: 140px;
	margin: -70px 0 0 -70px;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(205, 254, 100, .12) 0%,
		rgba(205, 254, 100, .04) 40%,
		transparent 70%
	);
	pointer-events: none;
	z-index: 5;
	opacity: 0;
	transition: opacity .4s ease;
	will-change: transform;
}

/* --- Crosshair cursor (archive hero zones) --- */
.eekad-crosshair-zone { overflow: hidden; }

.eekad-xhair__dot {
	position: absolute;
	top: 0; left: 0;
	width: 8px; height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 0;
	background: var(--c-coral);
	box-shadow: 0 0 6px 1px rgba(209, 54, 54, .5);
	pointer-events: none;
	z-index: 20;
	opacity: 0;
	will-change: transform;
}
.eekad-xhair__line-h {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: rgba(var(--c-border-rgb), .15);
	pointer-events: none;
	z-index: 19;
	opacity: 0;
	will-change: transform;
}
.eekad-xhair__line-v {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 1px;
	background: rgba(var(--c-border-rgb), .15);
	pointer-events: none;
	z-index: 19;
	opacity: 0;
	will-change: transform;
}
.eekad-xhair__coords {
	position: absolute;
	bottom: 24px;
	left: 24px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--c-text-muted);
	pointer-events: none;
	z-index: 20;
	opacity: 0;
	user-select: none;
}

/* ----- Layout primitives (will grow as templates need them) ----- */
.eekad-container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--container-px);
}

/* =============================================================
 * Site header
 *
 * Layout: 3-column grid — logo on the right (column 1 in RTL),
 * nav truly centered in the viewport (column 2), spacer left.
 *
 * Background is fully transparent at the top of the page. Once the
 * page scrolls > 12px, the .is-scrolled class is added by the small
 * script in footer.php and the header gains a translucent backdrop.
 * =========================================================== */
/* --- Header shell --- */
.eekad-site-header {
	position: fixed;
	top: 0;
	inset-inline: 0;
	z-index: 100;
	background: transparent;
	transition: background .3s ease;
	overflow: visible;
}
.eekad-site-header.is-scrolled::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(var(--c-bg-alt-rgb), .72);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	z-index: -1;
}
/* Scroll edge effect — a soft gradient where content meets the
   floating chrome, instead of a hard 1px divider. */
.eekad-site-header.is-scrolled::after {
	content: "";
	position: absolute;
	top: 100%;
	inset-inline: 0;
	height: 20px;
	background: linear-gradient(180deg, rgba(var(--c-bg-base-rgb), .30), transparent);
	pointer-events: none;
	z-index: -1;
	transition: background .3s ease, backdrop-filter .3s ease;
}
/* Immersive scrolly blocks bleed to the very top edge, behind the fixed
   header. While one covers the header band, swap the translucent blur bar
   — which otherwise "eats" the top of the image — for a soft top-down
   scrim that keeps the logo and menu legible over any image. Toggled by
   scroll-steps.js adding .has-scrolly-immersive to <html>. Mobile only:
   on desktop the pinned media is inset below the header, so there is
   nothing to rescue and the standard blur bar stays. */
@media (max-width: 800px) {
	.has-scrolly-immersive .eekad-site-header.is-scrolled::before {
		inset: 0;
		bottom: auto;
		height: 200%;
		background: linear-gradient(180deg, rgba(8, 9, 11, .74) 0%, rgba(8, 9, 11, .34) 48%, transparent 100%);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		pointer-events: none;
	}
}

/* --- Inner container --- */
.eekad-site-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Token, not a literal: the mobile-sticky scrollytelling band pins
	   directly beneath the header and has to know how tall it is. The
	   breakpoints below move the token, so the two can never drift. */
	min-height: var(--eekad-header-h);
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 32px;
}

/* --- Logo --- */
.eekad-site-header__logo {
	position: absolute;
	inset-inline-start: 32px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	color: var(--c-text);
	flex-shrink: 0;
}
.eekad-site-header__logo svg {
	width: 64px;
	height: auto;
	display: block;
	filter: drop-shadow(0 0 0 rgba(213, 254, 119, 0));
	transition: transform .35s ease-out,
	            filter .35s ease-out;
}
.eekad-site-header__logo:hover {
	color: var(--c-lime);
}
.eekad-site-header__logo:hover svg {
	transform: scale(1.08);
	filter: drop-shadow(0 0 8px rgba(213, 254, 119, .6))
	        drop-shadow(0 0 24px rgba(213, 254, 119, .3));
}

/* --- Header actions (verify pill + OSINT CTA) --- */
.eekad-site-header__actions {
	position: absolute;
	inset-inline-end: 32px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* Prominent "تحقق" pill — lime-accented so it stands out from the rest
   of the nav. This is the primary call-to-action for the fact-checking
   product and we want editors/visitors to spot it immediately. */
.eekad-site-header__verify {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--c-text);
	text-decoration: none;
	padding: 8px 14px;
	border: 1px solid rgba(var(--c-border-rgb), .12);
	transition: background .2s, border-color .2s, color .2s;
}
.eekad-site-header__verify svg {
	width: 18px;
	height: 18px;
	display: block;
}
.eekad-site-header__verify:hover {
	color: var(--c-lime, #CDFE64);
	background: rgba(213, 254, 119, .06);
	border-color: rgba(213, 254, 119, .2);
}

/* --- CTA button --- */
.eekad-site-header__cta {
	position: absolute;
	inset-inline-end: 32px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--c-text);
	text-decoration: none;
	padding: 8px 14px;
	border: 1px solid rgba(var(--c-border-rgb), .12);
	transition: background .2s, border-color .2s, color .2s;
}
.eekad-site-header__cta svg {
	width: 18px;
	height: 18px;
	display: block;
}
.eekad-site-header__cta:hover {
	color: var(--c-lime, #CDFE64);
	background: rgba(213, 254, 119, .06);
	border-color: rgba(213, 254, 119, .2);
}

/* --- Primary nav list --- */
.eekad-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 4px;
}
.eekad-nav > li {
	display: inline-flex;
}

/* --- Nav links --- */
.eekad-nav > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--c-text);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	padding: 10px 14px;
	text-decoration: none;
	transition: color .18s, background-color .18s;
}
/* Every item answers the pointer with the same quiet wash — the mega
   triggers just keep theirs while their panel stays open. */
.eekad-nav > li > a:hover {
	color: var(--c-text);
	background: rgba(255, 255, 255, .08);
}
.eekad-nav > li.current-menu-item > a,
.eekad-nav > li.current_page_item > a,
.eekad-nav > li.current-menu-ancestor > a {
	color: var(--c-lime);
}

/* --- Dropdown parent --- */
.eekad-nav .menu-item-has-children {
	position: relative;
}

/* --- Dropdown card (dark panel anchored to its trigger, sharp edges) --- */
.eekad-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 8px;
	position: absolute;
	top: calc(100% + 10px);
	inset-inline-start: 0;
	min-width: 200px;
	width: max-content;
	background: rgba(20, 22, 28, .72);
	backdrop-filter: blur(16px) saturate(180%);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	/* Light-catch top edge — glass reads as a material, not a flat panel. */
	border-top: 1px solid rgba(var(--c-border-rgb), .10);
	box-shadow:
		0 20px 50px rgba(0, 0, 0, .45),
		0 4px 12px rgba(0, 0, 0, .25),
		0 0 0 1px rgba(var(--c-border-rgb), .06);
	display: flex;
	flex-direction: column;
	gap: 2px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	/* Materialize from the trigger: scale + rise anchored to the top. */
	transform-origin: top center;
	transform: translateY(-4px) scale(.98);
	transition: opacity var(--dur-quick) var(--ease-out),
	            transform var(--dur-quick) var(--ease-spring),
	            visibility var(--dur-quick);
	z-index: 51;
}
/* Bridge the gap between trigger and card so the dropdown doesn't
   vanish when the cursor crosses the space between them. */
.eekad-nav .sub-menu::before {
	content: "";
	position: absolute;
	top: -12px;
	inset-inline: 0;
	height: 12px;
}
.eekad-nav .menu-item-has-children:hover > .sub-menu,
.eekad-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}

/* --- Dropdown items --- */
.eekad-nav .sub-menu li {
	display: block;
}
.eekad-nav .sub-menu a {
	display: block;
	padding: 10px 14px;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--c-text-2);
	text-align: start;
	white-space: nowrap;
	transition: background .15s, color .15s;
}
.eekad-nav .sub-menu a:hover {
	background: rgba(var(--c-border-rgb), .06);
	color: var(--c-text);
}
.eekad-nav .sub-menu .current-menu-item > a {
	background: rgba(213, 254, 119, .08);
	color: var(--c-lime);
}

/* --- Mega menu (Apple-style category browser) --- */
.eekad-nav__mega { position: relative; }
.eekad-nav__mega-trigger {
	cursor: pointer;
}
/* An open trigger holds the hover wash for as long as its panel is open,
   even once the pointer has moved down into the panel — that is what says
   WHICH item the panel belongs to. Deliberately not lime: lime already
   means "the page you are on", and both states have to read at once when
   you open the menu of the section you are currently in. */
.eekad-nav__mega-trigger[aria-expanded="true"] {
	color: var(--c-text);
	background: rgba(255, 255, 255, .08);
}
/* Backdrop — starts BELOW the header so the nav itself stays crisp.
   Blurs/darkens the page area visible below the panel. */
.eekad-nav__mega-backdrop {
	position: fixed;
	top: 64px;
	inset-inline: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .42s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .42s;
	z-index: 89;
}
.eekad-nav__mega-backdrop.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .42s cubic-bezier(.32, .72, 0, 1), visibility 0s;
}
/* Panel — fixed full-viewport-width strip flush below the header,
   so it sits edge-to-edge regardless of the centered nav container.
   Background matches the header's scrolled state so the two read as
   one continuous surface. Slide-down reveal via clip-path. */
.eekad-nav__mega-panel {
	position: fixed;
	top: 64px;
	inset-inline: 0;
	/* Same material recipe as the scrolled header — one continuous surface. */
	background: rgba(var(--c-bg-alt-rgb), .72);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	clip-path: inset(0 0 100% 0);
	opacity: 0;
	visibility: hidden;
	transition:
		clip-path .52s cubic-bezier(.32, .72, 0, 1),
		opacity .3s ease,
		visibility 0s linear .52s;
	z-index: 99; /* below the header (100) so the nav still paints over */
}
.eekad-nav__mega-panel.is-open {
	clip-path: inset(0 0 0 0);
	opacity: 1;
	visibility: visible;
	transition:
		clip-path .52s cubic-bezier(.32, .72, 0, 1),
		opacity .25s ease-out,
		visibility 0s;
}
/* While the mega is open, force a matching opaque-ish bg on the header
   even on transparent-header pages, so the nav and panel read as one
   continuous surface (no boundary line). Higher specificity than the
   .is-scrolled rule so it wins regardless of scroll position. */
body.has-mega-open .eekad-site-header {
	background: var(--c-bg-surface);
}
body.has-mega-open .eekad-site-header::before {
	display: none;
}
body.has-mega-open .eekad-nav__mega-panel {
	background: var(--c-bg-surface);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.eekad-nav__mega-grid {
	max-width: 1280px;
	margin-inline: auto;
	padding: 56px 48px 64px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	column-gap: 40px;
	align-items: start;
}
.eekad-nav__mega-categories {
	max-width: 1280px;
	margin-inline: auto;
	padding: 40px 48px 48px;
}
.eekad-nav__mega-balanced-rows {
	display: grid;
	gap: 16px;
}
.eekad-nav__mega-grid--categories,
.eekad-nav__mega-standalones {
	--mega-row-columns: 4;
	display: grid;
	grid-template-columns: repeat(var(--mega-row-columns), minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}
.eekad-nav__mega-grid--cols-1 { --mega-row-columns: 1; }
.eekad-nav__mega-grid--cols-2 { --mega-row-columns: 2; }
.eekad-nav__mega-grid--cols-3 { --mega-row-columns: 3; }
.eekad-nav__mega-grid--cols-4 { --mega-row-columns: 4; }
.eekad-nav__mega-balanced-rows--groups {
	margin-block-start: 16px;
}
.eekad-nav__mega-grid--cards {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	padding-block: 40px 48px;
}
.eekad-nav__mega-grid--cards-three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px) {
	.eekad-nav__mega-grid {
		grid-template-columns: repeat(3, 1fr);
		padding: 48px 32px 56px;
		column-gap: 32px;
		row-gap: 32px;
	}
	.eekad-nav__mega-grid--categories {
		gap: 14px;
	}
	.eekad-nav__mega-balanced-rows {
		gap: 14px;
	}
	.eekad-nav__mega-grid--cols-4 {
		--mega-row-columns: 2;
	}
	.eekad-nav__mega-categories {
		padding: 32px 32px 40px;
	}
	.eekad-nav__mega-standalones {
		gap: 14px;
	}
	.eekad-nav__mega-balanced-rows--groups {
		margin-block-start: 14px;
	}
	.eekad-nav__mega-grid--cards {
		gap: 14px;
	}
	.eekad-nav__mega-col--category {
		min-height: 130px;
		padding: 24px 26px 26px;
	}
	.eekad-nav__mega-standalone,
	.eekad-nav__mega-card {
		min-height: 76px;
		padding: 18px 24px;
	}
}
.eekad-nav__mega-col {
	display: flex;
	flex-direction: column;
	text-align: start; /* RTL: hugs the right edge of each column */
	min-width: 0;
}
/* Card lattice: every top-level entry is a bounded card. A card
   containing a list has sections; a title-only card is a single
   destination — the boundary itself explains the hierarchy. */
.eekad-nav__mega-col--category,
.eekad-nav__mega-standalone,
.eekad-nav__mega-card {
	background: rgba(var(--c-border-rgb), .05);
	border: 1px solid rgba(var(--c-border-rgb), .12);
	border-radius: 0;
	transition: background .2s ease, border-color .2s ease;
}
.eekad-nav__mega-col--category {
	position: relative;
	min-height: 150px;
	padding: 28px 30px 30px;
}
.eekad-nav__mega-col--category:hover,
a.eekad-nav__mega-standalone:hover,
.eekad-nav__mega-card:hover {
	background: rgba(var(--c-border-rgb), .075);
	border-color: rgba(var(--c-border-rgb), .18);
}
.eekad-nav__mega-card {
	min-height: 88px;
	padding: 22px 30px;
	display: flex;
	align-items: center;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-text);
	text-align: start;
}
.eekad-nav__mega-card:hover {
	color: var(--c-lime);
}
.eekad-nav__mega-standalone {
	min-height: 88px;
	padding: 22px 30px;
	display: flex;
	align-items: center;
	justify-content: flex-start; /* the قريباً chip hugs its label */
	gap: 12px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--c-text);
	text-align: start;
}
a.eekad-nav__mega-standalone:hover {
	color: var(--c-lime);
}
.eekad-nav__mega-standalone.is-disabled {
	color: var(--c-text-muted);
	cursor: default;
}
.eekad-nav__mega-standalone small,
.eekad-mobile-nav__coming-soon small {
	flex-shrink: 0;
	padding: 3px 8px;
	border: 1px solid rgba(205, 254, 100, .22);
	border-radius: 0;
	background: rgba(205, 254, 100, .06);
	color: var(--c-lime);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
}
.eekad-nav__mega-col--category > a.eekad-nav__mega-head::after {
	content: "";
	position: absolute;
	inset: 0;
	cursor: pointer;
}
.eekad-nav__mega-col--category:hover > a.eekad-nav__mega-head {
	color: var(--c-lime);
}
.eekad-nav__mega-col--category:has(.eekad-nav__mega-sub a:hover) > a.eekad-nav__mega-head {
	color: var(--c-text);
}
.eekad-nav__mega-head {
	display: block;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--c-text);
	margin-block-end: 16px;
}
a.eekad-nav__mega-head {
	transition: color .15s ease;
}
a.eekad-nav__mega-head:hover {
	color: var(--c-lime);
}
.eekad-nav__mega-grid--categories .eekad-nav__mega-head {
	margin-block-end: 18px;
}
.eekad-nav__mega-col--category > .eekad-nav__mega-head:last-child {
	margin-block-end: 0;
}
.eekad-nav__mega-sub {
	--mega-child-indent: 24px;
	--mega-item-height: 34px;
	--mega-rail-x: 5px;
	--mega-dot-size: 7px;
	list-style: none;
	margin: 0;
	padding: 0;
	padding-inline-start: var(--mega-child-indent);
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: relative;
}
.eekad-nav__mega-sub::before {
	content: "";
	position: absolute;
	inset-inline-start: var(--mega-rail-x);
	top: 17px;
	bottom: 17px;
	width: 1px;
	background: rgba(var(--c-border-rgb), .24);
}
.eekad-nav__mega-sub li {
	position: relative;
	min-height: var(--mega-item-height);
	display: flex;
	align-items: center;
}
.eekad-nav__mega-sub a {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: fit-content;
	min-height: 34px;
	padding: 5px 10px;
	font-size: 15px;
	font-weight: 400;
	color: var(--c-text-2);
	line-height: 1.4;
	border-radius: 0;
	transition: background .15s ease, color .15s ease;
}
.eekad-nav__mega-sub li::before {
	content: "";
	position: absolute;
	inset-inline-start: -22px;
	top: calc(50% - 3.5px);
	width: var(--mega-dot-size);
	height: var(--mega-dot-size);
	border-radius: 999px;
	background: rgba(var(--c-border-rgb), .52);
	border: 0;
	z-index: 1;
}
.eekad-nav__mega-sub a:hover {
	background: rgba(var(--c-border-rgb), .06);
	color: var(--c-text);
}
.eekad-nav__mega-sub li:hover::before {
	background: var(--c-lime);
	border-color: var(--c-lime);
}
.eekad-nav__mega-grid--categories .eekad-nav__mega-sub {
	gap: 6px;
	z-index: 1;
}
.eekad-nav__mega-grid--categories .eekad-nav__mega-sub a {
	min-height: 30px;
	padding: 4px 0;
	color: var(--c-text-muted);
}
.eekad-nav__mega-grid--categories .eekad-nav__mega-sub a:hover {
	background: transparent;
	color: var(--c-lime);
}

/* --- Hamburger button (hidden on desktop) --- */
.eekad-burger {
	display: none;
	position: absolute;
	inset-inline-end: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	background: none;
	border: none;
	color: var(--c-text);
	align-items: center;
	justify-content: center;
	z-index: 101;
	padding: 0;
}
.eekad-burger svg { width: 24px; height: 24px; display: block; }
.eekad-burger.is-active line:nth-child(1) { transform: translateY(6px) rotate(45deg); transform-origin: center; }
.eekad-burger.is-active line:nth-child(2) { opacity: 0; }
.eekad-burger.is-active line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); transform-origin: center; }
.eekad-burger line { transition: transform .25s ease, opacity .2s ease; }
/* Scroll lock for the mobile menu — touch-action approach, no
   position:fixed body trick. `touch-action: none` on body blocks the
   underlying page from scrolling on iOS; the menu's scrollable
   panels opt back in with `touch-action: pan-y` (set further down).
   `overflow: hidden` suppresses the desktop scrollbar. Body stays
   in normal flow so safe-area zones paint correctly. */
body.menu-open {
	overflow: hidden;
	touch-action: none;
}

/* --- Fullscreen mobile menu overlay --- */
/* A plain fullscreen modal. Hidden until .is-open. No transition by
   design — every animation we tried (opacity fade, slide-up) exposed
   the page beneath mid-animation, and Safari's URL-bar backdrop blur
   sampled the colour shift as a flash. Snap show / snap hide. */
.eekad-mobile-menu {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--c-bg-surface);
	flex-direction: column;
	overflow: hidden;
	padding-inline: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
}
.eekad-mobile-menu.is-open { display: flex; }

/* When the menu is on a deeper page (e.g. الأقسام), the social
   footer of the root page should disappear so the subpage owns the
   screen. JS sets `is-on-subpage` on push, drops it on pop/close. */
.eekad-mobile-menu.is-on-subpage .eekad-mobile-menu__footer {
	display: none;
}

/* Floating UI (TOC, verify FAB, investigation action dock with the
   network + attachments buttons, standalone network FAB) sits above
   the mobile menu by default. Hide them while the menu is open so
   they don't punch through the overlay. */
body.menu-open .eekad-toc,
body.menu-open .eekad-verify-fab,
body.menu-open .eekad-action-dock,
body.menu-open .eekad-network-fab {
	display: none !important;
}

.eekad-mobile-menu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* env() pushes the row below the notch/dynamic island when
	   viewport-fit=cover is enabled, falls back cleanly to 0 elsewhere. */
	padding: calc(20px + env(safe-area-inset-top)) 0 20px;
	flex-shrink: 0;
	gap: 12px;
}
.eekad-mobile-menu__logo svg {
	width: 48px;
	height: auto;
	color: var(--c-text);
}
.eekad-mobile-menu__close,
.eekad-mobile-menu__back {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: var(--c-text);
	cursor: pointer;
	padding: 0;
}
.eekad-mobile-menu__close svg,
.eekad-mobile-menu__back svg { width: 24px; height: 24px; }
.eekad-mobile-menu__back { margin-inline-end: auto; }
.eekad-mobile-menu__back[hidden] { display: none; }
/* When on a subpage, hide the logo so the back chevron sits where the
   logo was (Apple pattern: leading-edge back arrow, trailing-edge X). */
.eekad-mobile-menu.is-on-subpage .eekad-mobile-menu__logo { display: none; }

/* Nav viewport — clips the off-screen panels. Each panel is positioned
   absolutely so the viewport size stays stable while panels slide. */
.eekad-mobile-menu__nav {
	flex: 1;
	display: flex;
	min-height: 0;
}
.eekad-mobile-menu__viewport {
	position: relative;
	flex: 1;
	overflow: hidden;
}
.eekad-mobile-nav__page {
	list-style: none;
	margin: 0;
	padding: 16px 0 16px;
	position: absolute;
	inset: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Re-enable vertical pan inside the menu's scroll surface — body
	   has touch-action: none while the menu is open. */
	touch-action: pan-y;
	/* Default: parked on the trailing edge (visual left in RTL) — this is
	   where unvisited "future" pages and just-popped pages live. */
	transform: translateX(-100%);
	transition: transform .42s cubic-bezier(.32, .72, 0, 1);
	-webkit-overflow-scrolling: touch;
}
.eekad-mobile-nav__page.is-active {
	transform: translateX(0);
}
/* Pages we've pushed past — parked on the leading edge (visual right in RTL).
   Pop animation slides them back into view. */
.eekad-mobile-nav__page.is-prev {
	transform: translateX(100%);
}

.eekad-mobile-nav__page > li {
	border-bottom: 1px solid rgba(var(--c-border-rgb), .06);
}
.eekad-mobile-nav__page > li > a,
.eekad-mobile-nav__page > li > .eekad-mobile-nav__push,
.eekad-mobile-nav__page > li > .eekad-mobile-nav__coming-soon {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	font-size: 22px;
	font-weight: 500;
	color: var(--c-text);
	padding: 18px 0;
	text-decoration: none;
	min-height: 60px;
	background: none;
	border: 0;
	font-family: inherit;
	text-align: inherit;
	cursor: pointer;
}
.eekad-mobile-nav__page > li > .eekad-mobile-nav__coming-soon {
	color: var(--c-text-muted);
	cursor: default;
}
/* Push-button chevron — points in the "forward" direction.
   In RTL, forward = visual left, so we render a left-pointing arrow. */
.eekad-mobile-nav__page > li > .eekad-mobile-nav__push::after {
	content: '';
	width: 10px;
	height: 10px;
	border-top: 2px solid var(--c-text-muted);
	border-left: 2px solid var(--c-text-muted);
	transform: rotate(-45deg);
	flex-shrink: 0;
	margin-inline-start: 12px;
}

/* Subpage row — the entire row toggles the inline expand. The category
   title is an inline-block link inside the row that hugs its own text,
   so a tap precisely on the text navigates to the category archive
   while a tap on the chevron / surrounding gutter just toggles. */
.eekad-mobile-nav__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 18px 0;
	min-height: 60px;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.eekad-mobile-nav__row:focus-visible {
	outline: 2px solid var(--c-lime);
	outline-offset: -2px;
}
.eekad-mobile-nav__title {
	display: inline-block;
	font-size: 22px;
	font-weight: 500;
	color: var(--c-text);
	text-decoration: none;
	padding: 4px 2px;
	cursor: pointer;
}
.eekad-mobile-nav__chev {
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--c-text-muted);
	border-bottom: 2px solid var(--c-text-muted);
	transform: rotate(45deg);
	transition: transform .25s ease;
	display: inline-block;
	flex-shrink: 0;
	margin-inline-end: 16px;
}
li.is-expanded > .eekad-mobile-nav__row .eekad-mobile-nav__chev {
	transform: rotate(-135deg);
}

/* Inline sub-items — sub-categories revealed when the parent is expanded. */
.eekad-mobile-nav__sub {
	list-style: none;
	margin: 0;
	padding: 0 0 12px;
	display: none;
}
li.is-expanded > .eekad-mobile-nav__sub {
	display: block;
}
.eekad-mobile-nav__sub li {
	border: 0;
}
.eekad-mobile-nav__sub a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	font-size: 15px;
	color: var(--c-text-3);
	text-decoration: none;
	min-height: 40px;
	transition: color .15s ease;
}
.eekad-mobile-nav__sub a:hover { color: var(--c-text); }
.eekad-mobile-nav__sub a::after {
	content: '↗';
	font-size: 14px;
	color: var(--c-text-muted);
	margin-inline-start: 8px;
}

/* Database entry — rendered as a plain nav item to match the list rhythm */
/* Footer social links — icon squares matching the desktop site footer
   so the visual language stays consistent between surfaces. */
.eekad-mobile-menu__footer {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 12px;
	/* Bottom inset so the row sits above the home indicator on iOS. */
	padding: 24px 0 calc(32px + env(safe-area-inset-bottom));
	margin: auto 0 0;
	flex-shrink: 0;
}
.eekad-mobile-menu__footer a {
	display: inline-flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(var(--c-border-rgb), .18);
	color: var(--c-text-2);
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.eekad-mobile-menu__footer a:hover {
	background: var(--c-lime);
	border-color: var(--c-lime);
	color: var(--c-text-on-accent);
}
.eekad-mobile-menu__footer svg {
	width: 18px;
	height: 18px;
}

@media (max-width: 768px) {
	.eekad-burger { display: inline-flex; }
	.eekad-site-header__nav .eekad-nav { display: none; }
	.eekad-nav__mega-panel,
	.eekad-nav__mega-backdrop { display: none !important; }
	.eekad-site-header__cta { display: none; }
	.eekad-site-header__inner {
		padding-inline: 16px;
	}
	:root { --eekad-header-h: 56px; }
	.eekad-site-header__logo { inset-inline-start: 16px; }
	.eekad-site-header__logo svg { width: 48px; }
}

@media (max-width: 480px) {
	:root { --eekad-header-h: 48px; }
	.eekad-site-header__logo svg { width: 40px; }
}

/* Hide mobile menu on desktop */
@media (min-width: 769px) {
	.eekad-mobile-menu { display: none !important; }
}
/* =============================================================
 * Reusable atoms
 * =========================================================== */

/* ----- Pill / badge ----- */
.eekad-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	border-radius: 0;
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1;
}
.eekad-pill--lime {
	background: var(--c-lime);
	color: var(--c-text-on-accent);
}

/* ----- Select / dropdown ----- */
.eekad-select-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.eekad-select {
	appearance: none;
	-webkit-appearance: none;
	background: var(--c-bg-surface);
	border: 1px solid rgba(var(--c-border-rgb), .08);
	color: var(--c-text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	padding: 10px 16px;
	padding-inline-end: 40px;
	cursor: pointer;
	transition: border-color .2s;
	min-width: 160px;
}
.eekad-select:hover { border-color: rgba(var(--c-border-rgb), .15); }
.eekad-select:focus { outline: none; border-color: var(--c-lime, #CDFE64); }
.eekad-select option { background: var(--c-bg-surface); color: var(--c-text); }
.eekad-select__arrow {
	position: absolute;
	inset-inline-end: 12px;
	width: 16px;
	height: 16px;
	color: var(--c-text-faint);
	pointer-events: none;
}

/* ----- Buttons ----- */
.eekad-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 0;
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.eekad-btn--primary {
	background: var(--c-lime);
	color: var(--c-text-on-accent);
}
.eekad-btn--primary:hover {
	background: var(--c-white);
	transform: translateY(-1px);
}
.eekad-btn--ghost {
	background: transparent;
	color: var(--c-text);
	border-color: rgba(var(--c-border-rgb), .35);
}
.eekad-btn--ghost:hover {
	border-color: var(--c-lime);
	color: var(--c-lime);
}

/* =============================================================
 * Homepage — shared section styling (all sections except hero)
 * =========================================================== */
.eekad-news,
.eekad-verify,
.eekad-picks,
.eekad-home-db,
.eekad-tv,
.eekad-categories {
	border-top: 1px solid rgba(var(--c-border-rgb), .08);
}

/* =============================================================
 * Homepage — Hero ("أبرز الملفات" featured-file dossier)
 * =========================================================== */
.eekad-hero-pin {
	position: relative;
}
.eekad-hero {
	position: relative;
	height: 100vh;
	display: flex;
	flex-direction: column;
	color: var(--c-text);
	padding-block-start: 208px; /* 80px header + 128px top padding per Figma */
	padding-block-end: 48px;
	overflow: hidden;
	isolation: isolate;
}
.eekad-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.eekad-hero__media-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transition: opacity .9s ease;
}
.eekad-hero__media-img.is-active {
	opacity: 1;
	/* Ken Burns: very slow zoom + drift while the image is active.
	   Restarts each time the class is re-added (on slide change). */
	animation: eekad-hero-kenburns 22s ease-out both;
}
@keyframes eekad-hero-kenburns {
	0%   { transform: scale(1)    translate3d(0, 0, 0); }
	100% { transform: scale(1.06) translate3d(-1.5%, -1%, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.eekad-hero__media-img.is-active { animation: none; }
}
.eekad-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(var(--c-bg-elevated-rgb), .15) 0%, rgba(var(--c-bg-elevated-rgb), .08) 35%, rgba(var(--c-bg-elevated-rgb), .62) 100%);
}

/* ----- Content stack ----- */
.eekad-hero__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0;
	padding-block: 0;
	position: relative;
}

/* ----- Indigo content card -----
   SVG viewBox 1216×240. Shape: M1216 240H8V34H1051.88V0H1216V240Z
   — rectangle from (8,34) to (1216,240) with raised step at top-right
     (1051.88,0)→(1216,34). All child elements absolutely positioned
     using exact Figma coordinates as percentages of 1216×240. */
.eekad-hero__card {
	position: relative;
	height: 200px;
	margin-block-end: 32px; /* gap to tab strip */
}
/* Tabs sit flush at the hero's very bottom edge */
.eekad-hero__tabs {
	flex-shrink: 0;
}
.eekad-hero__card-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}
/* Text block — Figma: content flex at (27,70) in 1208×240 card;
   text starts after CTA(123)+gap(164)=314 → SVG x=322, y=70. */
.eekad-hero__card-text {
	position: absolute;
	z-index: 1;
	left: calc(170 / 1216 * 100%);
	top: calc(46 / 240 * 100%);
	right: calc(104 / 1216 * 100%); /* 16px gap before the arrow */
	color: var(--c-text);
	text-align: right;
}
.eekad-hero__card-file {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	color: var(--c-text);
	background: transparent;
	border: 1px solid rgba(var(--c-border-rgb), .5);
	padding: 4px 12px;
	margin-bottom: 10px;
	transition: border-color .15s ease, background .15s ease;
	position: relative;
	z-index: 2;
}
.eekad-hero__card-file:hover {
	border-color: var(--c-text);
	background: rgba(var(--c-border-rgb), .1);
}
/* Somaya inks well past its line box at these tight display line-heights:
   measured worst case is 1.05em above the baseline and 0.50em below,
   while line-height 1.22 only affords 0.89em / 0.33em. With overflow
   hidden (needed for the clamp) that shears the raised marks off line 1
   — the swash over في, hamza stacks — and the descender dots off the
   last line. The padding opens clip room on both sides; the matching
   negative margins cancel it out of the layout, so the type sits exactly
   where it did and only the invisible clip box grew. */
.eekad-hero__title {
	--title-ink-top: .24em;
	--title-ink-bottom: .24em;
	--hero-title-size: clamp(22px, 2.4vw, 34px);
	/* --hero-title-fit is set by the hero script: the shrink factor that
	   keeps a long title inside two lines. Defaults to 1 without JS. */
	font-size: calc(var(--hero-title-size) * var(--hero-title-fit, 1));
	font-weight: 500;
	line-height: var(--lh-title);
	margin: 0;
	padding-block: var(--title-ink-top) var(--title-ink-bottom);
	margin-block: calc(-1 * var(--title-ink-top)) calc(-1 * var(--title-ink-bottom));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.eekad-hero__title a {
	color: inherit;
	transition: opacity .15s ease;
}
.eekad-hero__title a:hover { opacity: .82; }
.eekad-hero__excerpt {
	font-size: clamp(15px, 1.4vw, 20px);
	font-weight: 300;
	line-height: 1.5;
	color: var(--c-text);
	margin: 8px 0 0;
	opacity: .85;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* CTA button — 123×48 at (35, 70) in the Figma SVG. */
.eekad-hero__cta {
	position: absolute;
	z-index: 2;
	inset-inline-end: 20px;
	top: calc(34 / 240 * 100% + 20px);
	width: calc(123 / 1216 * 100%);
	min-width: 100px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	background: var(--c-lime);
	color: var(--c-text-on-accent);
	font-size: var(--fs-base);
	font-weight: 500;
	line-height: 24px;
	white-space: nowrap;
	transition: background .15s ease, transform .15s ease;
}
.eekad-hero__cta:hover {
	background: #CDFE64;
	transform: translateY(-1px);
}
/* Expand arrow — Figma: 25×25 at (1120,52) in card. */
.eekad-hero__card-expand {
	position: absolute;
	z-index: 2;
	left: calc(1128 / 1216 * 100%);
	top: calc(52 / 240 * 100%);
	width: 25px;
	height: 25px;
	color: var(--c-lime);
	transition: opacity .15s ease;
}
.eekad-hero__card-expand:hover { opacity: .7; }
.eekad-hero__card-expand svg { width: 100%; height: 100%; display: block; }

/* ----- Tab strip -----
   Rail + draggable reel. The rail is a single continuous line at the
   vertical center of the strip; the reel holds the tab boxes. Only
   the reel transforms on drag, so the rail reads as a stable track
   and the boxes slide along it. */
.eekad-hero__tabs {
	position: relative;
	height: 57px;
	flex-shrink: 0;
	width: 100vw;
	margin-inline-start: calc(50% - 50vw);
	overflow: hidden;
}
/* Rail is an empty container now — JS paints line segments into it
   that sit in the gaps between boxes, so the track reads as continuous
   across the viewport while the boxes stay fully transparent. */
.eekad-hero__tab-rail {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	margin-top: -.5px;
	pointer-events: none;
	z-index: 1;
}
.eekad-hero__tab-rail-seg {
	position: absolute;
	top: 0;
	height: 1px;
	background: var(--c-white);
}
.eekad-hero__tab-reel {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: stretch;
	height: 100%;
	gap: 40px;
	/* Lead/tail padding mirrors the old --lead/--tail line sizing so
	   the resting position of the boxes stays exactly where it was. */
	padding-inline-start: calc((100vw - var(--container)) / 2 + var(--container-px));
	padding-inline-end: 40px;
	cursor: grab;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	will-change: transform;
}
.eekad-hero__tab-reel.is-dragging {
	cursor: grabbing;
}
@media (prefers-reduced-motion: reduce) {
	.eekad-hero__tab-reel { transform: none !important; }
}
.eekad-hero__tab {
	flex: none;
	display: block;
	position: relative;
	line-height: 55px;
	padding: 0 16px;
	font-size: var(--fs-sm);
	font-weight: 500;
	text-align: center;
	white-space: nowrap;
	color: var(--c-text);
	background: transparent;
	border: 1px solid var(--c-white);
	box-sizing: border-box;
	transition: background .15s ease, color .15s ease;
}
.eekad-hero__tab-file {
	font-size: 10px;
	font-weight: 700;
	color: #cdfe64;
	vertical-align: middle;
	margin-inline-end: 4px;
}
.eekad-hero__tab.is-active .eekad-hero__tab-file {
	color: var(--c-text-on-accent);
	background: #cdfe64;
	padding: 2px 8px;
}
/* Single label per tab. The span holds the full title; its visible
   width is clamped by max-width to the "short" measurement, with
   ellipsis hiding the overflow. Hovering opens the clamp to the
   pre-measured "full" width, so the text reveals by growing the
   visible window — no cross-fade, no bulge, no bounce. */
.eekad-hero__tab-label {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	vertical-align: middle;
	max-width: var(--label-short, 160px);
	transition: max-width .7s cubic-bezier(.4, 0, .2, 1);
	transition-delay: 0ms;
}
.eekad-hero__tab:hover {
	background: rgba(var(--c-border-rgb), .08);
}
/* Hover uses a short delay to ignore drive-by mouse-overs. */
.eekad-hero__tab:hover .eekad-hero__tab-label {
	max-width: var(--label-full, 720px);
	transition-delay: 220ms;
}
/* Active and keyboard-focused tabs expand immediately — they've
   been intentionally picked, no delay needed. The active tab also
   starts expanded on page load since it's selected by default. */
.eekad-hero__tab.is-active .eekad-hero__tab-label,
.eekad-hero__tab:focus-visible .eekad-hero__tab-label {
	max-width: var(--label-full, 720px);
	transition-delay: 0ms;
}
.eekad-hero__tab.is-active {
	background: var(--c-white);
	color: var(--c-text-on-accent);
	border-color: var(--c-white);
}

/* ----- Hero responsive -----
   Mobile hero is a cinematic story layout: full-bleed image, dark
   gradient at the bottom, content overlaid directly on the image
   (no indigo card), and the tab reel transformed into thin story-
   style progress bars at the top. Swipe left/right changes slides;
   tapping a progress bar jumps to that slide. */
@media (max-width: 768px) {
	.eekad-hero {
		padding-block-start: 120px;
		padding-block-end: 32px;
		/* Tell the browser to only pan vertically — horizontal touch
		   gestures are reserved for our swipe handler so the page won't
		   commit to a scroll mid-gesture. */
		touch-action: pan-y;
	}
	/* Let the absolute tab bars position relative to the hero itself,
	   not the content container. Dropping the content's positioning
	   context walks the ancestor chain up to .eekad-hero (sticky). */
	.eekad-hero__content { position: static; }
	/* Overlay darkens the bottom third so large white text reads
	   cleanly over any image. */
	.eekad-hero__overlay {
		background: linear-gradient(180deg,
			rgba(0, 0, 0, 0)   0%,
			rgba(0, 0, 0, .05) 40%,
			rgba(0, 0, 0, .72) 78%,
			rgba(0, 0, 0, .92) 100%);
	}

	/* Card becomes a frameless wrapper; no fill, no box shadow, no
	   stepped SVG. Content sits directly on the overlay gradient.
	   Horizontal padding moves to card-text (and the CTA's own
	   margin) so the padding is applied uniformly whether there's
	   one flex child or two. */
	.eekad-hero__card {
		height: auto;
		margin: 0;
		padding: 0;
		background: transparent;
		box-shadow: none;
		display: flex;
		flex-direction: column;
	}
	.eekad-hero__card-bg { display: none; }
	.eekad-hero__card-expand { display: none; }
	.eekad-hero__card-text {
		position: relative;
		left: auto;
		top: auto;
		right: auto;
		width: 100%;
		max-width: 100%;
		padding: 0 24px 14px;
		order: 1;
	}
	.eekad-hero__title {
		white-space: normal;
		--hero-title-size: clamp(22px, 6.4vw, 30px);
		line-height: var(--lh-title);
		font-weight: 700;
		color: var(--c-text);
		text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		/* Reserve exactly two lines of height regardless of title
		   length, so short titles don't cause the bars above to jump
		   up and long titles don't push them down between slides. */
		min-height: 2.4em; /* 2 × 1.2 line-height */
	}
	.eekad-hero__excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		/* Belt and braces: explicit width cap + word-break so any
		   rogue long string can't push the line past the container
		   and hit the viewport edge. */
		width: 100%;
		max-width: 100%;
		overflow-wrap: break-word;
		word-break: break-word;
		font-size: 13.5px;
		line-height: 1.6;
		color: var(--c-text);
		text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
		/* Reserve exactly two lines so the stack height stays
		   constant across slides. */
		min-height: 3.2em; /* 2 × 1.6 line-height */
	}
	.eekad-hero__cta {
		position: relative;
		inset-inline-end: auto;
		top: auto;
		width: auto;
		margin: 6px 24px 0;
		padding: 14px 24px;
		display: inline-flex;
		align-self: flex-start;
		order: 2;
		background: var(--c-lime);
		color: var(--c-text-on-accent);
		font-weight: 700;
		font-size: 14px;
		border: 0;
	}

	/* Tab reel → story-style progress bars sitting just above the
	   title. Placing them in the content flex flow with order: -1
	   anchors them to the card instead of leaving them floating in
	   the middle of the image — they read as "pagination for this
	   content", not a free-standing element.
	   Width/margin reset: desktop uses a 100vw full-bleed trick
	   (width:100vw + negative margin-inline-start). Explicitly
	   neutralising both so the bars stay inside the content flow
	   with symmetric side padding. */
	.eekad-hero__tabs {
		position: static;
		top: auto;
		left: auto;
		right: auto;
		order: -1;
		height: 3px;
		width: auto;
		margin-inline-start: 24px;
		margin-inline-end: 24px;
		margin-block: 0 22px;
		overflow: visible;
		z-index: 3;
	}
	.eekad-hero__tab-rail { display: none; }
	.eekad-hero__tab-reel {
		display: flex;
		gap: 4px;
		padding: 0;
		width: 100%;
		transform: none !important;
	}
	.eekad-hero__tab {
		flex: 1 1 0;
		min-width: 0; /* let many tabs shrink below their natural size */
		height: 3px;
		padding: 0;
		background: rgba(var(--c-border-rgb), .25);
		border: 0;
		color: transparent;
		font-size: 0;
		line-height: 0;
		transition: background .25s ease;
	}
	.eekad-hero__tab:hover,
	.eekad-hero__tab.is-active {
		background: var(--c-text);
		border: 0;
	}
	.eekad-hero__tab-label { display: none; }
	.eekad-hero__tab-file { display: none; }

	/* Kill rail/segment leftovers on mobile — bars replace them. */
	.eekad-hero__tab-rail-seg { display: none; }
}
@media (max-width: 480px) {
	.eekad-hero { padding-block-start: 100px; }
	.eekad-hero__title { --hero-title-size: clamp(20px, 6vw, 26px); }
	.eekad-hero__excerpt { font-size: 13px; -webkit-line-clamp: 2; }
	.eekad-hero__card-text { padding: 0 20px 12px; }
	.eekad-hero__cta { margin: 6px 20px 0; }
	.eekad-hero__tabs { margin: 0 20px 20px; }
	/* Keep bars at 3px height — don't let the tighter screen media
	   query re-inherit desktop tab font/padding that would blow them
	   up into full-size chips. */
	.eekad-hero__tab { padding: 0; font-size: 0; line-height: 0; height: 3px; }
}

/* =============================================================
 * Eekad TV Archive — /tv/
 * =========================================================== */
.eekad-tv-archive {
	background: var(--c-bg-base);
}
.eekad-tv-archive__hero {
	position: relative;
	padding-block: clamp(80px, 9vw, 120px) 24px;
	background: transparent; /* one deep canvas — no hero band */
	overflow: hidden;
}
.eekad-tv-archive__label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0; /* Arabic — never tracked */
	color: var(--c-text-2);
	margin-block-end: 16px;
}
.eekad-tv-archive__title {
	font-size: clamp(44px, 5vw, 64px);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 16px;
	color: var(--c-text);
}
.eekad-tv-archive__logo {
	display: block;
	height: clamp(48px, 7vw, 80px);
	width: auto;
}
.eekad-tv-archive__desc {
	font-size: 17px;
	color: var(--c-text-3);
	max-width: 640px;
	margin: 0 0 20px;
	line-height: 1.7;
}
.eekad-tv-archive__count {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--c-text-muted);
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
}

/* Filter pills — matches /news/ style */
.eekad-tv-archive__filters {
	padding-block: 24px;
	margin-block-end: 16px;
}
/* Search + series dropdown toolbar */
.eekad-tv-archive__toolbar {
	display: flex;
	align-items: stretch;
	gap: 0;
	max-width: 480px;
	margin-block-end: 20px;
}
.eekad-tv-archive__search {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--glass-bg);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	padding: 10px 16px;
	transition: border-color .2s;
}
.eekad-tv-archive__search:focus-within {
	border-color: var(--c-lime, #CDFE64);
}
.eekad-tv-archive__search svg {
	width: 18px;
	height: 18px;
	color: var(--c-text-faint);
	flex-shrink: 0;
}
.eekad-tv-archive__search input[type="text"] {
	background: none;
	border: none;
	color: var(--c-text);
	font-size: 14px;
	font-family: inherit;
	outline: none;
	width: 100%;
	min-width: 0;
	padding: 0;
}
.eekad-tv-archive__search input[type="text"]::placeholder {
	color: var(--c-text-faint);
}
@media (max-width: 768px) {
	.eekad-tv-archive__toolbar { max-width: none; }
	.eekad-tv-archive__search { width: 100%; min-width: 0; }
}

/* Pills */
.eekad-tv-archive__pills {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.eekad-tv-archive__pills::-webkit-scrollbar { display: none; }
.eekad-tv-archive__pill {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--c-text-2);
	background: var(--glass-bg);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s, color .2s, border-color .2s;
}
.eekad-tv-archive__pill:hover {
	background: var(--glass-bg-hover);
	color: var(--c-text);
}
.eekad-tv-archive__pill.is-active {
	background: var(--c-text);
	color: var(--c-bg-base);
	border-color: var(--c-text);
}

/* Search results (flat grid) */
.eekad-tv-archive__search-results {
	margin-block-end: 48px;
}

/* Featured */
/* --- Playlist layout (series page) --- */
.eekad-playlist {
	margin-block: 32px 0;
	padding-block-end: 80px;
}
.eekad-playlist__layout {
	display: grid;
	grid-template-columns: 380px 1fr;
	grid-template-rows: auto;
	gap: 20px;
}

/* Player */
.eekad-playlist__main {
	min-width: 0;
	background: var(--c-bg-surface);
	border: 1px solid rgba(var(--c-border-rgb), .06);
}
.eekad-playlist__player {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
	cursor: pointer;
}
.eekad-playlist__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter .3s;
}
.eekad-playlist__player:hover .eekad-playlist__poster {
	filter: brightness(.7);
}
.eekad-playlist__play-btn {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}
.eekad-playlist__play-circle {
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .92);
	border: 0;
	transition: transform .3s ease;
}
.eekad-playlist__play-btn:hover .eekad-playlist__play-circle {
	transform: scale(1.12);
}
.eekad-playlist__play-circle svg {
	width: 28px;
	height: 28px;
	color: var(--c-text-on-accent);
}
.eekad-playlist__player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Video info */
.eekad-playlist__info {
	padding: 20px 24px 24px;
}
.eekad-playlist__title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 12px;
	color: var(--c-text);
}
.eekad-playlist__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: var(--c-text-muted);
}
.eekad-playlist__date {
	font-family: var(--font-mono);
	letter-spacing: .02em;
}
.eekad-playlist__sep {
	width: 1px;
	height: 14px;
	background: rgba(var(--c-border-rgb), .15);
}
.eekad-playlist__series {
	color: var(--c-text-muted);
	font-weight: 600;
}
.eekad-playlist__permalink {
	color: var(--c-text-muted);
	text-decoration: none;
	transition: color .2s;
}
.eekad-playlist__permalink:hover { color: var(--c-lime); }

/* Sidebar */
.eekad-playlist__sidebar {
	display: flex;
	flex-direction: column;
	background: var(--c-bg-surface);
	border: 1px solid rgba(var(--c-border-rgb), .06);
	height: min(680px, 80vh);
	align-self: start;
}
.eekad-playlist__sidebar-header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background: rgba(var(--c-border-rgb), .03);
	border-block-end: 1px solid rgba(var(--c-border-rgb), .06);
}
.eekad-playlist__sidebar-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--c-text);
}
.eekad-playlist__sidebar-count {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--c-text-muted);
}
.eekad-playlist__list {
	flex: 1;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--c-border-rgb), .12) transparent;
}
.eekad-playlist__list::-webkit-scrollbar { width: 4px; }
.eekad-playlist__list::-webkit-scrollbar-track { background: transparent; }
.eekad-playlist__list::-webkit-scrollbar-thumb { background: rgba(var(--c-border-rgb), .12); }

/* Playlist item */
.eekad-playlist__item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 16px;
	background: none;
	border: none;
	border-block-end: 1px solid rgba(var(--c-border-rgb), .04);
	cursor: pointer;
	text-align: start;
	transition: background .2s;
	color: var(--c-text);
}
.eekad-playlist__item:hover {
	background: rgba(var(--c-border-rgb), .04);
}
.eekad-playlist__item.is-active {
	background: rgba(var(--c-border-rgb), .07);
	box-shadow: inset -3px 0 0 var(--c-text);
}
.eekad-playlist__item-num {
	flex-shrink: 0;
	width: 20px;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--c-text-faint);
	text-align: center;
}
.eekad-playlist__item.is-active .eekad-playlist__item-num {
	color: var(--c-text);
}
.eekad-playlist__item-thumb {
	flex-shrink: 0;
	position: relative;
	width: 100px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
}
.eekad-playlist__item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.eekad-playlist__item-dur {
	position: absolute;
	bottom: 3px;
	right: 3px;
	background: rgba(0, 0, 0, .8);
	color: var(--c-text);
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	padding: 2px 4px;
	line-height: 1;
	direction: ltr;
}
.eekad-playlist__item-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.eekad-playlist__item-title {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.eekad-playlist__item-date {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--c-text-faint);
}

/* Playlist responsive */
@media (max-width: 1024px) {
	.eekad-playlist__layout {
		grid-template-columns: 1fr;
	}
	.eekad-playlist__sidebar {
		max-height: 420px;
		order: 2;
	}
	.eekad-playlist__main {
		order: 1;
	}
}
@media (max-width: 768px) {
	.eekad-playlist__info { padding: 16px; }
	.eekad-playlist__title { font-size: 17px; }
	.eekad-playlist__item-thumb { width: 80px; }
	.eekad-playlist__item-num { display: none; }
}

/* Video grid */
/* =============================================================
 * /tv/ archive — Instagram-style flat 9:16 grid.
 *
 * One contained grid, newest first. The series pills act as
 * client-side filters over the same grid (no reload, no per-
 * series rows). Mobile = 3 cols, desktop = 4 cols, both locked.
 *
 * Cells reveal their title over the thumbnail on hover or keyboard focus.
 * =========================================================== */
.eekad-tv-archive__reels-wrap {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: clamp(8px, 3vw, 48px);
	padding-block-end: 32px;
}

.eekad-tv-archive__reels-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px;
}

@media (min-width: 600px) {
	.eekad-tv-archive__reels-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 3px;
	}
}

.eekad-tv-reel {
	position: relative;
	display: block;
	aspect-ratio: 9 / 16;
	background: var(--c-bg-alt, #000);
	overflow: hidden;
	text-decoration: none;
}

.eekad-tv-reel::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, .05) 40%,
		rgba(0, 0, 0, .72) 78%,
		rgba(0, 0, 0, .92) 100%);
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}

.eekad-tv-reel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.eekad-tv-reel:hover img,
.eekad-tv-reel:focus-visible img {
	transform: scale(1.03);
}

.eekad-tv-reel__title {
	position: absolute;
	z-index: 2;
	inset-inline: clamp(12px, 1.5vw, 20px);
	inset-block-end: clamp(14px, 2vw, 24px);
	color: var(--c-text);
	font-size: clamp(14px, 1.6vw, 22px);
	font-weight: 700;
	line-height: var(--lh-title);
	text-align: start;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .25s ease, transform .25s ease;
	pointer-events: none;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.eekad-tv-reel:hover::after,
.eekad-tv-reel:focus-visible::after,
.eekad-tv-reel:hover .eekad-tv-reel__title,
.eekad-tv-reel:focus-visible .eekad-tv-reel__title {
	opacity: 1;
}

.eekad-tv-reel:hover .eekad-tv-reel__title,
.eekad-tv-reel:focus-visible .eekad-tv-reel__title {
	transform: translateY(0);
}

.eekad-tv-reel:focus-visible {
	outline: 2px solid var(--c-lime);
	outline-offset: 2px;
}

/* The archive owns the footer breathing room. Avoid making the paginator's
 * generic bottom margin look like a separate empty content section. */
.eekad-tv-archive .eekad-tv-archive__pagination {
	margin-block: 40px 0;
}

@media (max-width: 768px) {
	.eekad-tv-archive__hero { padding-block: 80px 28px; }
	.eekad-tv-archive__title { font-size: 32px; }
}

/* =============================================================
 * /tv/ reel modal — IG-style popup over the grid
 *
 * Uses the native <dialog> element so ESC, focus trap, backdrop,
 * and accessibility semantics come from the platform — no
 * polyfills, no portal layer. Click on the dimmed backdrop closes
 * the modal; click on the shell (or anything inside) is ignored.
 * =========================================================== */
.eekad-tv-modal {
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--c-text);
	/* fit-content + inset:0 (from UA) + margin:auto = centered modal sized to
	   the .shell's content. Without these, `width: auto` on a fixed-positioned
	   element stretches to the viewport edges. */
	width: max-content;
	height: max-content;
	max-width: 96vw;
	max-height: 96vh;
	overflow: visible;
}

.eekad-tv-modal::backdrop {
	background: rgba(0, 0, 0, .84); /* blur below is enhancement-only */
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* Let the dialog size to its content (.shell) and center via the browser's
   native modal positioning (margin: auto + inset: 0). No display override. */

body.is-tv-modal-open {
	overflow: hidden;
}

.eekad-tv-modal__shell {
	position: relative;
	display: block;
	background: var(--c-bg-base); /* dossier sheet on the frosted dark */
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
}

.eekad-tv-modal__layout {
	display: flex;
	height: min(92vh, 960px);
	max-width: 96vw;
}

.eekad-tv-modal__player {
	position: relative;
	flex: 0 0 auto;
	aspect-ratio: 9 / 16;
	height: 100%;
	background: #000;
	overflow: hidden;
}

.eekad-tv-modal__player iframe,
.eekad-tv-modal__yt-poster img {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.eekad-tv-modal__yt-poster {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: #fff;
}

.eekad-tv-modal__yt-poster span {
	position: absolute;
	inset-block-end: 16px;
	inset-inline-start: 16px;
	padding: 8px 14px;
	background: rgba(0, 0, 0, .7);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
}

.eekad-tv-modal__panel {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 0 0 420px;
	width: 420px;
	height: 100%;
	padding: 28px 28px 24px;
	overflow-y: auto;
	font-family: var(--font-sans);
	background: var(--c-bg-base);
	border-inline-start: 1px solid var(--glass-edge);
}

.eekad-tv-modal__brand {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0; /* Arabic — never tracked */
	color: var(--c-text-muted);
}

.eekad-tv-modal__series {
	align-self: flex-start;
	padding: 4px 10px;
	background: rgba(var(--c-border-rgb), .06);
	color: var(--c-text);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	transition: background .18s ease;
}

.eekad-tv-modal__series:hover {
	background: rgba(var(--c-border-rgb), .12);
}

.eekad-tv-modal__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--c-text);
}

.eekad-tv-modal__excerpt {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--c-text-2, var(--c-text));
}

.eekad-tv-modal__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono, var(--font-sans));
	font-size: 12px;
	color: var(--c-text-muted);
	letter-spacing: 0; /* Arabic — never tracked */
}

.eekad-tv-modal__dot {
	width: 3px;
	height: 3px;
	background: currentColor;
	border-radius: 50%;
	opacity: .6;
}

.eekad-tv-modal__links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-block-start: auto;
	padding-block-start: 18px;
	border-block-start: 1px solid rgba(var(--c-border-rgb), .08);
}

.eekad-tv-modal__link {
	color: var(--c-text);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	padding-block: 4px;
	transition: color .18s ease;
}

.eekad-tv-modal__link:hover {
	color: var(--c-lime);
}

.eekad-tv-modal__link.is-perma {
	color: var(--c-text-muted);
}

/* Floating action buttons (close + prev/next) live OUTSIDE the .shell so a
   click on them doesn't bubble to the backdrop-click handler. They're
   position:fixed so they anchor to the viewport, not the modal box. */
.eekad-tv-modal__close,
.eekad-tv-modal__nav {
	position: fixed;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	transition: opacity .18s ease, background .18s ease;
	z-index: 1;
}

.eekad-tv-modal__close {
	inset-block-start: 24px;
	inset-inline-end: 24px; /* RTL: LEFT edge of viewport (matches IG's top-right in LTR). */
	width: 40px;
	height: 40px;
}

.eekad-tv-modal__close:hover {
	opacity: .7;
}

.eekad-tv-modal__nav {
	inset-block-start: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	background: rgba(0, 0, 0, .35);
	border: 1px solid rgba(255, 255, 255, .35);
}

.eekad-tv-modal__nav:hover:not(:disabled) {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .55);
}

.eekad-tv-modal__nav:disabled {
	opacity: .25;
	cursor: default;
}

/* In RTL: .is-prev pins to inset-inline-start = RIGHT edge of viewport
   (older→newer direction). .is-next pins to LEFT edge (newer→older). */
.eekad-tv-modal__nav.is-prev {
	inset-inline-start: 24px;
}

.eekad-tv-modal__nav.is-next {
	inset-inline-end: 24px;
}

@media (max-width: 900px) {
	.eekad-tv-modal__layout {
		flex-direction: column;
		height: auto;
		max-height: 92vh;
		width: min(96vw, 460px);
	}
	.eekad-tv-modal__player {
		flex: 0 0 auto;
		aspect-ratio: 9 / 16;
		height: auto;
		width: 100%;
		max-height: 60vh;
	}
	.eekad-tv-modal__panel {
		flex: 1 1 auto;
		width: 100%;
		height: auto;
		padding: 18px 18px 16px;
		gap: 10px;
		border-inline-start: 0;
		border-block-start: 1px solid rgba(var(--c-border-rgb), .06);
	}
	.eekad-tv-modal__title { font-size: 17px; }
	.eekad-tv-modal__close { inset-block-start: 12px; }
	.eekad-tv-modal__nav { width: 38px; height: 38px; }
	.eekad-tv-modal__nav.is-prev { inset-inline-start: 8px; }
	.eekad-tv-modal__nav.is-next { inset-inline-end: 8px; }
}

/* =============================================================
 * Single Video — /tv/{slug}/
 * =========================================================== */
.eekad-video-single {
	background: var(--c-bg-alt);
	color: var(--c-text-2);
	padding-block-start: 72px;
	padding-block-end: 80px;
}
.eekad-video-single__player-wrap {
	background: #000;
}
.eekad-video-single__player {
	max-width: 1200px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	position: relative;
}
.eekad-video-single__player iframe,
.eekad-video-single__player img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.eekad-video-single__yt-poster {
	display: block;
	position: absolute;
	inset: 0;
}
.eekad-video-single__yt-poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.eekad-video-single__yt-poster-badge {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: rgba(0,0,0,.45);
	color: var(--c-text);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s;
}
.eekad-video-single__yt-poster:hover .eekad-video-single__yt-poster-badge {
	background: rgba(0,0,0,.6);
}
.eekad-video-single__layout {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 48px;
	padding-block-start: 40px;
	align-items: start;
}
.eekad-video-single__header {
	margin-block-end: 24px;
}
.eekad-video-single__series {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-text-muted);
	text-decoration: none;
	margin-block-end: 10px;
	transition: color .2s;
}
.eekad-video-single__series:hover { color: var(--c-text); }
.eekad-video-single__title {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 12px;
}
.eekad-video-single__meta {
	font-size: 14px;
	color: rgba(255,255,255,.5);
}
.eekad-video-single__desc {
	font-size: 16px;
	line-height: 1.8;
	color: rgba(255,255,255,.7);
	margin-block-end: 24px;
}
.eekad-video-single__desc p { margin: 0; }
.eekad-video-single__yt-link {
	margin-block-start: 24px;
}
.eekad-video-single__yt-link a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: rgba(255,255,255,.6);
	text-decoration: none;
	transition: color .2s;
}
.eekad-video-single__yt-link a:hover { color: #ff0000; }
.eekad-video-single__yt-link svg { flex-shrink: 0; }

/* Related sidebar */
.eekad-video-single__related-heading {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 20px;
	padding-block-end: 12px;
	border-bottom: 1px solid rgba(var(--c-border-rgb),.1);
}
.eekad-video-single__related-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.eekad-video-single__related-card {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 12px;
	text-decoration: none;
	color: var(--c-text);
	transition: opacity .2s;
}
.eekad-video-single__related-card:hover { opacity: .85; }
.eekad-video-single__related-thumb {
	aspect-ratio: 16 / 9;
	border-radius: 0;
	overflow: hidden;
	position: relative;
	background: rgba(var(--c-border-rgb),.05);
}
.eekad-video-single__related-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.eekad-video-single__related-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.2);
	opacity: 0;
	transition: opacity .2s;
}
.eekad-video-single__related-card:hover .eekad-video-single__related-play { opacity: 1; }
.eekad-video-single__related-play svg {
	width: 28px;
	height: 28px;
	fill: #fff;
}
.eekad-video-single__related-info h3 {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.eekad-video-single__related-info span {
	font-size: 12px;
	color: rgba(255,255,255,.45);
}
.eekad-video-single__related-all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-block-start: 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--c-text-2);
	text-decoration: none;
	transition: color .2s;
}
.eekad-video-single__related-all:hover { color: var(--c-lime); }

@media (max-width: 960px) {
	.eekad-video-single__layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.eekad-video-single__related-card {
		grid-template-columns: 140px 1fr;
	}
}
@media (max-width: 768px) {
	.eekad-video-single__title { font-size: 22px; }
	.eekad-video-single__related-card {
		grid-template-columns: 120px 1fr;
	}
}

/* =============================================================
 * Homepage — Eekad TV (Facebook-stories–style rail)
 *
 * Single horizontal scroll-snap rail of 9:16 cards; same shape on
 * mobile and desktop, only the card size scales up. Cards reuse the
 * shared [data-tv-card] contract so the modal in
 * template-parts/tv/modal.php handles click-to-play + prev/next.
 * =========================================================== */
.eekad-tv {
	padding-block: var(--section-pad);
}
.eekad-tv > .eekad-container {
	max-width: 1280px;
	padding-inline: clamp(16px, 4vw, 40px);
}

.eekad-tv__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-block-end: 32px; /* matches .eekad-verify__header */
}
.eekad-tv__head-actions {
	display: inline-flex;
	align-items: center;
	gap: 24px;
}
.eekad-tv__nav {
	display: inline-flex;
	gap: 12px;
}
/* No brackets here — the wordmark is the section title. It carries the
   same font-size as the text titles purely so the logo can be sized off
   it in em, which keeps the two in step at every breakpoint. */
.eekad-tv__heading {
	display: inline-flex;
	align-items: center;
	margin: 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
}
.eekad-tv__logo {
	display: block;
	/* 1.3em, not 1em. The SVG box is much taller than the Arabic
	   letterforms inside it — it also has to hold the TV chip and the
	   "EEKAD" caption — so matching the box to the title's font-size
	   leaves the wordmark visibly smaller than the words beside it.
	   At 1.3em the letterforms fill the same ink band as a title like
	   "اخترنا لكم"; measured against its ink top and baseline. */
	height: 1.3em;
	width: auto;
}
/* Shared subtle "see all" link — used by both .eekad-verify and
 * .eekad-tv section headers. Single source of truth via grouped
 * selector so they stay in lockstep visually. */
.eekad-tv__see-all,
.eekad-verify__all-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	background: transparent;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-text-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s;
}
.eekad-tv__see-all:hover,
.eekad-tv__see-all:focus-visible,
.eekad-verify__all-link:hover,
.eekad-verify__all-link:focus-visible {
	color: var(--c-lime, #cdfe64);
	transform: none;
	box-shadow: none;
}
.eekad-tv__see-all span,
.eekad-verify__all-link svg {
	flex-shrink: 0;
}

/* Rail — full-bleed horizontal scroll, snap on cards. Negative inline
   Viewport handles edge-to-edge layout — the rail itself just lays
   cards out in a flex row. Mirrors the .eekad-verify carousel pattern. */
.eekad-tv__viewport {
	position: relative;
	z-index: 1;
	overflow-x: auto;
	overflow-y: hidden;
	/* proximity, not mandatory: mandatory yanks every gesture to the next
	   card edge and snaps partial swipes back to where they started, which
	   reads as the rail resisting you. proximity still tidies up a scroll
	   that lands near an edge but lets short drags settle where released. */
	scroll-snap-type: x proximity;
	scroll-padding-inline-start: max(var(--container-px), calc((100vw - var(--container)) / 2 + var(--container-px)));
	scrollbar-width: none;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-inline: contain;
}
.eekad-tv__viewport::-webkit-scrollbar { display: none; }
.eekad-tv__viewport .eekad-container-bleed {
	padding-inline-start: max(var(--container-px), calc((100vw - var(--container)) / 2 + var(--container-px)));
	padding-inline-end: 24px;
}
.eekad-tv__rail {
	display: flex;
	align-items: flex-start; /* prevent flex stretch from overriding aspect-ratio */
	gap: 12px;
	width: max-content;
}

/* =============================================================
 * Homepage — Categories (full-bleed horizontal scroll row)
 * =========================================================== */
.eekad-categories {
	overflow: hidden;
}
.eekad-categories__row {
	display: flex;
	align-items: stretch;
	overflow-x: auto;
	scrollbar-width: none;
}
.eekad-categories__row.is-dragging {
	-webkit-user-select: none;
	user-select: none;
}
.eekad-categories__row.is-dragging,
.eekad-categories__row.is-gliding {
	will-change: scroll-position;
}
.eekad-categories__row.is-dragging .eekad-category,
.eekad-categories__row.is-gliding .eekad-category {
	pointer-events: none;
}
.eekad-categories__row.is-rubbering {
	will-change: scroll-position, transform;
}
@media (hover: hover) and (pointer: fine) {
	.eekad-categories__row { cursor: grab; }
	.eekad-categories__row.is-dragging { cursor: grabbing; }
}
.eekad-categories__row::-webkit-scrollbar { display: none; }

.eekad-category {
	position: relative;
	flex: 0 0 418px;
	min-height: 664px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 64px;
	overflow: hidden;
	isolation: isolate;
	border-inline-end: 1px solid rgba(var(--c-border-rgb), .04);
}
.eekad-category__bg {
	position: absolute;
	inset: 0;
	background-image: var(--cat-bg);
	background-size: cover;
	background-position: center;
	z-index: -2;
	/* Resting state stays legible (content-first); hover adds color,
	   it doesn't resurrect a dead panel. */
	filter: grayscale(.8) brightness(.55);
	transition: filter var(--dur-move) var(--ease-out);
}
.eekad-category--blank .eekad-category__bg {
	background: rgba(var(--c-bg-elevated-rgb), .92);
	filter: none;
}
.eekad-category:hover .eekad-category__bg {
	filter: grayscale(0) brightness(.7);
}
.eekad-category--blank:hover .eekad-category__bg {
	filter: none;
}
.eekad-category::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(var(--c-bg-elevated-rgb), .35) 0%, rgba(var(--c-bg-elevated-rgb), .65) 50%, rgba(var(--c-bg-elevated-rgb), .95) 100%);
	z-index: -1;
	pointer-events: none;
	transition: opacity .4s ease;
}
.eekad-category:hover::after {
	opacity: .75;
}
.eekad-category__glow {
	display: none;
}

.eekad-category__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
	color: var(--c-text);
	text-align: center;
	opacity: .72;
	transition: opacity var(--dur-move) var(--ease-out);
}
.eekad-category:hover .eekad-category__body {
	opacity: 1;
}

.eekad-category__title {
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
}
.eekad-category__bracket {
	color: var(--c-text);
	transition: color .4s ease;
}
.eekad-category:hover .eekad-category__bracket {
	color: var(--c-lime);
}
.eekad-section-bracket {
	color: var(--c-lime);
}
.eekad-category__desc {
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.55;
	color: var(--c-text-muted);
	margin: 0;
}
.eekad-category__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 28px;
	background: var(--c-text-faint);
	color: var(--c-text-on-accent);
	border: none;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	transition: background .4s ease, color .4s ease, border-color .4s ease;
}
.eekad-category:hover .eekad-category__cta {
	background: var(--c-lime);
	color: var(--c-text-on-accent);
	border-color: var(--c-lime);
}
/* --- Categories: row wrapper --- */
.eekad-categories__row-wrap {
	position: relative;
}

/* --- Categories: arrow buttons --- */
.eekad-categories__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(var(--c-border-rgb), .15);
	background: rgba(var(--c-bg-base-rgb), .75);
	color: var(--c-text);
	cursor: pointer;
	opacity: 0;
	transition: opacity .3s ease, background .2s ease;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.eekad-categories__arrow:hover {
	background: rgba(205, 254, 100, .15);
	border-color: rgba(205, 254, 100, .3);
	color: #cdfe64;
}
.eekad-categories__arrow--prev { right: 16px; }
.eekad-categories__arrow--next { left: 16px; }
.eekad-categories__row-wrap.has-overflow-start .eekad-categories__arrow--prev { opacity: 1; }
.eekad-categories__row-wrap.has-overflow-end .eekad-categories__arrow--next { opacity: 1; }

/* --- Categories responsive --- */
@media (max-width: 768px) {
	.eekad-category {
		flex: 0 0 240px;
		min-height: 480px;
		padding: 32px;
	}
	.eekad-category__title { font-size: 24px; }
	.eekad-category__desc { font-size: 15px; }
	.eekad-category__cta { font-size: 16px; padding: 10px 22px; }
	.eekad-categories__arrow { display: none; }
}
@media (max-width: 480px) {
	.eekad-category {
		flex: 0 0 208px;
		min-height: 400px;
		padding: 24px;
	}
	.eekad-category__title { font-size: 20px; }
	.eekad-category__desc { font-size: 14px; }
	.eekad-category__cta { font-size: 14px; padding: 8px 18px; }
	.eekad-category__body { gap: 8px; }
}

/* =============================================================
 * "الأكثر قراءة" — most-read section
 * =============================================================
 * Layout: a 2-column grid of 6 cards (top-right is the highlighted
 * "rank #1" card with an indigo background). Each card is a 3-column
 * mini-grid: big numeral on the visual LEFT, title + meta in the
 * middle, square thumbnail on the visual far edge. The section header
 * is a lime "tag" badge with the Figma Subtract path inlined as SVG.
 */
.eekad-picks {
	color: var(--c-text);
}
.eekad-picks__wrap {
	max-width: 1280px;
	margin-inline: auto;
	padding: var(--section-pad) 32px;
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL: visual right */
}

/* --- Header: brackets + title --- */
.eekad-picks__header {
	display: flex;
	justify-content: flex-start; /* RTL: visual right */
	margin-bottom: 32px;
}
.eekad-picks__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
}
/* .eekad-picks__title-text — no inner padding; gap on parent is the spacing */

/* --- 2×3 grid --- */
.eekad-picks__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(3, 200px);
	grid-auto-flow: column;
	gap: 32px;
	width: 100%;
}

/* --- Card --- */
.eekad-picks__card {
	position: relative;
	display: flex;
	flex-direction: row-reverse; /* RTL: thumb right, rank left */
	align-items: center;
	gap: 16px;
	padding: 24px;
	min-width: 0;
	background: var(--card-bg, var(--c-bg-elevated));
	color: var(--c-text);
	transition: background .2s ease;
}

/* Featured card — same surface as its siblings; hierarchy comes from
   position and typography, not a lime slab. */
.eekad-picks__tag {
	display: none; /* the lime side-tab retired with the featured accent */
}

/* Body: meta + title */
.eekad-picks__body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	text-align: right;
}
.eekad-picks__meta {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start; /* RTL: visual right */
	gap: 16px;
	font-size: 20px;
	color: var(--c-text-2);
}

.eekad-picks__sep {
	display: inline-block;
	width: 1px;
	align-self: stretch;
	background: currentColor;
	opacity: .4;
}
.eekad-picks__card-title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Thumbnail — square */
.eekad-picks__thumb {
	flex: 0 0 auto;
	width: 140px;
	height: 140px;
	overflow: hidden;
}
.eekad-picks__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Filter pills (category-hot) --- */
.eekad-picks__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}
.eekad-picks__pill {
	appearance: none;
	border: 0;
	background: var(--c-bg-surface);
	color: var(--c-text);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	padding: 10px 22px;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.eekad-picks__pill:hover {
	background: var(--c-bg-elevated);
	color: var(--c-text);
}
.eekad-picks__pill.is-active {
	background: var(--c-text);
	color: var(--c-bg-base);
}

/* --- Panels (one per pill) --- */
.eekad-picks__panel { width: 100%; display: none; }
.eekad-picks__panel.is-active { display: block; }

/* --- Responsive --- */
@media (max-width: 900px) {
	.eekad-picks__grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-auto-rows: 200px;
		grid-auto-flow: row;
	}
}
@media (max-width: 768px) {
	.eekad-picks__wrap { padding: 48px 16px; }
	.eekad-picks__grid { grid-template-rows: auto; grid-auto-rows: auto; gap: 16px; }
	.eekad-picks__card { padding: 16px; height: auto; min-height: 140px; }
	.eekad-picks__thumb { width: 100px; height: 100px; flex: 0 0 100px; }
	.eekad-picks__card-title { font-size: 18px; }
	.eekad-picks__meta { font-size: 16px; }
	.eekad-picks__title { font-size: 24px; }
	.eekad-picks__pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.eekad-picks__pills::-webkit-scrollbar { display: none; }
	.eekad-picks__pill { flex-shrink: 0; }
}
@media (max-width: 480px) {
	.eekad-picks__wrap { padding: 32px 12px; }
	.eekad-picks__card { padding: 12px; gap: 10px; }
	.eekad-picks__thumb { width: 80px; height: 80px; flex: 0 0 80px; }
	.eekad-picks__card-title { font-size: 16px; }
	.eekad-picks__meta { font-size: 14px; }
	.eekad-picks__title { font-size: 22px; }
}

/* =============================================================
 * "تحقق معنا" — verification carousel
 * =============================================================
 * Horizontal scroller of fact-check cards. Each card is a square
 * image stacked above a dark (or indigo, when featured) body that
 * contains a kicker line, the verdict title, and a CTA button. A
 * red "مضلل" / green "صحيح" sticker plus a small QR sticker are
 * pinned over the bottom edge of the image.
 */
.eekad-verify {
	position: relative;
	padding-block: var(--section-pad);
	color: var(--c-text);
	overflow: hidden;
}
.eekad-verify__bg,
.eekad-verify__bg-veil {
	display: none;
}
.eekad-verify .eekad-container { position: relative; z-index: 1; }
.eekad-verify__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-block-end: 32px;
}
.eekad-verify__title {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px; /* match .eekad-news__title */
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	color: var(--c-text);
}
.eekad-verify__header-actions {
	display: inline-flex;
	align-items: center;
	gap: 20px;
}
.eekad-verify__nav {
	display: inline-flex;
	gap: 12px;
}
.eekad-verify__nav-btn,
.eekad-tv__nav-btn {
	width: 48px;
	height: 48px;
	background: transparent;
	border: 1px solid rgba(var(--c-border-rgb), .25);
	color: var(--c-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.eekad-verify__nav-btn:hover,
.eekad-tv__nav-btn:hover {
	background: rgba(var(--c-border-rgb), .08);
	border-color: rgba(var(--c-border-rgb), .5);
}
.eekad-verify__nav-btn svg,
.eekad-tv__nav-btn svg { width: 22px; height: 22px; }

/* --- TV header responsive ---
   Same treatment .eekad-verify__header already gets: the arrows and
   "see all" outgrow the row on a phone, so let them drop to their own
   line instead of squeezing the wordmark into its brackets. */
@media (max-width: 768px) {
	.eekad-tv__head { flex-wrap: wrap; }
	.eekad-tv__heading { flex-shrink: 0; }
}

/* Carousel viewport masks the rail to the container; the rail
   itself is wider than the viewport and is translated by JS. */
.eekad-verify__viewport {
	position: relative;
	z-index: 1;
	overflow-x: auto;
	overflow-y: hidden;
	/* See .eekad-tv__viewport — proximity keeps the tidy landing without
	   fighting short drags. */
	scroll-snap-type: x proximity;
	scroll-padding-inline-start: max(var(--container-px), calc((100vw - var(--container)) / 2 + var(--container-px)));
	scrollbar-width: none;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-inline: contain;
}
.eekad-verify__viewport::-webkit-scrollbar { display: none; }
/* Full-bleed wrapper: pads the leading edge so the rail starts aligned
   with .eekad-container's leading edge, but the trailing side runs all
   the way to the screen edge so the last card can extend past. */
.eekad-verify__viewport .eekad-container-bleed {
	padding-inline-start: max(var(--container-px), calc((100vw - var(--container)) / 2 + var(--container-px)));
	padding-inline-end: 24px;
}
.eekad-verify__rail {
	display: flex;
	gap: 32px;
	width: max-content;
}

/* Each card: ~360px wide, ~560px tall. The photo fills the entire
   card; the body is absolutely positioned over the bottom portion
   with a clip-path tab on the leading edge so the photo bleeds
   through the cutout (matches Figma boolean Subtract shape). */
.eekad-verify__card {
	flex: 0 0 360px;
	height: 560px;
	position: relative;
	background: var(--card-bg, var(--c-bg-surface));
	overflow: hidden;
	scroll-snap-align: start;
	transition: transform .25s ease;
}

.eekad-verify__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--c-bg-base);
}
.eekad-verify__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

/* Verdict sticker */
.eekad-verify__sticker {
	position: absolute;
	display: block;
	width: 137px;
	height: auto;
	inset-inline-end: 24px;
	bottom: 218px;
	z-index: 2;
	pointer-events: none;
}

/* Body shape: NOT a plain rectangle. Matches Figma "Subtract"
   boolean op (94:1466 / 94:1764) exactly. Path:
     M294.377 22.417 H394.333 V219 H-0.667 V0 H294.377 V22.417 Z
   Read: the LEFT 75% of the body extends up to y=0 (full height),
   then steps DOWN to y≈10% for the RIGHT 25%. So the body has a
   TAB on its left side (visual left) — same side as the sticker,
   making the body wrap around it slightly. The photo behind the
   card bleeds through the recessed area on the right.
   In RTL, physical left of the box = visual left = where the
   sticker sits and where the tab pokes up. */
.eekad-verify__body {
	position: absolute;
	inset-inline: -1px;
	bottom: -1px;
	height: 242px;
	padding: 56px 26px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--card-bg, var(--c-bg-surface));
	z-index: 1;
	clip-path: polygon(
		0% 0%,
		74.5% 0%,
		74.5% 9.13%,
		100% 9.13%,
		100% 100%,
		0% 100%
	);
}
.eekad-verify__kicker {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	color: var(--c-text-2);
	text-align: center;
}
.eekad-verify__heading {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	color: var(--c-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.eekad-verify__heading a { color: inherit; }
.eekad-verify__heading a:hover { opacity: .85; }
/* Same button language as the coverage-areas CTA: a quiet outline at
   rest that fills lime when the card is hovered. Text is unchanged. */
.eekad-verify__cta {
	align-self: flex-start; /* RTL: visual right edge of body */
	margin-block-start: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 110px;
	padding: 10px 24px;
	background: transparent;
	color: var(--c-text);
	border: 1px solid rgba(var(--c-border-rgb), .35);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	transition: background .4s ease, color .4s ease, border-color .4s ease, transform .15s ease;
}
.eekad-verify__card:hover .eekad-verify__cta {
	background: var(--c-lime);
	border-color: var(--c-lime);
	color: var(--c-text-on-accent);
}
/* --- Verify responsive --- */
@media (max-width: 768px) {
	.eekad-verify { padding-block: 48px; }
	.eekad-verify__header { flex-wrap: wrap; gap: 16px; }
	.eekad-verify__title { font-size: 24px; }
	.eekad-verify__card { flex: 0 0 280px; height: 460px; }
	.eekad-verify__rail { gap: 20px; }
	.eekad-verify__body { height: 200px; padding: 40px 20px 18px; }
	.eekad-verify__heading { font-size: 18px; }
	.eekad-verify__sticker { width: 98px; }
}
@media (max-width: 480px) {
	.eekad-verify { padding-block: 40px; }
	.eekad-verify__card { flex: 0 0 240px; height: 400px; }
	.eekad-verify__body { height: 180px; padding: 36px 16px 14px; }
	.eekad-verify__heading { font-size: 16px; }
	.eekad-verify__sticker { width: 78px; }
	.eekad-verify__kicker { font-size: 12px; }
	.eekad-verify__cta { padding: 8px 18px; font-size: 14px; }
	.eekad-verify__title { font-size: 20px; }
}

/* =============================================================
 * Fallback template — pages, search results, 404
 * =========================================================== */
body.page,
body.search,
body.error404 {
	background: var(--c-bg-base);
}
.eekad-fallback {
	padding: clamp(80px, 9vw, 120px) 0 96px;
}
.eekad-fallback__hero {
	margin-bottom: clamp(36px, 5vw, 56px);
}
.eekad-fallback__title {
	font-size: clamp(38px, 4.5vw, 56px);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 14px;
	color: var(--c-text);
}
.eekad-fallback__meta {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--c-text-muted);
	margin: 0;
}
.eekad-fallback__prose {
	max-width: 72ch;
	font-size: 17px;
	line-height: 1.85;
	color: var(--c-text-2);
}
.eekad-fallback__prose h2 {
	font-size: 26px;
	font-weight: 700;
	color: var(--c-text);
	margin: 40px 0 14px;
}
.eekad-fallback__prose h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--c-text);
	margin: 32px 0 10px;
}
.eekad-fallback__prose a {
	color: var(--c-text);
	text-decoration: underline;
	text-decoration-color: rgba(var(--c-border-rgb), .35);
	text-underline-offset: .2em;
	transition: text-decoration-color var(--dur-quick, .18s) var(--ease-out, ease);
}
.eekad-fallback__prose a:hover {
	text-decoration-color: var(--c-lime);
}
.eekad-fallback__prose p {
	margin: 0 0 18px;
}
.eekad-fallback__prose ul {
	margin: 0 0 18px;
	padding-inline-start: 1.4em;
	list-style: none;
}
.eekad-fallback__prose li {
	position: relative;
	margin-bottom: 10px;
}
.eekad-fallback__prose li::before {
	content: "";
	position: absolute;
	inset-inline-start: -1.05em;
	top: .78em;
	width: 5px;
	height: 5px;
	background: var(--c-text);
}
.eekad-fallback__prose strong {
	color: var(--c-text);
	font-weight: 700;
}
.eekad-fallback__empty {
	font-size: 16px;
	color: var(--c-text-muted);
}

/* Legal documents (privacy, terms) — same prose scale, with a slightly
   larger lead paragraph and justified Arabic body to match articles.

   The whole document is one centred measure, heading included: a start-
   aligned 72ch column inside the full container left the trailing half of
   a wide screen empty. Articles centre their measure through the
   .eekad-investigation__body grid; this is the same idea without the grid. */
.eekad-legal {
	max-width: 74ch;
	margin-inline: auto;
}
.eekad-legal .eekad-fallback__prose {
	max-width: none;
	text-align: justify;
}
.eekad-legal__lead {
	font-size: 19px;
	color: var(--c-text);
}
.eekad-legal .eekad-fallback__prose h2:first-of-type {
	margin-top: 48px;
}
.eekad-fallback__notfound {
	text-align: center;
	padding: clamp(40px, 8vw, 96px) 0;
}
.eekad-fallback__code {
	font-family: var(--font-mono);
	font-size: clamp(64px, 10vw, 120px);
	font-weight: 700;
	line-height: 1;
	color: rgba(var(--c-border-rgb), .14);
	margin: 0 0 8px;
}
/* ----- Unpublished-yet holding screen -----
   Not an error, so it should not read like one: a slow breath and a soft
   halo behind the word, and nothing else. Deliberately says nothing about
   the material itself. */
.eekad-fallback__notfound--soon {
	position: relative;
	isolation: isolate;
}
/*
 * The halo. Neutral white, never the lime — this is atmosphere, and the
 * accent is reserved for things a reader can act on.
 *
 * An image rather than a CSS gradient, and deliberately so. A glow this
 * wide and this faint spans only about thirty brightness levels by the time
 * it reaches 8-bit sRGB, so every level occupies a band tens of pixels
 * across. Safari dithers gradients and hides it; Chrome does not, and drew
 * visible concentric rings. The asset has the dither baked into its alpha
 * channel, which is the only way to get the levels the gradient cannot.
 *
 * Regenerate with scripts/generate-soon-halo.py — do not re-encode it
 * lossily, that smooths the dither away and the rings come back.
 *
 * Static on purpose too: the old opacity animation multiplied an already
 * tiny alpha, halving the levels available and doubling the band width.
 */
.eekad-fallback__notfound--soon::before {
	content: "";
	position: absolute;
	top: clamp(20px, 6vw, 64px);
	left: 50%;
	width: min(620px, 88vw);
	aspect-ratio: 1;
	transform: translate(-50%, -18%);
	background: url("../img/soon-halo.webp") center / 100% 100% no-repeat;
	pointer-events: none;
	z-index: -1;
}

/* The scheduled-post variant carries a word, not three digits: keep the
   display face and drop the mono sizing, which is set for numerals. */
.eekad-fallback__code--soon {
	font-family: inherit;
	font-size: clamp(56px, 8vw, 104px);
	letter-spacing: -0.01em;
	/* Arabic needs room above for the fatha and below for the descenders;
	   the numeral rule's line-height: 1 clips both. */
	line-height: 1.28;
	margin-block-end: clamp(12px, 2.5vw, 28px);
	/*
	 * Solid colour plus element opacity — never rgba() here. Arabic joins
	 * are overlapping glyph strokes, and Chrome blends each glyph on its own,
	 * so a translucent fill paints the overlaps twice and the joins show as
	 * bright seams. Fading the composited word instead paints it once.
	 * Safari flattens the run first, which is why it never showed there.
	 *
	 * For the same reason the word is never split into per-letter spans:
	 * that would break Arabic shaping outright.
	 */
	color: var(--c-text);
	opacity: .16;
	/* easeInOutSine — ease-in-out lingers at the extremes and reads as a
	   throb; this keeps the rate of change even, so it reads as breathing. */
	animation: eekad-soon-breathe 8s cubic-bezier(.37, 0, .63, 1) infinite;
}

/* Intermediate stops so the fade follows a sine rather than the straight
   line two keyframes would interpolate. */
@keyframes eekad-soon-breathe {
	0%, 100% { opacity: .15; }
	25%      { opacity: .19; }
	50%      { opacity: .25; }
	75%      { opacity: .19; }
}

@media (prefers-reduced-motion: reduce) {
	.eekad-fallback__code--soon {
		animation: none;
		opacity: .2;
	}
}
.eekad-fallback__home {
	display: inline-flex;
	margin-top: 24px;
	padding: 12px 26px;
	background: var(--c-text);
	color: var(--c-bg-base);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

/* =============================================================
 * Hot Articles section ("مقالات الساخنة") — Figma node 53:2
 * Two-column: featured card on the visual right, three small
 * cards stacked on the visual left. Indigo bg with subtle dot grid.
 * =========================================================== */
.eekad-hot {
	position: relative;
	padding-block: 80px;
	background: var(--c-bg-surface);
	color: var(--c-text);
	overflow: hidden;
}

/* --- Header --- */
.eekad-hot__header {
	display: flex;
	justify-content: flex-start; /* RTL: visually right */
	margin-block-end: 32px;
}
.eekad-hot__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--c-text);
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
}
/* .eekad-hot__title-text — no inner padding; gap on parent is the spacing */

/* --- Two-column grid --- */
.eekad-hot__grid {
	display: grid;
	grid-template-columns: 650px 1fr; /* featured | small stack — col 1 is visual right in RTL */
	gap: 32px;
	align-items: start;
}

/* --- Small cards stack --- */
.eekad-hot__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.eekad-hot__card {
	display: grid;
	grid-template-columns: 174px 1fr 24px;
	gap: 16px;
	align-items: stretch;
	height: 206px;
	padding: 16px;
	background: var(--c-bg-elevated);
	color: var(--c-text);
	cursor: pointer;
	transition: background .2s ease;
}
.eekad-hot__card.is-active {
	background: var(--c-bg-elevated);
}
.eekad-hot__card-thumb { order: -1; }
.eekad-hot__card-icon {
	display: block;
	width: 24px;
	height: 24px;
	order: 1;
	align-self: start;
}
.eekad-hot__card-icon svg { width: 100%; height: 100%; display: block; transform: scaleX(-1); }
.eekad-hot__card-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	min-width: 0;
}
.eekad-hot__card-heading {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.5;
	color: var(--c-text);
}
.eekad-hot__card-heading a {
	color: inherit;
	text-decoration: none;
}
.eekad-hot__card-heading a:hover { color: var(--c-lime); }
.eekad-hot__card-thumb {
	width: 174px;
	overflow: hidden;
	background: var(--c-bg-elevated);
	align-self: stretch;
}
.eekad-hot__card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Featured card --- */
.eekad-hot__featured {
	position: relative;
	width: 650px;
	height: 650px;
}
.eekad-hot__featured-media {
	position: absolute;
	inset: 0;
	background: var(--c-bg-elevated);
	overflow: hidden;
	/* Subtract path: M522.658 40 H650 V650 H59 V596 H0 V0 H522.658 Z
	   Top-right notch (522.658×40) and bottom-left notch (59×54). */
	clip-path: polygon(
		80.41% 6.15%,
		100%   6.15%,
		100%   100%,
		9.08%  100%,
		9.08%  91.69%,
		0%     91.69%,
		0%     0%,
		80.41% 0%
	);
}
.eekad-hot__featured-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity .25s ease;
}
.eekad-hot__featured-body {
	position: absolute;
	left: 44px;
	top: 388px;
	width: 561px;
	height: 219px;
	background: var(--c-bg-elevated);
	color: var(--c-text);
	/* Subtract path: M419.037 22.417 H561 V219 H71 V171 H0 V0 H419.037 Z
	   Top-right notch (142×22) and bottom-left notch (71×48). */
	clip-path: polygon(
		74.69% 10.24%,
		100%   10.24%,
		100%   100%,
		12.66% 100%,
		12.66% 78.08%,
		0%     78.08%,
		0%     0%,
		74.69% 0%
	);
}
.eekad-hot__featured-text {
	position: absolute;
	left: 140px;
	top: 50px;
	right: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.eekad-hot__featured-heading {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.4;
	color: var(--c-text);
}
.eekad-hot__featured-heading a { color: inherit; text-decoration: none; }
.eekad-hot__featured-heading a:hover { color: var(--c-lime); }
.eekad-hot__cta {
	position: absolute;
	left: 21px;  /* 65 - 44 */
	top: 21px;   /* 409 - 388 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	background: var(--c-indigo);
	color: var(--c-text);
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 14px;
	line-height: 24px;
	text-decoration: none;
	transition: background-color .15s ease;
}
.eekad-hot__cta:hover { background: var(--c-indigo-deep); }

/* --- Shared text styles for views + meta row --- */
.eekad-hot__views {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
	color: var(--c-text-2);
}
.eekad-hot__featured-text .eekad-hot__views { font-size: 18px; }
.eekad-hot__meta {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
	color: var(--c-text-2);
}
.eekad-hot__featured-text .eekad-hot__meta { font-size: 18px; }
.eekad-hot__meta-sep {
	display: inline-block;
	width: 21px;
	height: 1px;
	background: var(--c-text-2);
}
.eekad-hot__featured-text .eekad-hot__meta-sep { width: 24px; }

/* --- Responsive: collapse below the desktop layout --- */
@media (max-width: 1100px) {
	.eekad-hot__grid {
		grid-template-columns: 1fr;
	}
	/* Flatten featured card: image on top, body below — no clip-path */
	.eekad-hot__featured {
		width: 100%;
		height: auto;
	}
	.eekad-hot__featured-media {
		position: relative;
		aspect-ratio: 16 / 9;
		clip-path: none;
	}
	.eekad-hot__featured-media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}
	.eekad-hot__featured-body {
		position: relative;
		left: auto;
		top: auto;
		bottom: auto;
		width: 100%;
		height: auto;
		min-height: 140px;
		clip-path: none;
		padding: 20px;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.eekad-hot__featured-text {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
	}
	.eekad-hot__featured-heading {
		min-height: 3em;
	}
	.eekad-hot__cta {
		position: relative;
		left: auto;
		top: auto;
		align-self: flex-start;
	}
}
@media (max-width: 768px) {
	.eekad-hot { padding-block: 48px; }
	.eekad-hot__header { margin-block-end: 28px; }
	.eekad-hot__title { font-size: 24px; }
	.eekad-hot__featured-media { aspect-ratio: 16 / 10; }
	.eekad-hot__featured-heading { font-size: 18px; }
	.eekad-hot__featured-text .eekad-hot__views { font-size: 15px; }
	.eekad-hot__featured-text .eekad-hot__meta { font-size: 14px; }
	.eekad-hot__card {
		grid-template-columns: 120px 1fr 24px;
		height: auto;
		min-height: 120px;
		padding: 14px;
		gap: 12px;
	}
	.eekad-hot__card-thumb { width: 120px; }
	.eekad-hot__card-heading { font-size: 15px; line-height: 1.5; }
	.eekad-hot__views { font-size: 13px; }
	.eekad-hot__meta { font-size: 13px; gap: 10px; }
}
@media (max-width: 480px) {
	.eekad-hot { padding-block: 32px; }
	.eekad-hot__title { font-size: 22px; }
	.eekad-hot__featured-heading { font-size: 16px; min-height: 3em; }
	.eekad-hot__featured-body { padding: 16px; }
	.eekad-hot__featured-text .eekad-hot__views { font-size: 14px; }
	.eekad-hot__featured-text .eekad-hot__meta { font-size: 13px; }
	.eekad-hot__card {
		grid-template-columns: 100px 1fr;
		padding: 12px;
		gap: 10px;
		min-height: 100px;
	}
	.eekad-hot__card-icon { display: none; }
	.eekad-hot__card-thumb { width: 100px; }
	.eekad-hot__card-heading { font-size: 14px; }
}

/* =============================================================
 * Featured Investigations section ("أبرز التحقيقات") — Figma 157:3069
 * Dark section with bordered image showcase, nav arrows, title +
 * excerpt, and a 3-card strip below.
 * =========================================================== */
.eekad-feat {
	position: relative;
	background: var(--c-bg-surface);
	color: var(--c-text);
	overflow: hidden;
	isolation: isolate;
}

/* Blurred backdrop image */
.eekad-feat__backdrop {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: blur(3.5px);
	opacity: .5;
	z-index: 0;
}

/* Inner wrapper — matches Figma "Text Frame": 1280px, 32px px, 64px py */
.eekad-feat__wrap {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin-inline: auto;
	padding: 80px 32px;
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL: visual right */
}

/* --- Header: filled brackets + title --- */
.eekad-feat__header {
	display: flex;
	justify-content: flex-start; /* RTL: visual right */
	margin-bottom: 32px;
}
.eekad-feat__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--c-text);
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
}
/* .eekad-feat__title-text — no inner padding; gap on parent is the spacing */

/* --- Main showcase image area --- */
.eekad-feat__showcase {
	position: relative;
	width: 100%;
	min-height: 670px;
	border: 19px solid var(--c-coral);
	border-bottom: none;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 32px;
	padding-inline-start: 0;
}
/* Image wrapper clips content without affecting card overlap */
.eekad-feat__showcase-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	opacity: 0;
	transition: opacity .6s ease;
}
.eekad-feat__showcase-img.is-active {
	opacity: 1;
}
/* Dark overlays on top of the image — Figma layers 157:3079 + 157:3078 */
.eekad-feat__showcase::before,
.eekad-feat__showcase::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
/* Solid black tint */
.eekad-feat__showcase::before {
	background: #000;
	opacity: .10;
	z-index: 1;
}
/* Gradient: stronger at bottom (text area) → transparent top */
.eekad-feat__showcase::after {
	background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 50%);
	opacity: 1;
	z-index: 1;
}

/* Top prev/next nav — white bordered square buttons */
.eekad-feat__nav {
	position: relative;
	z-index: 3;
	display: flex;
	justify-content: space-between;
	padding-inline-start: 32px;
}
.eekad-feat__nav-btn {
	width: 40px;
	height: 40px;
	background: transparent;
	border: 1px solid #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--c-text);
	padding: 8px;
	transition: background-color .15s ease, color .15s ease;
}
.eekad-feat__nav-btn:hover {
	background: var(--c-text);
	color: var(--c-text-on-accent);
}
.eekad-feat__nav-btn svg { width: 24px; height: 24px; display: block; }

/* Content block: date, title, excerpt */
.eekad-feat__content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL: visual right */
	gap: 24px;
	padding-inline-start: 64px;
	padding-inline-end: 64px;
	width: 100%;
	box-sizing: border-box;
	transition: opacity .25s ease;
}
.eekad-feat__date {
	font-family: var(--font-mono);
	font-size: 16px;
	color: var(--c-text);
	text-align: right;
}
.eekad-feat__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL: visual right */
	gap: 16px;
	text-align: right;
	width: 100%;
	min-width: 0;
}
.eekad-feat__headline {
	font-size: 44px;
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.eekad-feat__headline a {
	display: block;
	color: inherit;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: opacity .15s ease;
}
.eekad-feat__headline a:hover { opacity: .82; }
.eekad-feat__desc {
	margin: 0;
	max-width: 800px;
	font-weight: 300;
	font-size: 20px;
	line-height: 1.5;
}

/* Lime expand arrow — Figma: (1107, 385) in 1216×670 showcase */
.eekad-feat__expand {
	position: absolute;
	z-index: 3;
	right: calc(84 / 1216 * 100%);
	top: calc(385 / 670 * 100%);
	width: 25px;
	height: 25px;
	color: var(--c-lime);
	transition: opacity .15s ease;
}
.eekad-feat__expand:hover { opacity: .7; }
.eekad-feat__expand svg { width: 100%; height: 100%; display: block; }

/* --- 3-card strip below the showcase --- */
.eekad-feat__cards {
	display: flex;
	flex-direction: row-reverse; /* RTL: active card appears on visual right */
	width: 100%;
}
.eekad-feat__card {
	flex: 1 1 0;
	display: flex;
	flex-direction: row-reverse; /* RTL: thumb right, text left */
	align-items: center;
	gap: 24px;
	height: calc(134px + 19px); /* content height + top border */
	padding: 16px;
	color: var(--c-text);
	text-decoration: none;
	border-top: 19px solid var(--c-coral);
	box-sizing: border-box;
	transition: background-color .3s ease;
}
.eekad-feat__card.is-active {
	background: var(--c-coral);
	border-top-color: transparent;
	padding-top: calc(16px + 19px); /* absorb the hidden border space */
	box-shadow: 0 3px 3px rgba(0,0,0,.09), 0 1px 2px rgba(0,0,0,.1);
}
.eekad-feat__card:not(.is-active):hover {
	background: rgba(var(--c-border-rgb),.06);
}
.eekad-feat__card-text {
	flex: 1 1 0;
	min-width: 0;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.4;
	text-align: right;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.eekad-feat__card-thumb {
	flex: 0 0 102px;
	width: 102px;
	height: 102px;
	overflow: hidden;
}
.eekad-feat__card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
	.eekad-feat__showcase {
		min-height: 500px;
		border: none;
	}
	.eekad-feat__cards {
		flex-direction: column;
		margin-top: 16px;
	}
	.eekad-feat__card {
		border-top: none;
		border-bottom: 1px solid rgba(var(--c-border-rgb),.08);
	}
	.eekad-feat__card:last-child { border-bottom: none; }
	.eekad-feat__card.is-active {
		background: rgba(var(--c-border-rgb),.06);
		border-top: none;
		padding-top: 16px;
	}
}
@media (max-width: 700px) {
	.eekad-feat__showcase { min-height: 400px; border: none; }
	.eekad-feat__headline { font-size: 28px; white-space: normal; }
	.eekad-feat__desc { font-size: 16px; }
	.eekad-feat__content { padding-inline-end: 16px; }
	.eekad-feat__cards { margin-top: 12px; }
	.eekad-feat__card {
		height: auto;
		min-height: 80px;
		border-top: none;
		border-bottom: 1px solid rgba(var(--c-border-rgb),.08);
	}
	.eekad-feat__card:last-child { border-bottom: none; }
	.eekad-feat__card.is-active {
		padding-top: 16px;
		background: rgba(var(--c-border-rgb),.06);
	}
	.eekad-feat__card-thumb { flex: 0 0 80px; width: 80px; height: 80px; }
}
@media (max-width: 480px) {
	.eekad-feat__wrap { padding: 24px 12px; }
	.eekad-feat__title { font-size: 20px; }
	.eekad-feat__header { margin-bottom: 16px; }

	/* Showcase: taller image with only title overlay at bottom */
	.eekad-feat__showcase {
		min-height: 64vw;
		border: none;
		padding: 0;
		position: relative;
	}

	.eekad-feat__showcase::before { opacity: .12; }
	.eekad-feat__showcase::after {
		display: block;
		background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.2) 45%, transparent 100%);
	}

	/* Nav over image */
	.eekad-feat__nav {
		position: absolute;
		top: 10px;
		left: 10px;
		right: 10px;
		z-index: 5;
		padding: 0;
	}
	.eekad-feat__nav-btn {
		width: 30px;
		height: 30px;
		background: rgba(0,0,0,.45);
		border-color: rgba(var(--c-border-rgb),.35);
	}

	/* Content: only headline, pinned to bottom */
	.eekad-feat__content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 14px;
		gap: 6px;
	}
	.eekad-feat__text { gap: 0; }
	.eekad-feat__date { font-size: 11px; opacity: .6; }
	.eekad-feat__headline {
		font-size: 16px;
		font-weight: 600;
		white-space: normal;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	/* Hide description on mobile — too much text over image */
	.eekad-feat__desc { display: none; }
	.eekad-feat__expand { display: none; }

	/* Cards: compact list */
	.eekad-feat__cards {
		margin-top: 8px;
		gap: 0;
	}
	.eekad-feat__card {
		padding: 12px;
		height: auto;
		min-height: auto;
		border-top: none;
		border-bottom: 1px solid rgba(var(--c-border-rgb),.08);
		gap: 12px;
	}
	.eekad-feat__card:last-child { border-bottom: none; }
	.eekad-feat__card.is-active {
		background: rgba(var(--c-border-rgb),.06);
		padding-top: 12px;
		border-top: none;
	}
	.eekad-feat__card-text {
		font-size: 13px;
		font-weight: 400;
		-webkit-line-clamp: 1;
	}
	.eekad-feat__card-thumb { display: none; }
}

/* =============================================================
 * Site footer — surveillance/intel dark theme matching the rest
 * of the site. Top tech strip + 3-column main + bottom bar.
 * =========================================================== */
.eekad-site-footer {
	background: var(--c-bg-alt);
	color: var(--c-text-2);
	border-top: 1px solid rgba(var(--c-border-rgb), .08);
	font-family: var(--font-sans);
}

/* --- Top tech strip --- */
/* --- Main grid ---
   Two-row layout so the social row tucks under the brand column on
   desktop while sitting between nav and newsletter when stacked on
   mobile (HTML order does that for free). */
.eekad-site-footer__main {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr;
	grid-template-rows: auto auto;
	gap: 32px 64px;
	padding-block: 72px 56px;
	align-items: start;
}
.eekad-site-footer__brand        { grid-column: 1; grid-row: 1; }
.eekad-site-footer__social-row   { grid-column: 1; grid-row: 2; }
.eekad-site-footer__nav          { grid-column: 2; grid-row: 1 / span 2; }
.eekad-site-footer__newsletter   { grid-column: 3; grid-row: 1 / span 2; }

/* --- Brand column --- */
.eekad-site-footer__logo {
	display: inline-block;
	color: var(--c-text);
	margin-block-end: 20px;
	transition: color .15s ease;
}
.eekad-site-footer__logo:hover { color: var(--c-lime); }
.eekad-site-footer__logo svg {
	display: block;
	height: 36px;
	width: auto;
}
.eekad-site-footer__logo-text {
	font-size: 28px;
	font-weight: 700;
}
.eekad-site-footer__tagline {
	margin: 0 0 24px;
	max-width: 360px;
	color: var(--c-text-3);
	font-size: 15px;
	line-height: 1.7;
}
.eekad-site-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 12px;
}
.eekad-site-footer__social a {
	display: inline-flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(var(--c-border-rgb), .18);
	color: var(--c-text-2);
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.eekad-site-footer__social a:hover {
	background: var(--c-lime);
	border-color: var(--c-lime);
	color: var(--c-text-on-accent);
}
.eekad-site-footer__social svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* --- Section headings (lime accent line) --- */
.eekad-site-footer__heading {
	margin: 0 0 20px;
	color: var(--c-text);
	font-size: 16px;
	font-weight: 700;
	position: relative;
	padding-inline-start: 14px;
}
.eekad-site-footer__heading::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 4px;
	bottom: 4px;
	width: 3px;
	background: var(--c-lime);
}

/* --- Nav menu --- */
.eekad-site-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 24px;
}
.eekad-site-footer__menu li { margin: 0; }
.eekad-site-footer__menu a {
	color: var(--c-text-2);
	text-decoration: none;
	font-size: 15px;
	line-height: 1.6;
	transition: color .15s ease;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.eekad-site-footer__menu a::before {
	content: "›";
	color: var(--c-lime);
	font-size: 16px;
	line-height: 1;
}
.eekad-site-footer__menu a:hover { color: var(--c-lime); }

/* --- Newsletter --- */
.eekad-site-footer__newsletter-blurb {
	margin: 0 0 16px;
	color: var(--c-text-3);
	font-size: 14px;
	line-height: 1.6;
}
.eekad-site-footer__form {
	display: flex;
	gap: 0;
	max-width: 420px;
	border: 1px solid rgba(var(--c-border-rgb), .2);
	background: rgba(var(--c-border-rgb), .04);
	transition: border-color .15s ease;
}
.eekad-site-footer__form:focus-within {
	border-color: var(--c-lime);
}
.eekad-site-footer__form input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 16px;
	background: transparent;
	border: none;
	color: var(--c-text);
	font-family: inherit;
	font-size: 14px;
}
.eekad-site-footer__form input::placeholder {
	color: var(--c-text-muted);
}
.eekad-site-footer__form input:focus { outline: none; }
.eekad-site-footer__form button {
	padding: 10px 24px;
	background: var(--c-text);
	color: var(--c-bg-base);
	border: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease;
	white-space: nowrap;
}
.eekad-site-footer__form button:hover {
	background: #ffffff;
}
.eekad-site-footer__form button:disabled {
	cursor: wait;
	opacity: .65;
}
.eekad-newsletter-honeypot {
	position: absolute !important;
	inline-size: 1px !important;
	block-size: 1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}
.eekad-site-footer__form-feedback {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.5;
}
.eekad-site-footer__form-feedback.is-success { color: var(--c-lime); }
.eekad-site-footer__form-feedback.is-error { color: #ff8d8d; }

/* --- Bottom bar --- */
.eekad-site-footer__bottom {
	border-top: 1px solid rgba(var(--c-border-rgb), .08);
	background: var(--c-bg-base);
}
.eekad-site-footer__bottom-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding-block: 20px;
	flex-wrap: wrap;
}
.eekad-site-footer__copy {
	margin: 0;
	color: var(--c-text-muted);
	font-size: 13px;
}
.eekad-site-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 24px;
}
.eekad-site-footer__legal a {
	color: var(--c-text-muted);
	text-decoration: none;
	font-size: 13px;
	transition: color .15s ease;
}
.eekad-site-footer__legal a:hover { color: var(--c-lime); }

/* --- Footer mobile --- */
@media (max-width: 768px) {
	.eekad-site-footer__main {
		grid-template-columns: 1fr;
		gap: 40px;
		padding-block: 48px 40px;
		padding-inline: 20px;
	}

	/* Brand: the footer's closing signature — bigger mark, placed
	   after the links and newsletter (order), like a sign-off. */
	.eekad-site-footer__brand {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		order: 3;
		padding-block-start: 8px;
	}
	.eekad-site-footer__menu-col,
	.eekad-site-footer__nav {
		order: 1;
	}
	.eekad-site-footer__newsletter {
		order: 2;
	}
	.eekad-site-footer__logo {
		margin-block-end: 18px;
	}
	.eekad-site-footer__logo svg {
		height: 56px;
	}
	.eekad-site-footer__tagline {
		max-width: 320px;
		font-size: 15px;
		margin-block-end: 22px;
	}
	.eekad-site-footer__social {
		justify-content: center;
		gap: 10px;
	}
	.eekad-site-footer__social a {
		width: 38px;
		height: 38px;
	}

	/* Nav: single column, tighter */
	.eekad-site-footer__menu {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.eekad-site-footer__menu li {
		border-bottom: 1px solid rgba(var(--c-border-rgb), .06);
	}
	.eekad-site-footer__menu li:last-child {
		border-bottom: none;
	}
	.eekad-site-footer__menu a {
		padding: 14px 0;
		font-size: 15px;
		width: 100%;
	}

	/* Newsletter: stack form vertically */
	.eekad-site-footer__newsletter-blurb {
		font-size: 14px;
	}
	.eekad-site-footer__form {
		max-width: 420px;
	}
	.eekad-site-footer__form input {
		padding: 10px 12px;
		font-size: 13px;
	}
	.eekad-site-footer__form button {
		padding: 10px 16px;
		font-size: 13px;
	}

	.eekad-site-footer__bottom-inner {
		padding-inline: 20px;
	}
	.eekad-site-footer__legal {
		gap: 16px;
	}
}

/* --- Responsive --- */
@media (max-width: 900px) {
	.eekad-site-footer__main {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: 48px;
		padding-block: 56px 40px;
	}
	/* Reset desktop placement so HTML order drives the mobile stack:
	   brand → nav → social → newsletter. */
	.eekad-site-footer__brand,
	.eekad-site-footer__social-row,
	.eekad-site-footer__nav,
	.eekad-site-footer__newsletter {
		grid-column: auto;
		grid-row: auto;
	}
	.eekad-site-footer__social-row { display: flex; justify-content: center; }
	.eekad-site-footer__tagline { max-width: none; }
}
@media (max-width: 600px) {
	.eekad-site-footer__menu { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.eekad-site-footer__main { gap: 32px; padding-block: 40px 32px; }
	.eekad-site-footer__tagline { font-size: 14px; }
	.eekad-site-footer__heading { font-size: 16px; }
	.eekad-site-footer__form input { padding: 8px 10px; font-size: 13px; }
	.eekad-site-footer__form button { padding: 8px 14px; font-size: 13px; }
	.eekad-site-footer__bottom-inner { padding-block: 16px; }
	.eekad-site-footer__legal { gap: 16px; flex-wrap: wrap; }
	.eekad-site-footer__copy { font-size: 12px; }
}

/* =============================================================
 * Investigation single template — 3-column article grid
 *
 * Every direct child of .eekad-investigation__body lands in one of
 * three named columns:
 *   narrow  (~720px max)  default
 *   wide    (~960px max)  alignwide / .is-wide
 *   bleed   (100vw)       alignfull / .is-bleed
 * Block CSS only needs to size the inner content; placement is
 * handled by the grid here so blocks stay decoupled.
 * =========================================================== */
.eekad-investigation {
	background: var(--c-bg-alt);
	color: var(--c-text-2);
	padding-block: 0 120px;
}
.eekad-investigation__body {
	--iv-row-gap: 28px;
	display: grid;
	grid-template-columns:
		[bleed-start]
			minmax(var(--container-px), 1fr)
		[wide-start]
			minmax(0, 120px)
		[narrow-start]
			minmax(0, 720px)
		[narrow-end]
			minmax(0, 120px)
		[wide-end]
			minmax(var(--container-px), 1fr)
		[bleed-end];
	row-gap: var(--iv-row-gap);
}
.eekad-investigation__body > * {
	grid-column: narrow;
	min-width: 0;
}

/* Two immersive sequences in a row read as one continuous piece of cinema —
   the spacing between them shows as a band of empty page behind the plates.
   Grid gaps can't be suppressed per item, so the pair drops the margins that
   face each other (the phone layout adds some) and the following sequence
   pulls itself back up by exactly one row gap. Only immersive-to-immersive:
   any other neighbour keeps the normal article rhythm. */
.eekad-investigation__body > .eekad-iv-immersive:has(+ .eekad-iv-immersive) {
	margin-block-end: 0;
}
.eekad-investigation__body > .eekad-iv-immersive + .eekad-iv-immersive {
	margin-block-start: calc(-1 * var(--iv-row-gap));
}
.eekad-investigation__body > .alignwide,
.eekad-investigation__body > .is-wide {
	grid-column: wide;
}
.eekad-investigation__body > .alignfull,
.eekad-investigation__body > .is-bleed {
	grid-column: bleed;
}

/* Evidence blocks that should always sit in the narrow column for
   consistent article rhythm, even on legacy posts that saved them
   with .alignwide / .alignfull. Higher specificity beats the generic
   alignwide / alignfull rules above. The "big moments" (network-map,
   map, gallery, cover, immersive-scroll, sticky-scroll) keep their
   wide / full options. */
.eekad-investigation__body > .alignwide.eekad-iv-ba,
.eekad-investigation__body > .alignfull.eekad-iv-ba,
.eekad-investigation__body > .alignwide.eekad-iv-claim-verdict,
.eekad-investigation__body > .alignfull.eekad-iv-claim-verdict,
.eekad-investigation__body > .alignwide.eekad-iv-verification-basic,
.eekad-investigation__body > .alignfull.eekad-iv-verification-basic,
.eekad-investigation__body > .alignwide.eekad-iv-pullquote,
.eekad-investigation__body > .alignfull.eekad-iv-pullquote,
.eekad-investigation__body > .alignwide.eekad-iv-sources,
.eekad-investigation__body > .alignfull.eekad-iv-sources,
.eekad-investigation__body > .alignwide.eekad-iv-stats,
.eekad-investigation__body > .alignfull.eekad-iv-stats,
.eekad-investigation__body > .alignwide.eekad-iv-timeline,
.eekad-investigation__body > .alignfull.eekad-iv-timeline,
.eekad-investigation__body > .is-wide.eekad-iv-ba,
.eekad-investigation__body > .is-bleed.eekad-iv-ba {
	grid-column: narrow;
}

@media (max-width: 768px) {
	.eekad-investigation__body {
		grid-template-columns:
			[bleed-start]
				var(--container-px)
			[wide-start narrow-start]
				1fr
			[narrow-end wide-end]
				var(--container-px)
			[bleed-end];
	}
}

/* Default block typography — applies to core paragraph/heading/list. */
.eekad-investigation__body p,
.eekad-investigation__body li {
	font-family: var(--font-sans);
	font-size: var(--fs-article);
	font-weight: 400;
	line-height: 1.85;
	text-align: justify;
	text-align-last: start;
	color: var(--c-text-2);
	margin: 0;
}
.eekad-investigation__body h2,
.eekad-investigation__body h3 {
	font-family: var(--font-sans);
	color: var(--c-text);
	margin: 0;
}
.eekad-investigation__body h2 { font-size: 32px; line-height: 1.25; font-weight: 700; }
.eekad-investigation__body h3 { font-size: 24px; line-height: 1.3; font-weight: 700; }
.eekad-investigation__body a {
	color: var(--c-lime);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
.eekad-investigation__body a:hover { color: var(--c-text); }
/* Third-party embeds are not prose and style their own links. Without this
   exception the lime prose colour paints the raw blockquote a platform ships
   before its script swaps in an iframe — a beat of lime hashtags inside the
   card. Lives here, beside the rule it excepts, because the block's own
   stylesheet ties this selector on specificity and loses on load order. */
.eekad-investigation__body .eekad-iv-social__embed a,
.eekad-investigation__body .eekad-iv-social-group__embed a {
	color: inherit;
	text-decoration: none;
}
.eekad-investigation__body ul,
.eekad-investigation__body ol {
	margin: 0;
	padding-inline-start: 24px;
}
.eekad-investigation__body ul li + li,
.eekad-investigation__body ol li + li {
	margin-top: .6em;
}

/* --- Cover block — full-bleed dossier hero --- */
.eekad-iv-cover {
	position: relative;
	min-height: 720px;
	display: flex;
	align-items: flex-end;
	color: var(--c-text);
	overflow: hidden;
	isolation: isolate;
	margin-block: 0;
	padding-block-end: 32px;
}
@media (min-width: 801px) {
	.eekad-iv-cover {
		min-height: max(720px, 100vh);
		min-height: max(720px, 100svh);
	}
}
.eekad-iv-cover__bg {
	position: absolute;
	inset: 0;
	background-image: var(--iv-cover-bg);
	background-size: cover;
	background-position: center;
	z-index: -2;
}
/* Background video shares the still's layer and follows it in the DOM, so it
   paints over the poster once decoding starts and the cover is never blank.
   Same cover/center framing as --iv-cover-bg, so the safe area is identical. */
.eekad-iv-cover__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: -2;
	pointer-events: none;
}
/* Motion is decoration here, so it goes away entirely and the poster stands
   in — nothing is lost but the movement. */
@media (prefers-reduced-motion: reduce) {
	.eekad-iv-cover__video {
		display: none;
	}
}
.eekad-iv-cover__veil {
	position: absolute;
	inset: 0;
	/* Dissolves into the deep article canvas (bg-base, same as home). */
	background:
		linear-gradient(180deg,
			rgba(var(--c-bg-base-rgb), .55) 0%,
			rgba(var(--c-bg-base-rgb), .08) 25%,
			rgba(var(--c-bg-base-rgb), .50) 60%,
			rgba(var(--c-bg-base-rgb), .92) 80%,
			var(--c-bg-base) 95%);
	z-index: -1;
}
.eekad-iv-cover__inner {
	position: relative;
	width: 100%;
	max-width: var(--container);
	padding-block: 120px 24px;
	padding-inline: var(--container-px);
	margin-inline: auto;
}
.eekad-iv-cover__badge {
	position: relative;
	display: inline-block;
	width: 98px;
	aspect-ratio: 465 / 159;
	margin-block-end: 14px;
}
.eekad-iv-cover.has-category-trail .eekad-iv-cover__badge {
	margin-block-end: 24px;
}
.eekad-iv-cover__badge-shape {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
/* Badge inks come from the palette — the SVG carries no colors. */
.eekad-iv-cover__badge-plaque { fill: var(--c-lime); }
.eekad-iv-cover__badge-notch  { fill: var(--c-bg-elevated); }
.eekad-iv-cover__badge-label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-text-on-accent);
	font-family: var(--font-sans);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0; /* Arabic — never tracked */
}
.eekad-iv-cover__geo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-block-end: 24px;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0; /* Arabic — never tracked */
	color: var(--c-text);
}
/* Category trail styling lives in the TRAIL KIT at the end of this file —
   the OSINT dataset hero states its parent file the same way. */
.eekad-iv-cover__title {
	margin: 0 0 20px;
	font-family: var(--font-sans);
	font-weight: 700;
	/* Display scale — the article opens like a feature, not a listing.
	   Leading floor is 1.35: Somaya inks 1.04em above the baseline once a
	   diacritic is present (تُفبرك، مُنسّقة) and 0.29em below, so a
	   1.2 line box is shorter than the type it has to hold and
	   consecutive lines collide. 1.35 is the first ratio that clears. */
	font-size: clamp(38px, 5vw, 72px);
	line-height: 1.35;
	color: var(--c-text);
	max-width: 42ch;
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.eekad-iv-cover__kicker {
	margin: 0 0 32px;
	max-width: 60ch;
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.55;
	color: var(--c-text-2);
}
.eekad-iv-cover__meta {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(var(--c-border-rgb), .15);
}
.eekad-iv-cover__date {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	color: var(--c-text-3);
}
.eekad-share {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	line-height: 1;
	position: relative;
	z-index: 5;
}
.eekad-share__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--c-text-3);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: color .2s ease, opacity .2s ease;
}
.eekad-share__button:hover,
.eekad-share.is-open .eekad-share__button {
	color: var(--c-lime);
}
.eekad-share__button svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}
.eekad-share__menu {
	position: absolute;
	inset-inline-start: 0;
	top: calc(100% + 10px);
	width: min(280px, calc(100vw - 32px));
	padding: 10px;
	background: var(--c-bg-elevated);
	border: 1px solid rgba(var(--c-border-rgb), .14);
	box-shadow: 0 18px 60px rgba(0, 0, 0, .36);
	color: var(--c-text);
}
.eekad-share__menu::before {
	content: "";
	position: absolute;
	inset-inline-start: 22px;
	top: -7px;
	width: 12px;
	height: 12px;
	background: var(--c-bg-elevated);
	border-block-start: 1px solid rgba(var(--c-border-rgb), .14);
	border-inline-start: 1px solid rgba(var(--c-border-rgb), .14);
	transform: rotate(45deg);
}
.eekad-share__menu-title {
	padding: 8px 10px 10px;
	color: var(--c-text-muted);
	font-family: var(--font-mono);
	font-size: 12px;
}
.eekad-share__item {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 42px;
	padding: 9px 10px;
	border: 0;
	border-block-start: 1px solid rgba(var(--c-border-rgb), .08);
	background: transparent;
	color: var(--c-text);
	font: inherit;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.eekad-share__item:hover {
	background: rgba(var(--c-border-rgb), .06);
	color: var(--c-lime);
}

/* --- Lead block --- */
.eekad-iv-lead {
	font-family: var(--font-sans);
	font-size: clamp(21px, 2vw, 28px);
	font-weight: 300;
	line-height: 1.7;
	color: var(--c-text);
	margin: 0;
	padding-inline-start: 28px;
	padding-block-start: 20px;
	position: relative;
}
/* The block renders its text in a <p> inside this wrapper, and the body's
   generic ".eekad-investigation__body p" rule reaches that paragraph — a
   rule that matches always beats an inherited value, so the lead was
   silently painted as body prose. Hand the paragraph its parent's
   typography back. Values stay inherited rather than restated so the base
   and body.single sizes above remain the single source of truth. */
.eekad-iv-lead p {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	/* Justified, like the prose it opens — user-chosen, same as the body. */
	text-align: justify;
	text-align-last: start;
	margin: 0;
}
.eekad-iv-cover + .eekad-iv-lead {
	margin-block-start: 0;
}
.eekad-iv-lead::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	inset-block-end: 0;
	width: 2px;
	/* Neutral structural rule — lime stays reserved for the semantic
	   verdict-severity bar in the fact-check blocks. */
	background: rgba(var(--c-border-rgb), 0.4);
}
/* Emphasised phrases: weight + a quiet lime underline, not a highlighter
   block (lime restraint — reserved for interactive/stateful/semantic). */
.eekad-iv-lead strong,
.eekad-iv-lead mark {
	font-weight: 600;
	color: var(--c-text);
	background: none;
	text-decoration: underline;
	text-decoration-color: var(--c-lime);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.22em;
}

/* --- Section heading block --- */
/* Spacing rhythm note:
 * Block-to-block gaps come from `.eekad-investigation__body { row-gap }`.
 * Per-block top/bottom margins compounded with row-gap and made the
 * vertical rhythm unpredictable, so they're all 0. Headings get extra
 * breathing room ABOVE via padding, so the heading clings to its
 * following content (tight bottom) and chapter breaks stay visible. */
.eekad-iv-section-heading {
	position: relative;
	margin: 0;
	padding-block-start: 28px;
	border-block-start: 1px solid var(--iv-hairline);
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: clamp(28px, 3.2vw, 38px);
	line-height: 1.35; /* Somaya leading floor — see cover title */
	letter-spacing: 0; /* Arabic — never tracked */
	color: var(--c-text);
	scroll-margin-top: 96px;
}

/* --- Floating table of contents ---
   The panel floats in the page margin, where the only thing behind it is the
   flat canvas — so a blur has nothing to sample and a *dark* translucent
   surface just reads as slightly-off-black. It is lit instead: the site's
   white-based glass film (the same material every card uses) over a mostly
   opaque base, which lifts the panel off the canvas rather than sinking it,
   with the film falling off downward so the top edge catches the light.
   The blur is kept for the moments a full-bleed figure does scroll past
   underneath; it costs nothing the rest of the time. */
.eekad-toc {
	position: fixed;
	top: 50%;
	inset-inline-start: clamp(12px, 2vw, 32px);
	transform: translateY(-50%);
	z-index: 900;
	width: 232px;
	max-height: 72vh;
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, .055),
			rgba(255, 255, 255, .022)
		),
		rgba(var(--c-bg-alt-rgb), .82);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .07),
		0 24px 56px -24px rgba(0, 0, 0, .65);
	/* No horizontal padding: the inset lives on the rows instead, so the
	   active row's fill can span the full width. A fill that stops short
	   of the edges would draw a second box inside this one. */
	padding: 18px 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--c-border-rgb), .12) transparent;
	transition: opacity .35s ease, transform .35s ease;
}
@media (prefers-reduced-transparency: reduce) {
	.eekad-toc {
		background: var(--c-bg-elevated);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}
.eekad-toc.is-hidden {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%) translateX(20px);
}
.eekad-toc__head {
	margin-block-end: 12px;
	padding-inline: 18px;
}
.eekad-toc__label {
	font-family: var(--font-sans);
	font-size: 12px; /* shared kicker recipe */
	font-weight: 700;
	letter-spacing: 0; /* Arabic — never tracked */
	color: var(--c-text-muted);
}
.eekad-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.eekad-toc__list[hidden] { display: none; }
.eekad-toc__item {
	margin: 0;
}
.eekad-toc__link {
	display: block;
	padding: 9px 18px;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--c-text-muted);
	text-decoration: none;
	transition: color .2s ease, background .2s ease;
}
.eekad-toc__link:hover {
	color: var(--c-text);
	background: rgba(255, 255, 255, .04);
}
.eekad-toc__link:focus-visible {
	outline: 2px solid var(--c-lime);
	outline-offset: -2px;
}
/* Where you are reads as a selected row, not a card: the fill spans the
   panel edge to edge and carries no border of its own, so the panel stays
   the only box on screen. Selection is still contrast rather than colour —
   the text goes to full white and 700 while everything else stays muted. */
.eekad-toc__link.is-active {
	color: var(--c-text);
	font-weight: 700;
	background: rgba(255, 255, 255, .08);
}
@media (max-width: 1400px) {
	.eekad-toc { display: none; }
}

/* --- Pull quote block — editorial, no card chrome --- */
.eekad-iv-pullquote {
	margin: 0;
	padding: 0;
	background: transparent;
	color: var(--c-text);
}
/* Big lime quote mark stacked above the text. It sits flush with the
   leading edge of the text column so the prose itself stays aligned
   with the surrounding body paragraphs. The negative margin-block-end
   pulls the text up into the empty descender space below the glyph
   so they sit close, not separated by a half-empty line-box. */
.eekad-iv-pullquote::before {
	content: "\201D"; /* Arabic uses the closing glyph as the opening mark */
	display: block;
	font-family: var(--font-sans);
	font-size: clamp(80px, 8vw, 110px);
	font-weight: 700;
	line-height: 1;
	color: rgba(var(--c-border-rgb), 0.18); /* ghost glyph — lime is not decoration */
	margin-block-end: -0.42em;
	pointer-events: none;
	user-select: none;
}
.eekad-iv-pullquote__text {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 500;
	/* Body prose is 19px — the quote needs to sit clearly above that. */
	font-size: clamp(26px, 2.6vw, 36px);
	line-height: 1.5;
	color: var(--c-text);
}
.eekad-iv-pullquote__cite {
	display: block;
	margin-top: 28px;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0; /* Arabic — never tracked */
	color: var(--c-text-muted);
}
.eekad-iv-pullquote__cite::before {
	content: "— ";
}

/* --- Verification / Claim-Verdict — the "Eekad ruling" ------------
   A dossier-framed fact-check. Severity colour is the one earned loud
   moment: it fills the verdict stamp and tints the verdict word.
   No visible borders — depth comes from a solid panel + soft shadow. */

.eekad-iv-claim-verdict.is-false,
.eekad-iv-verification-basic.is-false      { --verdict-color: var(--verdict-false); }
.eekad-iv-claim-verdict.is-misleading,
.eekad-iv-verification-basic.is-misleading { --verdict-color: var(--verdict-misleading); }
.eekad-iv-claim-verdict.is-true,
.eekad-iv-verification-basic.is-true       { --verdict-color: var(--verdict-true); }
.eekad-iv-claim-verdict.is-unverified,
.eekad-iv-verification-basic.is-unverified { --verdict-color: var(--verdict-unverified); }

/* Shared panel — a solid dossier surface. Depth from a top inner
   highlight + a soft drop shadow, no border. */
.eekad-iv-claim-verdict,
.eekad-iv-verification-basic {
	position: relative;
	margin: 0;
	background: var(--c-bg-surface);
	padding: clamp(28px, 3.4vw, 40px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 18px 48px -22px rgba(0, 0, 0, 0.7);
}

/* The verdict stamp — a filled severity square with the glyph knocked
   out of it. The signature ruling object. */
.eekad-iv-claim-verdict__stamp,
.eekad-iv-verification-basic__stamp {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	background: var(--verdict-color, var(--c-text-muted));
	color: var(--c-bg-base);
}
.eekad-verdict-glyph {
	width: 30px;
	height: 30px;
	display: block;
}

/* Verdict label + word (shared). */
.eekad-iv-claim-verdict__label,
.eekad-iv-verification-basic__label {
	display: block;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0; /* Arabic — never tracked */
	color: var(--c-text-muted);
	margin-bottom: 6px;
}
.eekad-iv-claim-verdict__word,
.eekad-iv-verification-basic__result {
	display: block;
	font-family: var(--font-sans);
	font-size: clamp(34px, 4.4vw, 52px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0; /* Arabic — never tracked */
	color: var(--verdict-color, var(--c-text));
}

/* ---- Full ruling (claim-verdict) ---- */
.eekad-iv-claim-verdict__claim {
	margin-block-end: 22px;
}
.eekad-iv-claim-verdict__claim-text {
	margin: 0;
	font-family: var(--font-sans);
	font-size: clamp(21px, 2.4vw, 28px);
	font-weight: 500;
	line-height: 1.45;
	color: var(--c-text);
}
.eekad-iv-claim-verdict__evidence {
	margin-block-end: 26px;
}
.eekad-iv-claim-verdict__evidence p {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.7;
	color: var(--c-text-2);
}
/* Verdict row — stamp + word, set off by a hairline above. */
.eekad-iv-claim-verdict__verdict {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-block-start: 26px;
	padding-block-start: 26px;
	border-block-start: 1px solid rgba(var(--c-border-rgb), 0.08);
}
/* Footer — source + issue date at opposite ends, quiet. */
.eekad-iv-claim-verdict__footer {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-block-start: 22px;
}
.eekad-iv-claim-verdict__source {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 500;
	color: var(--c-text-muted);
	text-align: start;
}
.eekad-iv-claim-verdict__source::before {
	content: 'المصدر: ';
	color: var(--c-text-faint);
	font-weight: 600;
	letter-spacing: 0; /* Arabic — never tracked */
	margin-inline-end: 4px;
}
.eekad-iv-claim-verdict__source a {
	color: var(--c-text);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--dur-quick, .18s) var(--ease-out, ease);
}
.eekad-iv-claim-verdict__source a:hover {
	text-decoration-color: var(--c-lime);
}
.eekad-iv-claim-verdict__issued {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--c-text-faint);
	white-space: nowrap;
	margin-inline-start: auto;
}

/* ---- Compact ruling (verification-basic) — a balanced verdict bar:
   the rating on the leading edge, the stamp anchoring the trailing edge. */
.eekad-iv-verification-basic {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.eekad-iv-verification-basic__body {
	display: grid;
	gap: 8px;
}
.eekad-iv-verification-basic__stamp {
	width: 68px;
	height: 68px;
}
.eekad-iv-verification-basic .eekad-verdict-glyph {
	width: 36px;
	height: 36px;
}

@media (max-width: 600px) {
	.eekad-iv-claim-verdict__stamp,
	.eekad-iv-verification-basic__stamp { width: 52px; height: 52px; }
	.eekad-verdict-glyph,
	.eekad-iv-verification-basic .eekad-verdict-glyph { width: 28px; height: 28px; }
	.eekad-iv-claim-verdict__verdict { gap: 14px; }
	.eekad-iv-verification-basic { gap: 16px; }
}
/* --- Figure block — evidence exhibit treatment --- */
.eekad-iv-figure {
	margin: 0;
	background: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
	overflow: visible;
}

/* Image area — Facebook-style crop. Tall images render at natural
   aspect at 100% width but the container clips at max-height, so the
   user sees the top portion (the "preview") in the article and the
   full image in the lightbox. Short images fall well under the cap and
   render whole. */
.eekad-iv-figure__media {
	display: block;
	overflow: hidden;
	max-height: var(--eekad-figure-cap, 560px);
	background: rgba(var(--c-bg-alt-rgb), 0.45);
	position: relative;
}
.eekad-iv-figure__media img {
	width: 100%;
	height: auto;
	display: block;
	cursor: zoom-in;
}
.eekad-iv-figure.has-overflow:not(.is-expanded) .eekad-iv-figure__media::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 120px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(var(--c-bg-base-rgb), 0), rgba(var(--c-bg-base-rgb), 0.82));
}
.eekad-iv-figure.is-expanded .eekad-iv-figure__media {
	max-height: none;
	overflow: visible;
}
.eekad-iv-figure__expand {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid rgba(var(--c-border-rgb), 0.22);
	border-radius: 0; /* sharp — the house has no capsules */
	background: rgba(var(--c-bg-base-rgb), 0.82);
	color: var(--c-text-1);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(12px);
	cursor: pointer;
	transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.eekad-iv-figure__expand[hidden] {
	display: none;
}
.eekad-iv-figure__expand:hover,
.eekad-iv-figure__expand:focus-visible {
	color: var(--c-lime);
	border-color: rgba(var(--c-lime-rgb), 0.72);
	background: rgba(var(--c-bg-base-rgb), 0.92);
	transform: translateX(-50%) translateY(-2px);
	outline: none;
}
.eekad-iv-figure__expand-arrow {
	font-size: 20px;
	line-height: 0.8;
}
.eekad-iv-figure.is-expanded .eekad-iv-figure__expand {
	position: relative;
	left: auto;
	bottom: auto;
	display: flex;
	width: max-content;
	max-width: calc(100% - 24px);
	margin: 18px auto 0;
	transform: none;
}
.eekad-iv-figure.is-expanded .eekad-iv-figure__expand:hover,
.eekad-iv-figure.is-expanded .eekad-iv-figure__expand:focus-visible {
	transform: translateY(-2px);
}

/* Caption — reads as article metadata under the media, not a framed card footer. */
.eekad-iv-figure__caption {
	overflow-wrap: anywhere; /* long URLs/credits must never widen the page */
	padding: 12px 0 0;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.55;
	color: var(--c-text-muted);
	display: block;
}
.eekad-iv-figure__num {
	color: var(--c-text-3);
	font-weight: 600;
	margin-inline-end: 6px;
}
.eekad-iv-figure__num::after {
	content: " · ";
	color: var(--c-text-faint);
	margin-inline-start: 4px;
}
.eekad-iv-figure__caption-text {
	color: var(--c-text-2);
}
.eekad-iv-figure__credit {
	display: block;
	margin-top: 4px;
	font-family: var(--font-sans);
	font-size: 12px;
	color: var(--c-text-faint);
}

/* Mobile */
@media (max-width: 600px) {
	.eekad-iv-figure { padding: 0; }
	.eekad-iv-figure__caption { font-size: 13px; padding: 12px 0 0; }
	.eekad-iv-figure__expand {
		bottom: 12px;
		min-height: 40px;
		padding: 0 14px;
		font-size: 13px;
	}
}

/* Social block styles now live in blocks/social/style.css (auto-enqueued via block.json). */

/* ── Figure carousel ── */
/* Exhibit header — a quiet metadata bar: group label on the start side,
   slide position on the end side, separated by a hairline. */
.eekad-iv-carousel .eekad-iv-figure__exhibit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-block-end: 14px;
	padding-block-end: 10px;
	border-block-end: 1px solid var(--iv-hairline);
}
.eekad-iv-carousel .eekad-iv-figure__exhibit-label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0; /* Arabic — never tracked */
	color: var(--c-text-muted);
}
/* Replace the heavy ◆ glyph with a small neutral tick. */
.eekad-iv-carousel .eekad-iv-figure__exhibit-icon {
	display: inline-block;
	width: 5px;
	height: 5px;
	font-size: 0;
	background: var(--c-text-faint);
	flex-shrink: 0;
}
.eekad-iv-carousel__counter {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--c-text-faint);
	flex-shrink: 0;
}
/* Current position pops (brightness, not colour); the "/ N" stays faint. */
.eekad-iv-carousel__current {
	color: var(--c-text);
}
.eekad-iv-carousel__track-wrapper {
	position: relative;
	overflow: hidden;
}
.eekad-iv-carousel__track {
	display: flex;
	transition: transform .35s ease;
}
.eekad-iv-carousel__slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Fixed slot keeps the carousel from snapping to the tallest image.
	   Mixed portrait/landscape evidence all renders inside the same box. */
	aspect-ratio: 4 / 3;
	max-height: 75vh;
	overflow: hidden;
	background: var(--c-bg-base);
}
/* Blurred fill of the same image — turns the letterbox void into a soft
   ambient backdrop. Scaled + dark-scrimmed so it never competes with the
   evidence (and stays muted for UI screenshots). */
.eekad-iv-carousel__slide::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--slide-bg);
	background-size: cover;
	background-position: center;
	filter: blur(34px) saturate(1.1);
	transform: scale(1.25);
	opacity: .38;
}
.eekad-iv-carousel__slide::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(var(--c-bg-base-rgb), .42);
}
.eekad-iv-carousel__slide img {
	position: relative;
	z-index: 1;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	cursor: zoom-in;
}
.eekad-iv-carousel__dock {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 12px 16px 10px;
	/* Defined frosted bar so the thumbs read as a control strip, not as
	   faint shapes floating over the image. */
	background: linear-gradient(to top,
		rgba(var(--c-bg-base-rgb), .88) 0%,
		rgba(var(--c-bg-base-rgb), .55) 65%,
		transparent 100%);
	opacity: 0;
	transition: opacity .6s ease;
}
.eekad-iv-carousel__dock.is-visible {
	opacity: 1;
}
.eekad-iv-carousel__thumb {
	flex: 0 0 56px;
	height: 40px;
	padding: 0;
	/* Always a faint border so inactive thumbs stay defined. */
	border: 1px solid rgba(var(--c-border-rgb), .28);
	background: rgba(var(--c-bg-base-rgb), .4);
	cursor: pointer;
	overflow: hidden;
	opacity: .6;
	transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}
.eekad-iv-carousel__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Active thumb lifts and gets the lime frame — obvious at a glance. */
.eekad-iv-carousel__thumb.is-active {
	border: 2px solid var(--c-lime);
	opacity: 1;
	transform: translateY(-3px);
}
@keyframes dock-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(var(--c-lime-rgb), 0); }
	50%      { box-shadow: 0 0 0 3px rgba(var(--c-lime-rgb), .35); }
}
.eekad-iv-carousel__dock.is-visible .eekad-iv-carousel__thumb.is-active {
	animation: dock-pulse .8s ease 1;
}
.eekad-iv-carousel__thumb:hover {
	opacity: .85;
}
.eekad-iv-carousel__caption-slide {
	display: none;
}
.eekad-iv-carousel__caption-slide.is-active {
	display: inline;
}

@media (max-width: 600px) {
	.eekad-iv-carousel__thumb { flex: 0 0 44px; height: 32px; }
	.eekad-iv-carousel__dock { padding: 6px 10px; gap: 3px; }
}

/* =============================================================
 * Investigation — Phase 2 blocks
 * =========================================================== */

/* ----- Findings / stats grid ------------------------------- */
.eekad-iv-stats {
	display: grid;
	gap: 24px;
	margin: 0;
	counter-reset: eekad-stat;
}
.eekad-iv-stats.has-cols-2 { grid-template-columns: repeat(2, 1fr); }
.eekad-iv-stats.has-cols-3 { grid-template-columns: repeat(3, 1fr); }
.eekad-iv-stats.has-cols-4 { grid-template-columns: repeat(4, 1fr); }

.eekad-iv-stat-card {
	position: relative;
	padding: var(--iv-pad);
	background: var(--iv-card-bg);
	border: var(--iv-card-border);
	display: flex;
	flex-direction: column;
	gap: 12px;
	counter-increment: eekad-stat;
}
.eekad-iv-stat-card__num {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--c-text-faint);
}
/* Auto-numbered cards: ignore stored value and use the CSS counter. */
.eekad-iv-stat-card__num.is-auto::before {
	content: counter(eekad-stat, decimal-leading-zero);
}
.eekad-iv-stat-card__label {
	font-family: var(--font-sans);
	font-size: 28px;
	font-weight: 700;
	color: var(--c-text);
	line-height: 1.2;
}
.eekad-iv-stat-card__body {
	font-size: 15px;
	color: var(--c-text-3);
	margin: 0;
}

/* Headline mode — manual `number` becomes the dominant figure;
   label collapses to a small unit eyebrow underneath. */
.eekad-iv-stat-card.is-headline {
	gap: 6px;
}
.eekad-iv-stat-card.is-headline .eekad-iv-stat-card__num {
	font-size: clamp(48px, 6vw, 76px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--c-text);
}
.eekad-iv-stat-card.is-headline .eekad-iv-stat-card__label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0; /* Arabic — never tracked */
	color: var(--c-text-faint);
	margin-bottom: 10px;
}
.eekad-iv-stat-card.is-headline .eekad-iv-stat-card__body {
	font-size: 15px;
	color: var(--c-text-2);
	line-height: 1.55;
}

/* ----- Timeline -------------------------------------------- */
/* Note: selectors below use `ol.eekad-iv-timeline` to outrank
   `.eekad-investigation__body ol` (which sets padding-inline-start: 24px
   for prose lists). Without this, the line and the markers end up offset
   from each other by the body OL padding. */
ol.eekad-iv-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	--timeline-fill: 0px;
}
.eekad-investigation__body ol.eekad-iv-timeline li + li {
	margin-top: 0;
}
/* Base track — runs only between the FIRST and LAST marker centers.
   Endpoints are measured by JS and exposed as CSS variables. */
.eekad-iv-timeline::before {
	content: '';
	position: absolute;
	top: var(--timeline-track-start, 0);
	height: calc(var(--timeline-track-end, 0px) - var(--timeline-track-start, 0px));
	inset-inline-start: 11px;
	width: 2px;
	background: rgba(var(--c-border-rgb), 0.18);
	z-index: 0;
}
/* Progress fill — lime line that grows from the first marker down to the
   current marker as the reader scrolls. */
.eekad-iv-timeline::after {
	content: '';
	position: absolute;
	top: var(--timeline-track-start, 0);
	height: max(0px, calc(var(--timeline-fill, 0px) - var(--timeline-track-start, 0px)));
	inset-inline-start: 11px;
	width: 2px;
	background: var(--c-lime);
	transition: height 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
	z-index: 1;
}
.eekad-iv-timeline__event {
	position: relative;
	padding-inline-start: 56px;
	padding-block: 16px;
}
/* Content (date/title/body) wrapper — hidden until this event becomes
   the current one. Reaching the dot reveals the entry. */
.eekad-iv-timeline__content {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.6s ease,
		transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.eekad-iv-timeline__event.is-current .eekad-iv-timeline__content,
.eekad-iv-timeline__event.is-passed  .eekad-iv-timeline__content {
	opacity: 1;
	transform: translateY(0);
}
/* Marker — solid-fill ring. Background matches the page so the line
   passing behind it is *hidden* by the marker disc; only the segment of
   line above and below the disc remains visible, which makes the dots
   look like beads strung along the line. */
.eekad-iv-timeline__marker {
	position: absolute;
	box-sizing: border-box;
	inset-inline-start: 0;
	inset-block-start: 22px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--c-bg-base);
	border: 3px solid rgba(var(--c-border-rgb), 0.28);
	z-index: 2;
	transition:
		background 0.5s ease,
		border-color 0.5s ease,
		box-shadow 0.5s ease;
}
/* Inner dot — appears when the event is current/passed. Starts collapsed,
   scales up when its parent gets `is-current` or `is-passed`. */
.eekad-iv-timeline__marker::after {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--c-lime);
	transform: scale(0);
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Passed (the reader is below this marker) — flat filled ring, no glow. */
.eekad-iv-timeline__event.is-passed .eekad-iv-timeline__marker {
	border-color: var(--c-lime);
	background: var(--c-bg-base);
}
.eekad-iv-timeline__event.is-passed .eekad-iv-timeline__marker::after {
	transform: scale(1);
}

/* Current (the marker the reader has just reached) — filled + pulsing. */
.eekad-iv-timeline__event.is-current .eekad-iv-timeline__marker {
	border-color: var(--c-lime);
	background: var(--c-bg-base);
	animation: eekad-timeline-pulse 1.8s ease-out infinite;
}
.eekad-iv-timeline__event.is-current .eekad-iv-timeline__marker::after {
	transform: scale(1);
}

/* Single hairline ring expanding once per cycle — a quiet "live" cue,
   no persistent neon halo. */
@keyframes eekad-timeline-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(var(--c-lime-rgb), 0.35); }
	70%  { box-shadow: 0 0 0 10px rgba(var(--c-lime-rgb), 0); }
	100% { box-shadow: 0 0 0 0 rgba(var(--c-lime-rgb), 0); }
}
.eekad-iv-timeline__date {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--c-text-muted); /* progress is already lime on the track */
	margin-block-end: 6px;
}
.eekad-iv-timeline__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--c-text);
	margin: 0 0 6px;
}
.eekad-iv-timeline__body {
	font-size: 16px;
	color: var(--c-text-3);
	margin: 0;
	line-height: 1.65;
}
/* Reduced motion — show everything immediately, no transitions */
@media (prefers-reduced-motion: reduce) {
	.eekad-iv-timeline__content {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.eekad-iv-timeline::after {
		transition: none;
	}
	.eekad-iv-timeline__marker,
	.eekad-iv-timeline__marker::after {
		transition: none;
		animation: none;
	}
	.eekad-iv-timeline__event.is-current .eekad-iv-timeline__marker {
		animation: none;
	}
}

/* ----- Evidence gallery ------------------------------------ */
/* Gallery reads as a collective evidence set without a surrounding card frame. */
.eekad-iv-gallery {
	margin: 0;
	background: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
}
.eekad-iv-gallery__label {
	display: block;
	font-family: var(--font-sans);
	font-size: 14px; /* one caption recipe — matches .eekad-iv-figure__caption */
	font-weight: 500;
	line-height: 1.55;
	color: var(--c-text-muted);
	margin-block-start: 12px;
}
.eekad-iv-gallery__grid {
	display: grid;
	gap: 14px;
}
.eekad-iv-gallery.has-cols-2 .eekad-iv-gallery__grid { grid-template-columns: repeat(2, 1fr); }
.eekad-iv-gallery.has-cols-3 .eekad-iv-gallery__grid { grid-template-columns: repeat(3, 1fr); }
.eekad-iv-gallery.has-cols-4 .eekad-iv-gallery__grid { grid-template-columns: repeat(4, 1fr); }
.eekad-iv-gallery__cell {
	margin: 0;
	display: block;
}
.eekad-iv-gallery__media {
	position: relative;
	background: var(--c-bg-surface);
	overflow: hidden;
}
.eekad-iv-gallery__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	cursor: zoom-in;
}
/* Index pill — solid #16191C fill matching how the drawer pill
   reads on its dark panel. Alpha-on-photo would vanish, so we
   bake the effective color in directly. */
.eekad-iv-gallery__seq {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	min-width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
	background: var(--c-bg-alt);
	border: 1px solid var(--c-bg-surface);
	color: var(--c-text-muted);
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0;
}
.eekad-iv-gallery__caption {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ----- Sources list — quiet reference card --------------- */
.eekad-iv-sources {
	margin: 0;
	padding: var(--iv-pad);
	background: var(--iv-card-bg);
	border: var(--iv-card-border);
	box-shadow: none;
}
.eekad-iv-sources__label {
	font-family: var(--font-sans);
	font-size: 22px;
	font-weight: 700;
	color: var(--c-text);
	margin: 0 0 20px;
}
.eekad-iv-sources__list {
	margin: 0;
	padding-inline-start: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.eekad-iv-source {
	font-size: 15px;
	color: var(--c-text-2);
	line-height: 1.6;
}
/* Type chip — neutral pill, same idiom as the evidence drawer */
.eekad-iv-source__type {
	display: inline-block;
	background: rgba(var(--c-border-rgb), 0.06);
	color: var(--c-text-muted);
	border: 1px solid rgba(var(--c-border-rgb), 0.08);
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 600;
	padding: 2px 8px;
	letter-spacing: 0; /* Arabic — never tracked */
	margin-inline-end: 8px;
	vertical-align: middle;
}
/* Single underline — keep the body <a> rule's text-decoration as
   the only underline and just retint its colour. Higher specificity
   so we win the colour from the body link rule (which would
   otherwise paint the title lime by default). */
.eekad-iv-sources a.eekad-iv-source__title {
	color: var(--c-text);
	text-decoration-color: rgba(var(--c-border-rgb), 0.3);
	transition: text-decoration-color 0.15s ease;
}
.eekad-iv-sources a.eekad-iv-source__title:hover {
	color: var(--c-text);
	text-decoration-color: var(--c-lime);
}
.eekad-iv-source__note {
	display: block;
	margin-block-start: 4px;
	color: var(--c-text-muted);
	font-size: 13px;
}

/* ----- Sticky scroll steps --------------------------------- */
.eekad-iv-sticky {
	position: relative;
	background: var(--c-bg-base);
	padding-block: 80px;
}
.eekad-iv-sticky__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding-inline: var(--container-px);
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 72px;
	align-items: start;
}
.eekad-iv-sticky.is-side-end .eekad-iv-sticky__inner { direction: ltr; }
.eekad-iv-sticky.is-side-end .eekad-iv-sticky__media,
.eekad-iv-sticky.is-side-end .eekad-iv-sticky__steps { direction: rtl; }

.eekad-iv-sticky__media-pin {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	display: flex;
	align-items: center;
	padding-block: 48px;
}
/* The evidence window: a deep glass-edged surface. No HUD brackets, no
   film vignette — the evidence itself is the interface.

   Its shape is the artwork's: sticky media is authored at 1300×1070, so
   the window matches and every step shows the full frame. Letting it
   fill the pinned viewport instead (which it did between 01113e2 and
   here) made the window portrait and cropped ~44% off each image on
   desktop and ~64% on a phone, differently at every width.

   max-width caps the box by the height the pin can actually give
   (100svh minus its 48px block padding), so on a short window the
   window shrinks and keeps its ratio rather than being squashed. */
.eekad-iv-sticky__media {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 1300 / 1070;
	max-width: calc((100svh - 96px) * 1300 / 1070);
	margin-inline: auto;
	background: var(--c-bg-base);
	overflow: hidden;
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	box-shadow: 0 40px 80px -32px rgba(0, 0, 0, 0.6);
}
.eekad-iv-sticky__media[data-scrolly-fullscreen] {
	cursor: zoom-in;
}
.eekad-iv-sticky__media[data-scrolly-fullscreen]:focus-visible {
	outline: 2px solid var(--c-lime);
	outline-offset: 4px;
}
.eekad-iv-sticky__slot {
	position: absolute;
	inset: 0;
	opacity: 0;
	z-index: 0;
	transition: opacity 0.36s var(--ease-out);
}
/* Before JS runs (or without it) the first exhibit stands in. */
.eekad-iv-sticky__slot:first-child {
	opacity: 1;
}
.eekad-iv-sticky__slot img,
.eekad-iv-sticky__slot video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Incoming media settles: a whisper of scale, no Ken Burns drift. */
	transform: scale(1.02);
	transition: transform 0.8s var(--ease-out);
}
.eekad-iv-sticky__slot.is-active img,
.eekad-iv-sticky__slot.is-active video {
	transform: scale(1);
}
/* Mobile art direction wraps the media in <picture> (a phone-only
   <source> below 800px). The wrapper must fill the slot/plate so the
   inner <img> can size to 100%. */
.eekad-iv-sticky__slot picture,
.eekad-iv-immersive__plate picture {
	display: block;
	width: 100%;
	height: 100%;
}
.eekad-iv-sticky__slot:fullscreen {
	position: fixed;
	inset: 0;
	opacity: 1;
	background: #000;
}
.eekad-iv-sticky__slot:-webkit-full-screen {
	position: fixed;
	inset: 0;
	opacity: 1;
	background: #000;
}
.eekad-iv-sticky__slot:fullscreen img,
.eekad-iv-sticky__slot:fullscreen video,
.eekad-iv-sticky__slot:-webkit-full-screen img,
.eekad-iv-sticky__slot:-webkit-full-screen video {
	object-fit: contain;
	transform: none;
}
/* Active slot — marked by the engine with .is-active (uncapped; replaced a
   per-index [data-active-step="N"] list that hard-capped the step count). */
.eekad-iv-sticky__slot.is-active {
	opacity: 1;
	z-index: 1;
}

.eekad-iv-sticky__steps {
	display: flex;
	flex-direction: column;
	gap: 50vh;
	padding-block: 22vh;
	padding-block-end: 50vh;
	counter-reset: eekad-step;
}
/* Quiet steps: no boxes — the narration sits directly on the canvas.
   The dimming of non-active steps carries both the "you are here"
   signal and the sense of progress; no extra chrome needed. Without
   JS every step stays fully readable. */
.eekad-iv-sticky__step {
	position: relative;
	opacity: 1;
	transition: opacity 0.45s var(--ease-out);
}
.eekad-iv-sticky__step.is-scroll-step-before,
.eekad-iv-sticky__step.is-scroll-step-after {
	opacity: 0.32;
}
@media (min-width: 801px) {
	.eekad-iv-sticky__step:last-child {
		transform: translateY(50%);
	}
}
/* Step label — a faint numeral above the kicker (auto counter or the
   editor's custom text, which may be Arabic — never tracked). */
.eekad-iv-sticky__step::before {
	content: attr(data-card-label);
	display: block;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	color: var(--c-text-faint);
	margin-block-end: 14px;
}
.eekad-iv-sticky__step.is-label-hidden::before {
	display: none;
}
/* Kicker — eyebrow above the step body. Lime: in the sticky layout the
   kicker names the step the pinned media is currently showing, so it
   carries the sequence's active state rather than decorating a heading. */
.eekad-iv-sticky__kicker {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--c-lime);
	margin-block-end: 18px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.eekad-iv-sticky__kicker::after {
	content: '';
	flex: 1;
	height: 1px;
	background: rgba(var(--c-border-rgb), 0.14);
}
.eekad-iv-sticky__body {
	font-size: 22px;
	color: var(--c-text);
	line-height: 1.65;
	font-weight: 400;
}

/* Reduced motion (desktop): exhibits swap with a brief fade, nothing
   travels or scales; step dimming stays (it is state, not motion). */
@media (prefers-reduced-motion: reduce) {
	.eekad-iv-sticky__slot {
		transition: opacity var(--dur-quick) var(--ease-out);
	}
	.eekad-iv-sticky__slot img,
	.eekad-iv-sticky__slot video {
		transform: none;
		transition: none;
	}
	.eekad-iv-sticky__step {
		transition: opacity var(--dur-quick) var(--ease-out);
	}
}

/* ----- Before / after slider ------------------------------- */
/* Media-led comparison: keep the stage direct and unframed. The divider and
   handle are neutral white — no decorative lime on this block. */
.eekad-iv-ba {
	margin: 0;
	display: flex;
	flex-direction: column;
	--ba-pos: 50%;
	background: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
	overflow: visible;
}

.eekad-iv-ba__stage {
	position: relative;
	overflow: hidden;
	user-select: none;
	background: var(--c-bg-base);
	aspect-ratio: 16 / 9;
}
.eekad-iv-ba__before,
.eekad-iv-ba__after {
	position: absolute;
	inset: 0;
}
.eekad-iv-ba__before img,
.eekad-iv-ba__after img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}
.eekad-iv-ba__after {
	clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
}

/* Labels and optional dates — combined badges clipped with each image side. */
.eekad-iv-ba__overlays {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
}
.eekad-iv-ba__overlays.is-before {
	clip-path: inset(0 0 0 var(--ba-pos));
}
.eekad-iv-ba__overlays.is-after {
	clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
}
.eekad-iv-ba__badge {
	position: absolute;
	inset-block-end: 18px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	color: #fff;
	background: rgba(15, 17, 20, 0.76);
	padding: 7px 12px 8px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 0; /* sharp corners, house rule */
	z-index: 4;
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.6),
		0 0 8px rgba(0, 0, 0, 0.35);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
	backdrop-filter: blur(8px);
	pointer-events: none;
}
.eekad-iv-ba__badge.is-before { inset-inline-start: 18px; }
.eekad-iv-ba__badge.is-after  { inset-inline-end: 18px; }
.eekad-iv-ba__badge-date {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: var(--c-text-2);
}
.eekad-iv-ba__badge-date::before {
	content: "";
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: .7;
}

/* Drag handle — classic white divider + white disc with black arrows */
.eekad-iv-ba__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--ba-pos);
	transform: translateX(-50%);
	width: 44px;
	background: transparent;
	border: 0;
	cursor: ew-resize;
	z-index: 3;
	padding: 0;
}
/* Solid white divider line, full height. */
.eekad-iv-ba__handle::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}
/* White disc with black left/right arrows, centered on the divider. */
.eekad-iv-ba__handle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.92);
	box-shadow:
		0 2px 10px rgba(0, 0, 0, 0.35),
		0 0 0 1px rgba(0, 0, 0, 0.06);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23111'%3E%3Cpolygon points='10,4 10,20 3,12'/%3E%3Cpolygon points='14,4 14,20 21,12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.eekad-iv-ba.is-dragging { cursor: ew-resize; }
.eekad-iv-ba__handle:hover::after,
.eekad-iv-ba.is-dragging .eekad-iv-ba__handle::after {
	transform: translate(-50%, -50%) scale(1.06);
	box-shadow:
		0 4px 14px rgba(0, 0, 0, 0.45),
		0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* Initial reveal-pulse halo — drawn while the auto-reveal sweep runs,
   removed by JS once the user interacts. Pulses a soft white ring. */
.eekad-iv-ba.is-revealing .eekad-iv-ba__handle::after {
	animation: eekad-ba-reveal-pulse 1.4s ease-out infinite;
}
@keyframes eekad-ba-reveal-pulse {
	0%   { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 0 0   rgba(255, 255, 255, 0.55); }
	100% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 0 16px rgba(255, 255, 255, 0); }
}

/* Caption — matches the figure block's quiet article metadata treatment. */
.eekad-iv-ba__caption {
	padding: 12px 0 0;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.55;
	color: var(--c-text-muted);
	text-align: start;
}

@media (max-width: 600px) {
	.eekad-iv-ba { margin: 36px 0; padding: 0; }
	.eekad-iv-ba__caption { font-size: 13px; padding: 12px 0 0; }
	.eekad-iv-ba__badge-label { font-size: 11px; }
}

/* ----- Map (Mapbox) ---------------------------------------- */
/* Frame mirrors .eekad-network-map so the two blocks read as a pair.
   Canvas-stage recipe (home database grammar): whisper fill + white
   hairline. The neon-lime frame is retired. */
.eekad-iv-map {
	position: relative;
	margin: 0;
	background: rgba(var(--c-border-rgb), .02);
	border: 1px solid rgba(var(--c-border-rgb), .08);
	border-radius: 0;
	overflow: hidden;
	display: block;
}
.eekad-iv-map__header {
	padding: 24px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	position: relative;
	z-index: 2;
}
.eekad-iv-map__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	color: var(--c-text-muted);
	letter-spacing: 0; /* Arabic — never tracked */
}
.eekad-iv-map__badge-dot {
	width: 6px;
	height: 6px;
	background: var(--c-text-faint); /* static content — no fake "live" pulse */
}
.eekad-iv-map__toggle {
	background: transparent;
	color: var(--c-text-2);
	border: 1px solid rgba(var(--c-border-rgb), .18);
	padding: 8px 14px;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0; /* Arabic — never tracked */
	cursor: pointer;
	transition: background var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
}
.eekad-iv-map__toggle:hover {
	color: var(--c-lime);
	background: rgba(var(--c-lime-rgb), .08);
	border-color: rgba(var(--c-lime-rgb), .5);
}
.eekad-iv-map__toggle:focus-visible {
	outline: 2px solid var(--c-lime);
	outline-offset: 2px;
}
.eekad-iv-map__toggle-label[hidden] { display: none; }
.eekad-iv-map__canvas-wrap {
	position: relative;
	width: 100%;
	height: var(--map-height, 560px);
}
/* (Viewfinder corner brackets retired everywhere — HUD framing left
   the design language with the homepage database device.) */
.eekad-iv-map__canvas {
	width: 100%;
	height: 100%;
	background: var(--c-bg-base);
}
.eekad-iv-map__caption {
	padding: 16px 32px 24px;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.55;
	color: var(--c-text-muted);
	text-align: start;
	border-top: 1px solid var(--iv-hairline);
}
.eekad-iv-map__error {
	display: grid;
	place-items: center;
	background: var(--c-bg-surface);
	border: 1px dashed rgba(var(--c-border-rgb), 0.18);
	color: var(--c-text-muted);
	font-family: var(--font-mono);
	font-size: 12px;
	padding: 24px;
	text-align: center;
}
.eekad-iv-map__error code {
	background: var(--c-bg-alt);
	color: var(--c-lime);
	padding: 2px 6px;
	font-size: 11px;
}
.eekad-iv-map__pin {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--c-lime);
	color: var(--c-text-on-accent);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	display: grid;
	place-items: center;
	border: 2px solid var(--c-bg-alt);
	cursor: pointer;
}

/* Pulse pin — the other marker style assets/js/map.js can render, used by
   the entity location map and by the file page's own map.
   Mapbox applies its own `transform: translate(X,Y)` to the outer marker
   element to position it, so any CSS transform there would wipe that out
   and stack every pin at 0,0. All animation lives on the inner wrapper.
   Three concentric children: dot (solid lime) - ring (hairline) -
   pulse (animated halo). */
.eekad-map-pin {
	width: 24px;
	height: 24px;
	cursor: pointer;
	position: relative;
}
.eekad-map-pin__inner {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(.6);
	transform-origin: center;
	animation: eekad-map-pin-in .5s cubic-bezier(.16, 1, .3, 1) forwards;
}
.eekad-map-pin__inner > * {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.eekad-map-pin__dot {
	width: 8px;
	height: 8px;
	background: var(--c-lime);
	box-shadow: 0 0 0 1px rgba(var(--c-bg-base-rgb), .8);
	transition: width .15s ease, height .15s ease;
}
.eekad-map-pin__ring {
	width: 18px;
	height: 18px;
	border: 1px solid rgba(205, 254, 100, .55);
	transition: border-color .2s ease;
}
.eekad-map-pin__pulse {
	width: 18px;
	height: 18px;
	background: var(--c-lime);
	opacity: 0;
	animation: eekad-map-pin-pulse 2.4s ease-out infinite;
}
.eekad-map-pin:hover .eekad-map-pin__dot {
	width: 10px;
	height: 10px;
}
.eekad-map-pin:hover .eekad-map-pin__ring {
	border-color: var(--c-lime);
}
@keyframes eekad-map-pin-in {
	to { opacity: 1; transform: scale(1); }
}
@keyframes eekad-map-pin-pulse {
	0%   { transform: translate(-50%, -50%) scale(1);   opacity: .35; }
	70%  { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
	100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

.mapboxgl-popup-content {
	background: var(--c-bg-alt) !important;
	color: var(--c-text) !important;
	border-inline-start: 1px solid var(--iv-hairline);
	border-radius: 0 !important;
	font-family: var(--font-sans);
	padding: 14px 16px !important;
}
.mapboxgl-popup-content strong { color: var(--c-text-muted); display: block; margin-block-end: 4px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.mapboxgl-popup-content p { margin: 0; font-size: 14px; }
.mapboxgl-popup-tip { display: none; }

/* --- Network Map block — force-directed OSINT graph --- */
.eekad-network-map {
	position: relative;
	background: rgba(var(--c-border-rgb), .02); /* canvas-stage, not neon panel */
	border: 1px solid rgba(var(--c-border-rgb), .08);
	border-radius: 0;
	overflow: hidden;
	margin: 0;
}
.eekad-network-map.is-bleed {
	margin-inline: calc(-50vw + 50%);
	width: 100vw;
	border-radius: 0;
	border-inline: none;
}
.eekad-network-map__header {
	padding: 24px 32px;
	position: relative;
	z-index: 2;
}
.eekad-network-map__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	color: var(--c-text-muted);
	letter-spacing: 0; /* Arabic — never tracked */
	margin-block-end: 12px;
}
.eekad-network-map__badge-dot {
	width: 6px;
	height: 6px;
	background: var(--c-text-faint); /* static content — no fake "live" pulse */
}
.eekad-network-map__title {
	margin: 0;
	font-family: var(--font-sans);
	font-size: clamp(20px, 3vw, 28px);
	font-weight: 700;
	color: var(--c-text);
}
.eekad-network-map__canvas {
	position: relative;
	height: var(--nm-height, 700px);
	width: 100%;
}
/* Corner brackets shared with map + sticky (see the grouped .vf rule above). */
/* Faint grid lines behind the graph */
.eekad-network-map__canvas::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
	background-size: 80px 80px;
	mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.5) 0%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.5) 0%, transparent 75%);
}
.eekad-network-map__svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Nodes */
.nm-node { transition: opacity .4s ease; }
.nm-node--reveal {
	animation: nm-materialize .6s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes nm-materialize {
	from { opacity: 0; }
	to   { opacity: 1; }
}
/* One hop outside the focused subject — present, deliberately quiet. Kept
   readable rather than ghosted: this is where overlap between subjects shows,
   so a reader has to be able to tell who it is. !important because the reveal
   animation fills forwards to opacity 1, same reason --dim below needs it —
   and boundary is declared first so an active hover-dim still wins. */
.nm-node--boundary { opacity: .42 !important; }
.nm-node--boundary:hover { opacity: 1 !important; }
.nm-node--dim { opacity: .15 !important; }
.nm-node--highlight .nm-node__ring {
	filter: url(#nm-glow);
}
.nm-node__glow {
	transition: opacity .3s ease;
}
.nm-node__photo {
	transition: opacity .3s ease;
}
.nm-node__ring {
	fill: var(--c-bg-surface);
}
.nm-node__label {
	fill: var(--c-text);
	pointer-events: none;
	text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.nm-node__role {
	fill: var(--c-text-muted);
}
.nm-edge-label {
	fill: var(--c-text-muted);
}
.nm-node__role {
	pointer-events: none;
}

/* Edges */
.nm-edge {
	opacity: 0;
	transition: stroke .3s ease, stroke-width .3s ease, opacity .4s ease;
}
.nm-edge--reveal {
	opacity: 1;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: nm-draw-edge 1.2s ease forwards;
}
@keyframes nm-draw-edge {
	to { stroke-dashoffset: 0; }
}
.nm-edge-label {
	pointer-events: none;
	transition: opacity .3s ease;
	text-shadow: 0 1px 3px rgba(0,0,0,.9);
}

/* Detail panel */
.eekad-network-map__detail {
	position: absolute;
	top: 16px;
	left: 16px;
	width: 320px;
	max-height: calc(var(--nm-height, 700px) - 32px);
	overflow-y: auto;
	background: rgba(var(--c-bg-alt-rgb),.95);
	border: 1px solid rgba(var(--c-border-rgb), .14);
	border-radius: 0;
	backdrop-filter: blur(12px);
	z-index: 10;
	padding: 20px;
	opacity: 0;
	transform: translateX(-20px);
	transition: opacity .3s ease, transform .3s ease;
}
.eekad-network-map__detail.nm-detail--open {
	opacity: 1;
	transform: translateX(0);
}
.eekad-network-map__detail-close {
	position: absolute;
	top: 8px;
	left: 8px;
	background: none;
	border: none;
	color: var(--c-text-muted);
	font-size: 24px;
	cursor: pointer;
	line-height: 1;
	padding: 4px 8px;
}
.eekad-network-map__detail-close:hover { color: var(--c-text); }

.nm-detail__header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-block-end: 16px;
	padding-block-end: 16px;
	border-block-end: 1px solid rgba(var(--c-border-rgb),.08);
}
.nm-detail__photo {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--schema-color, var(--c-lime));
}
.nm-detail__name {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 16px;
	color: var(--c-text);
}
.nm-detail__name-en {
	font-family: var(--font-sans);
	font-size: 12px;
	color: var(--c-text-muted);
	direction: ltr;
}
.nm-detail__schema {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
}
.nm-detail__summary {
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 1.6;
	color: var(--c-text-2);
	margin: 0 0 16px;
}
.nm-detail__meta {
	font-family: var(--font-sans);
	font-size: 12px;
	color: var(--c-text-muted);
	margin-block-end: 16px;
}
.nm-detail__conns {
	border-block-start: 1px solid rgba(var(--c-border-rgb),.08);
	padding-block-start: 12px;
}
.nm-detail__conns-title {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0; /* Arabic — never tracked */
	color: var(--c-text-muted);
	margin-block-end: 8px;
}
.nm-detail__conn {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-sans);
	font-size: 13px;
	color: var(--c-text-2);
	padding: 4px 0;
}
.nm-detail__conn-arrow {
	color: var(--c-lime);
	font-size: 11px;
}
.nm-detail__conn-role {
	margin-inline-start: auto;
	font-size: 11px;
	color: var(--c-text-muted);
}

/* Legend — one entry per entity type present in the graph, populated by
   network-map.js. Each dot carries its schema colour inline via
   --legend-color, matching the node ring for that type. */
.eekad-network-map__legend {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 20px;
	padding: 0 12px;
	max-width: 100%;
}
.eekad-network-map__legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-sans);
	font-size: 11px;
	color: var(--c-text-muted);
}
.eekad-network-map__legend-dot {
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--legend-color, var(--c-text-muted));
}

/* ── Fullscreen expand ──────────────────────────────── */
.eekad-network-map__expand-btn {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 12;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: rgba(var(--c-bg-alt-rgb),.85);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(var(--c-border-rgb), .18);
	border-radius: 0;
	color: var(--c-text-2);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s, border-color .2s;
}
.eekad-network-map__expand-btn:hover {
	color: var(--c-lime);
	background: rgba(var(--c-lime-rgb), .10);
	border-color: rgba(var(--c-lime-rgb), .4);
}
/* Zoom button bar */
.nm-zoom-bar {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	inset-inline-start: 16px;
	z-index: 12;
	display: flex;
	flex-direction: column;
	gap: 0;
	background: rgba(var(--c-bg-elevated-rgb),.92);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(var(--c-border-rgb),.12);
	border-radius: 0;
	overflow: hidden;
}
.nm-zoom-bar__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: none;
	border-bottom: 1px solid rgba(var(--c-border-rgb),.08);
	color: var(--c-text);
	cursor: pointer;
	transition: background .15s, color .15s;
}
.nm-zoom-bar__btn svg {
	width: 20px;
	height: 20px;
}
.nm-zoom-bar__btn:last-child { border-bottom: none; }
.nm-zoom-bar__btn:hover { background: rgba(var(--c-lime-rgb), .12); color: var(--c-lime); }

/* ── Mobile tuning ──
   On phones the article column is far too narrow for a useful network
   graph (the simulation letterboxes into a tiny strip). Break out to
   the full viewport width, shorten the canvas, and shrink the zoom bar
   + legend so chrome doesn't dominate the limited screen real estate. */
@media (max-width: 768px) {
	.eekad-network-map {
		/* Break out of the narrow article column but keep a 16px gutter on
		   each side so the map is a card, not edge-to-edge. */
		margin-inline: calc(50% - 50vw + 16px);
		width: calc(100vw - 32px);
	}
	.eekad-network-map__header {
		padding: 18px 20px;
	}
	.eekad-network-map__title {
		font-size: 18px;
	}
	.eekad-network-map__canvas {
		height: clamp(420px, 70vh, 560px);
	}
	.nm-zoom-bar { inset-inline-start: 8px; }
	.nm-zoom-bar__btn { width: 36px; height: 36px; }
	.nm-zoom-bar__btn svg { width: 16px; height: 16px; }
	.eekad-network-map__legend {
		gap: 12px;
		bottom: 10px;
		flex-wrap: wrap;
		justify-content: center;
		max-width: calc(100% - 32px);
	}
	.eekad-network-map__legend-item { font-size: 10px; }
	.eekad-network-map__detail {
		width: calc(100% - 32px);
		max-width: 320px;
	}
}

.eekad-network-map__canvas {
	cursor: grab;
}
.eekad-network-map__canvas:active {
	cursor: grabbing;
}
/* Empty state — animated ghost network */
.nm-empty-state {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	z-index: 5;
	pointer-events: none;
}
.nm-empty-state__graph {
	width: 580px;
	height: 430px;
	margin-bottom: 24px;
}
.nm-empty-state__text {
	color: rgba(255,255,255,.5);
	font-size: 17px;
	font-family: inherit;
	margin-bottom: 6px;
}
.nm-empty-state__sub {
	color: rgba(255,255,255,.25);
	font-size: 13px;
	font-family: inherit;
}

/* Ghost edges — curved paths with draw-on effect */
.nm-ghost-edge {
	stroke: rgba(255, 255, 255, .08);
	stroke-width: 1;
	fill: none;
	stroke-dasharray: 300;
	stroke-dashoffset: 300;
	animation: nm-draw 1.8s ease forwards;
}
@keyframes nm-draw {
	to { stroke-dashoffset: 0; }
}

/* Ghost nodes — fade in + gentle float */
.nm-ghost-node {
	fill: rgba(255, 255, 255, .10);
	stroke: rgba(255, 255, 255, .16);
	stroke-width: .8;
	opacity: 0;
	animation: nm-appear .6s ease forwards, nm-float 6s ease-in-out infinite;
}
.nm-ghost-node--hub {
	fill: rgba(255, 255, 255, .14);
	stroke: rgba(255, 255, 255, .22);
	stroke-width: 1;
}
@keyframes nm-appear {
	to { opacity: 1; }
}
@keyframes nm-float {
	0%, 100% { transform: translate(0, 0); }
	33% { transform: translate(2px, -3px); }
	66% { transform: translate(-2px, 2px); }
}

/* Hub glow rings */
.nm-ghost-glow {
	fill: none;
	stroke: rgba(255, 255, 255, .05);
	stroke-width: .8;
	opacity: 0;
	animation: nm-appear .8s ease forwards, nm-glow-pulse 5s ease-in-out infinite;
}
@keyframes nm-glow-pulse {
	0%, 100% { opacity: 1; stroke-width: .8; }
	50% { opacity: 0; stroke-width: 3; }
}
.eekad-network-map__expand-btn svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.eekad-network-map.is-fullscreen {
	position: fixed !important;
	inset: 0 !important;
	z-index: 100001 !important;
	margin: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	border: none !important;
	border-radius: 0 !important;
}
.eekad-network-map.is-fullscreen .eekad-network-map__canvas {
	height: calc(100vh - 100px) !important;
}
.eekad-network-map.is-fullscreen .eekad-network-map__detail {
	max-height: calc(100vh - 100px);
}

/* ── Network FAB (now lives inside .eekad-action-dock) ─ */
/* Dock handles positioning; these are just overrides.    */
.eekad-network-fab svg {
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Responsive */
@media (max-width: 800px) {
	.eekad-action-dock {
		bottom: 16px;
		left: 16px;
	}
}

/* Responsive tweaks */
@media (max-width: 800px) {
	.eekad-iv-cover { min-height: 560px; }
	.eekad-iv-cover__inner { padding-block: 96px 24px; }
	.eekad-iv-pullquote { margin: 48px 0; }
	.eekad-iv-pullquote::before { font-size: 72px; margin-block-end: -0.42em; }
	.eekad-iv-pullquote__text { font-size: 22px; line-height: 1.55; }
	.eekad-iv-pullquote__cite { margin-top: 20px; }
	.eekad-investigation__body { --iv-row-gap: 22px; }
	.eekad-investigation__body p,
	.eekad-investigation__body li {
		font-size: var(--fs-article-mobile);
	}

	.eekad-iv-stats.has-cols-3,
	.eekad-iv-stats.has-cols-4 { grid-template-columns: 1fr; }
	.eekad-iv-stats.has-cols-2 { grid-template-columns: 1fr; }
	.eekad-iv-gallery.has-cols-3 .eekad-iv-gallery__grid,
	.eekad-iv-gallery.has-cols-4 .eekad-iv-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================
 * Immersive Scroll — full-bleed cinematic scrollytelling
 * =========================================================== */
.eekad-iv-immersive {
	position: relative;
}

/* ----- Background plates: stacked, full-viewport, crossfading ----- */
.eekad-iv-immersive__bg {
	position: sticky;
	top: 0;
	height: 100vh;
	width: 100%;
	overflow: hidden;
	z-index: 0;
}

.eekad-iv-immersive__plate {
	position: absolute;
	inset: 0;
	opacity: 0;
	z-index: 0;
	transition: opacity 0.42s var(--ease-out);
}
/* Before JS runs (or without it) the first plate stands in. */
.eekad-iv-immersive__plate:first-child {
	opacity: 1;
}

.eekad-iv-immersive__plate img,
.eekad-iv-immersive__plate video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Default = a clean crossfade with no scale (the "settle" caused a
	   bump on every step, especially on contain plates and while
	   scrubbing). Motion is opt-in per block via the transition types
	   below (is-trans-kenburns / is-trans-blur). */
}
/* "Fit whole image" — show the entire picture (e.g. a wide panorama)
   instead of cropping it to fill. A blurred, dimmed copy of the same
   image fills the letterbox area so it never reads as empty black, and
   the result adapts to any screen aspect. */
.eekad-iv-immersive__plate.is-fit-contain img,
.eekad-iv-immersive__plate.is-fit-contain video {
	object-fit: contain;
	position: relative;
	z-index: 1;
}

/* Immersive background video: wallpaper, so it never plays where motion
   under text would cost more than it gives. The poster still stands in on
   phones (data, battery, and no autoplay guarantee) and whenever the
   reader has asked for reduced motion. Both only exist when a poster was
   set — without one the video is left visible rather than blanking the
   plate. scroll-steps.js skips any video CSS has hidden, so a stand-in
   plate never plays behind the poster. */
/* Scoped to the plate so it outweighs `.eekad-iv-immersive__plate img`,
   which would otherwise force the poster back to display:block. */
.eekad-iv-immersive__plate .eekad-iv-scrolly__plate-poster {
	display: none;
}
@media (max-width: 800px) {
	.eekad-iv-immersive__plate video.has-poster { display: none; }
	.eekad-iv-immersive__plate .eekad-iv-scrolly__plate-poster { display: block; }
}
@media (prefers-reduced-motion: reduce) {
	.eekad-iv-immersive__plate video.has-poster { display: none; }
	.eekad-iv-immersive__plate .eekad-iv-scrolly__plate-poster { display: block; }
}
.eekad-iv-immersive__plate.is-fit-contain::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--plate-fill);
	background-size: cover;
	background-position: center;
	filter: blur(38px) saturate(1.15) brightness(0.5);
	transform: scale(1.12); /* hide the soft blurred edge */
}
/* Keep the per-plate dim overlay above both fill and sharp image. */
.eekad-iv-immersive__plate.is-fit-contain::after {
	z-index: 2;
}

/* Dimming overlay per plate — controlled by --dim custom property */
.eekad-iv-immersive__plate::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--dim, 0.55));
	pointer-events: none;
}

/* Active plate — .is-active from the engine (uncapped). */
.eekad-iv-immersive__plate.is-active {
	opacity: 1;
	z-index: 1;
}

/* One quiet cinematic gradient — the glass cards carry their own
   contrast, so the imagery stays vivid (the old radial vignette
   double-darkened everything on top of the per-plate dim). */
.eekad-iv-immersive__bg::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(180deg,
			rgba(0, 0, 0, 0.18) 0%,
			transparent 22%,
			transparent 72%,
			rgba(0, 0, 0, 0.38) 100%);
}

/* ----- Text track: scrolls over the sticky background ----- */
.eekad-iv-immersive__track {
	position: relative;
	z-index: 1;
	margin-top: -100vh; /* pull the track over the sticky bg */
	display: flex;
	flex-direction: column;
	gap: 80vh;
	padding-block: 40vh;
}

/* ----- Text cards — frosted glass, luminous not slab ----- */
.eekad-iv-immersive__card {
	max-width: 580px;
	background: rgba(var(--c-bg-base-rgb), 0.64);
	backdrop-filter: blur(24px) saturate(160%);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	padding: 48px 48px 44px;
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	box-shadow: 0 32px 80px -24px rgba(0, 0, 0, 0.6);
	counter-increment: eekad-imm-step;
}
@media (prefers-reduced-transparency: reduce) {
	.eekad-iv-immersive__card {
		background: rgba(var(--c-bg-base-rgb), 0.96);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* Image-only beat — the step has no kicker and no body. Drop the card
   box entirely (no glass, no border, no label chip); the article stays
   in the DOM as an invisible scroll trigger for its background plate,
   so a run of image-only steps advances the imagery with no empty box. */
.eekad-iv-immersive__card.is-media-only {
	background: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	pointer-events: none;
}
.eekad-iv-immersive__card.is-media-only::before {
	display: none;
}

.eekad-iv-immersive__track {
	counter-reset: eekad-imm-step;
}

/* Card position variants — desktop only. On mobile all immersive
   cards use the shared stacked scrollytelling layout. */
@media (min-width: 801px) {
	.eekad-iv-immersive__card.is-card-leading,
	.eekad-iv-immersive.is-text-start .eekad-iv-immersive__card:not(.is-card-leading):not(.is-card-trailing):not(.is-card-center) {
		margin-inline-start: max(24px, calc((100vw - 1280px) / 2 + 24px));
		margin-inline-end: auto;
	}
	.eekad-iv-immersive__card.is-card-trailing,
	.eekad-iv-immersive.is-text-end .eekad-iv-immersive__card:not(.is-card-leading):not(.is-card-trailing):not(.is-card-center) {
		margin-inline-end: max(24px, calc((100vw - 1280px) / 2 + 24px));
		margin-inline-start: auto;
	}
	.eekad-iv-immersive__card.is-card-center,
	.eekad-iv-immersive.is-text-center .eekad-iv-immersive__card:not(.is-card-leading):not(.is-card-trailing):not(.is-card-center) {
		margin-inline: auto;
		max-width: 640px;
		text-align: center;
	}
}

/* Step label — a quiet numeral in the card flow (auto counter or the
   editor's custom text, which may be Arabic — never tracked). */
.eekad-iv-immersive__card::before {
	content: attr(data-card-label);
	display: block;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	color: var(--c-text-muted);
	margin-block-end: 14px;
}
.eekad-iv-immersive__card.is-label-hidden::before {
	display: none;
}

/* Kicker — eyebrow line above body, optional. Quiet, not lime:
   over photography the accent has no interactive meaning. */
.eekad-iv-immersive__kicker {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--c-text-2);
	margin-block-end: 24px;
	display: flex;
	align-items: center;
	gap: 14px;
}
.eekad-iv-immersive__kicker::after {
	content: '';
	flex: 1;
	height: 1px;
	background: rgba(var(--c-border-rgb), 0.18);
}
.eekad-iv-immersive.is-text-center .eekad-iv-immersive__kicker {
	justify-content: center;
}
.eekad-iv-immersive.is-text-center .eekad-iv-immersive__kicker::after {
	display: none;
}

/* Body text — cinematic, large for "voice in the dark" reading */
.eekad-iv-immersive__body {
	font-size: 26px;
	color: var(--c-text);
	line-height: 1.55;
	font-weight: 400;
}
.eekad-iv-immersive__body p {
	margin: 0 0 1em;
}
.eekad-iv-immersive__body p:last-child {
	margin-bottom: 0;
}

/* Reduced motion (desktop): plates swap with a brief fade, nothing
   travels or scales. */
@media (prefers-reduced-motion: reduce) {
	.eekad-iv-immersive__plate {
		transition: opacity var(--dur-quick) var(--ease-out);
	}
	.eekad-iv-immersive__plate img {
		transform: none;
		transition: none;
	}
}

/* Inline per-step media — hidden on desktop (bg plates handle the image);
   the mobile stacked layout also hides it (see __step-media below). This
   figure is a fallback only. (Restored: the apple-claude merge dropped it,
   which leaked the step image into the text card at every breakpoint.) */
/* Per-step media inside the text card. Neither mode ever shows it: the
   pinned slot (sticky) and the background plate (immersive) are the
   media, and the shared mobile layout is full-bleed. Both rules must
   stay — dropping the sticky one printed the image a second time above
   its own card, at the image's natural ratio, which is what made the
   duplicate look like a different crop. Hiding it also keeps the
   lazy <img> from ever being fetched. */
.eekad-iv-immersive__card-media,
.eekad-iv-sticky__step-media {
	display: none;
}

/* ----- Editor styles ----- */
.eekad-iv-immersive__editor-hint {
	background: rgba(var(--c-lime-rgb), 0.08);
	border-inline-start: 3px solid var(--c-lime);
	color: var(--c-text-2);
	font-size: 13px;
	padding: 10px 16px;
	margin-bottom: 16px;
}

.eekad-iv-immersive__step-edit {
	position: relative;
	min-height: 280px;
	background-color: var(--c-bg-alt);
	background-size: cover;
	background-position: center;
	border-radius: 0;
	overflow: hidden;
	margin-bottom: 12px;
}

.eekad-iv-immersive__step-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.eekad-iv-immersive__step-content {
	position: relative;
	z-index: 1;
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 280px;
}
.eekad-iv-immersive__step-edit.is-card-leading .eekad-iv-immersive__step-content {
	align-items: flex-start;
	text-align: start;
}
.eekad-iv-immersive__step-edit.is-card-trailing .eekad-iv-immersive__step-content {
	align-items: flex-end;
	text-align: end;
}
.eekad-iv-immersive__step-edit.is-card-center .eekad-iv-immersive__step-content {
	align-items: center;
	text-align: center;
}
.eekad-iv-immersive__step-edit::before {
	content: attr(data-card-label);
	position: absolute;
	inset-block-start: 18px;
	inset-inline-start: 24px;
	z-index: 2;
	background: var(--c-lime);
	color: var(--c-text-on-accent);
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	padding: 5px 12px;
}
.eekad-iv-immersive__step-edit.is-label-hidden::before {
	display: none;
}

@media (max-width: 800px) {
	.eekad-iv-scrolly {
		position: relative;
		padding-block: 0;
		background: var(--c-bg-base);
		margin-block: 28px;
		overflow: clip;
	}
	.eekad-iv-scrolly.eekad-iv-sticky {
		padding-block: 0;
	}
	.eekad-iv-scrolly.eekad-iv-sticky .eekad-iv-sticky__inner {
		display: block;
		max-width: none;
		grid-template-columns: 1fr;
		gap: 0;
		padding-inline: 0;
	}
	/* Sticky mode wraps its media in an extra .media-pin element that
	   immersive mode has no equivalent of. `display: contents` dissolves
	   that wrapper so the sticky media becomes a direct child of the
	   full-height __inner — the same relationship immersive's __bg has to
	   its section. Without this the pin collapses to the media's own height,
	   leaving zero sticky travel and the media scrolls away after one
	   viewport. Keeps sticky and immersive behaving identically on mobile. */
	.eekad-iv-scrolly.eekad-iv-sticky .eekad-iv-sticky__media-pin {
		display: contents;
	}
	.eekad-iv-scrolly.eekad-iv-sticky .eekad-iv-sticky__media,
	.eekad-iv-scrolly.eekad-iv-immersive .eekad-iv-immersive__bg {
		display: block;
		position: sticky;
		top: 0;
		z-index: 0;
		width: 100%;
		/* lvh = the LARGE viewport (mobile toolbar collapsed). Sizing this
		   pinned background to svh left a black band once iOS Safari hid its
		   toolbar and the viewport grew past svh. lvh always covers the tallest
		   the viewport can get, with no resize jank; the track margin below is
		   matched to lvh so the text overlay stays aligned. */
		height: 100lvh;
		min-height: 100lvh;
		border: 0;
		box-shadow: none;
		pointer-events: none;
	}
	.eekad-iv-scrolly.eekad-iv-sticky .eekad-iv-sticky__media::before,
	.eekad-iv-scrolly.eekad-iv-immersive .eekad-iv-immersive__bg::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 3;
		pointer-events: none;
		background:
			linear-gradient(180deg,
				rgba(15, 17, 20, .10) 0%,
				rgba(15, 17, 20, .04) 24%,
				rgba(15, 17, 20, .16) 56%,
				rgba(15, 17, 20, .46) 100%),
			radial-gradient(ellipse at center,
				transparent 30%,
				rgba(0, 0, 0, .16) 100%);
	}
	.eekad-iv-scrolly.eekad-iv-sticky .eekad-iv-sticky__slot,
	.eekad-iv-scrolly.eekad-iv-immersive .eekad-iv-immersive__plate {
		transition: opacity 1.15s ease-in-out;
	}
	.eekad-iv-scrolly.eekad-iv-sticky .eekad-iv-sticky__slot img,
	.eekad-iv-scrolly.eekad-iv-sticky .eekad-iv-sticky__slot video,
	.eekad-iv-scrolly.eekad-iv-immersive .eekad-iv-immersive__plate img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* Per-step focal point (editor) decides which part of a wide image
		   survives the tall-screen crop. Defaults to centre. */
		object-position: var(--eekad-mobile-pos, 50% 50%);
		/* No unconditional scale — a base scale meant every crossfade blended
		   two images at different sizes, reading as a zoom-pulse "jump" on each
		   step (worst when steps reuse the same map). Motion is now opt-in per
		   transition type below. */
		filter: saturate(1.05) contrast(1.06);
	}
	/* Fit-whole-image plates never crop/scale on mobile either. */
	.eekad-iv-scrolly.eekad-iv-immersive .eekad-iv-immersive__plate.is-fit-contain img {
		object-fit: contain;
		transform: none;
	}
	.eekad-iv-scrolly.eekad-iv-sticky .eekad-iv-sticky__steps,
	.eekad-iv-scrolly.eekad-iv-immersive .eekad-iv-immersive__track {
		position: relative;
		z-index: 1;
		display: block;
		gap: 0;
		padding-block: 44svh 18svh;
		/* Matches the pinned media height (100lvh) so the text track is pulled
		   up exactly over the background — keeping svh here would misalign the
		   overlay by the toolbar's height. */
		margin-top: -100lvh;
	}
	.eekad-iv-scrolly .eekad-iv-sticky__step,
	.eekad-iv-scrolly .eekad-iv-immersive__card,
	.eekad-iv-scrolly.eekad-iv-sticky[data-active-step] .eekad-iv-sticky__step[data-scroll-step] {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-height: 100svh;
		max-width: 100%;
		margin-inline: 0;
		padding: 18svh 22px 24svh;
		overflow: visible;
		isolation: isolate;
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border: none;
		border-inline-start: 0;
		box-shadow: none;
	}
	.eekad-iv-scrolly .eekad-iv-sticky__step {
		counter-increment: eekad-step;
	}
	.eekad-iv-scrolly .eekad-iv-sticky__step::before,
	.eekad-iv-scrolly .eekad-iv-immersive__card::before {
		display: none;
	}
	.eekad-iv-scrolly .eekad-iv-sticky__step::after,
	.eekad-iv-scrolly .eekad-iv-immersive__card::after {
		display: none;
	}
	.eekad-iv-scrolly .eekad-iv-scrolly__step-media {
		display: none;
	}
	.eekad-iv-scrolly .eekad-iv-sticky__kicker,
	.eekad-iv-scrolly .eekad-iv-immersive__kicker {
		position: relative;
		z-index: 2;
		width: fit-content;
		max-width: 100%;
		margin: 0 0 14px;
		padding: 0;
		background: transparent;
		border: 0;
		color: var(--c-lime);
		font-size: 12px;
		letter-spacing: 0;
		text-transform: none;
		display: flex;
		align-items: center;
		gap: 10px;
		text-shadow: 0 8px 24px rgba(0, 0, 0, .85);
	}
	.eekad-iv-scrolly.eekad-iv-sticky .eekad-iv-sticky__kicker {
		color: var(--c-lime);
	}
	.eekad-iv-scrolly .eekad-iv-sticky__kicker::before,
	.eekad-iv-scrolly .eekad-iv-immersive__kicker::before {
		font-family: var(--font-mono);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .08em;
		color: var(--c-text-muted);
	}
	.eekad-iv-scrolly .eekad-iv-sticky__kicker::before {
		content: counter(eekad-step, decimal-leading-zero);
	}
	.eekad-iv-scrolly .eekad-iv-immersive__kicker::before {
		content: counter(eekad-imm-step, decimal-leading-zero);
	}
	.eekad-iv-scrolly .eekad-iv-sticky__kicker::after,
	.eekad-iv-scrolly .eekad-iv-immersive__kicker::after {
		content: '';
		display: block;
		flex: 1;
		height: 1px;
		background: linear-gradient(to right, rgba(var(--c-lime-rgb), .45), transparent);
		opacity: 1;
	}
	.eekad-iv-scrolly.eekad-iv-sticky .eekad-iv-sticky__kicker::after {
		background: linear-gradient(to right, rgba(var(--c-lime-rgb), .45), transparent);
	}
	.eekad-iv-scrolly .eekad-iv-sticky__body,
	.eekad-iv-scrolly .eekad-iv-immersive__body {
		position: relative;
		z-index: 2;
		margin: 0;
		max-width: 100%;
		padding: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
		font-size: clamp(18px, 4.7vw, 22px);
		line-height: 1.5;
		color: var(--c-text);
		text-shadow:
			0 2px 8px rgba(0, 0, 0, .9),
			0 14px 36px rgba(0, 0, 0, .72);
	}
	.eekad-iv-scrolly .eekad-iv-sticky__body p,
	.eekad-iv-scrolly .eekad-iv-immersive__body p {
		margin: 0 0 .85em;
	}
	.eekad-iv-scrolly .eekad-iv-sticky__body p:last-child,
	.eekad-iv-scrolly .eekad-iv-immersive__body p:last-child {
		margin-bottom: 0;
	}
	.eekad-iv-scrolly .eekad-iv-sticky__kicker,
	.eekad-iv-scrolly .eekad-iv-immersive__kicker,
	.eekad-iv-scrolly .eekad-iv-sticky__body,
	.eekad-iv-scrolly .eekad-iv-immersive__body {
		opacity: var(--eekad-mobile-reveal-opacity, 0);
		transform: translateY(var(--eekad-mobile-reveal-y, 72px));
		filter: blur(var(--eekad-mobile-reveal-blur, 3px));
		clip-path: none;
		will-change: opacity, transform, filter;
	}
	@media (prefers-reduced-motion: reduce) {
		.eekad-iv-scrolly.eekad-iv-sticky .eekad-iv-sticky__slot img,
		.eekad-iv-scrolly.eekad-iv-sticky .eekad-iv-sticky__slot video,
		.eekad-iv-scrolly.eekad-iv-immersive .eekad-iv-immersive__plate img,
		.eekad-iv-scrolly .eekad-iv-sticky__kicker,
		.eekad-iv-scrolly .eekad-iv-immersive__kicker,
		.eekad-iv-scrolly .eekad-iv-sticky__body,
		.eekad-iv-scrolly .eekad-iv-immersive__body {
			transition: none;
			animation: none;
			transform: none;
			filter: none;
			opacity: 1;
			clip-path: none;
		}
		/* The media swap itself becomes a brief fade — fades are the
		   sanctioned reduced-motion equivalent, jump cuts are harsher. */
		.eekad-iv-scrolly.eekad-iv-sticky .eekad-iv-sticky__slot,
		.eekad-iv-scrolly.eekad-iv-immersive .eekad-iv-immersive__plate {
			transition: opacity var(--dur-quick) var(--ease-out);
		}
	}

	/* =========================================================
	 * Mobile "sticky" — the second phone presentation.
	 *
	 * Everything above is mobile "immersive": the media fills the screen
	 * and the text floats over it. Sticky inverts that — the media pins in
	 * a band directly under the site header and the step text scrolls
	 * beneath it as ordinary article prose, disappearing behind the band's
	 * bottom edge. It is the calmer, more readable of the two, and it is
	 * the only one that works when the text matters more than the picture.
	 *
	 * Both desktop structures are reshaped here, exactly as the immersive
	 * rules above do: sticky mode's __media / __slot and immersive mode's
	 * __bg / __plate are the same two roles under different names.
	 * ========================================================= */
	.eekad-iv-scrolly.is-mobile-sticky {
		background: var(--c-bg-alt);
	}

	/* The canvas below the band is a lot of empty dark, and empty dark reads
	   as "nothing here". The same faint lattice the relations graph puts
	   behind its nodes (.eekad-network-map__canvas::before) gives it a
	   surface instead — and borrows the vocabulary of the database, which is
	   the right association for an investigation. Tuned down from the graph's
	   80px / 3%: that cell was drawn for a wide canvas and reads as a few huge
	   boxes on a phone, and this canvas sits under prose rather than behind
	   nodes, so the lattice has to stay well below the reading.

	   Pinned to the viewport, not to the section. Held still it behaves like
	   a surface the prose travels across; scrolling with the text it just
	   became a second moving sheet, and the depth collapsed. It is stuck for
	   exactly as long as the block is on screen, and the negative margin keeps
	   its viewport height from adding to the block's own. z-index 0 puts it
	   under the text track (1) and the band (2). */
	/* Only the switch lives here now — the lattice's own look is defined once
	   further down, so the phone and desktop grids cannot drift apart. */
	.eekad-iv-scrolly.is-mobile-sticky.has-grid-mobile .eekad-iv-scrolly__lattice {
		display: block;
	}

	/* --- The pinned band --- */
	.eekad-iv-scrolly.is-mobile-sticky.eekad-iv-sticky .eekad-iv-sticky__media,
	.eekad-iv-scrolly.is-mobile-sticky.eekad-iv-immersive .eekad-iv-immersive__bg {
		/* Pins under the fixed header rather than behind it: this band is a
		   panel, not a full-bleed backdrop, so the header keeps its normal bar
		   (scroll-steps.js excludes these blocks from the immersive scrim). */
		top: var(--eekad-header-h);
		/* Shaped by the pictures, not by a fixed height — the band is exactly
		   as tall as a full-width step image needs, so nothing is cropped.
		   render.php sets --scrolly-band-ratio only when every step shares one
		   shape; mixed shapes fall back to 16/9 and crop to fill. The cap stops
		   a tall or square set from swallowing the reading area. */
		height: auto;
		min-height: 0;
		aspect-ratio: var(--scrolly-band-ratio, 16 / 9);
		max-height: 52svh;
		/* Above the text track, and opaque, so prose scrolling past is cut
		   cleanly at the band's edge instead of showing through it. */
		z-index: 2;
		background: var(--c-bg-alt);
		border-block-end: 1px solid var(--iv-hairline);
	}
	/* No cinematic scrim or vignette — nothing is being read on top of this.
	   The band's own ::before is cleared here and, when the editor asks for a
	   progress bar, redrawn as the rail below; with the bar off it stays gone
	   rather than falling back to the scrim it used to be. */
	.eekad-iv-scrolly.is-mobile-sticky .eekad-iv-immersive__plate::after,
	.eekad-iv-scrolly.is-mobile-sticky .eekad-iv-immersive__plate.is-fit-contain::before,
	.eekad-iv-scrolly.is-mobile-sticky.eekad-iv-sticky .eekad-iv-sticky__media::before,
	.eekad-iv-scrolly.is-mobile-sticky.eekad-iv-immersive .eekad-iv-immersive__bg::before {
		display: none;
	}

	/* Progress rail on the band's own edge. The pinned band hides how much of
	   the sequence is left — the reader can no longer see the block ending
	   below them — so the edge reports it. Lime is earned: this is state, not
	   decoration. Fills from the right, following the reading direction.
	   --scrolly-progress comes from scroll-steps.js; with no JS it stays 0 and
	   the rail simply never appears. Reuses the scrim pseudo-element, which
	   this layout has no use for. */
	.eekad-iv-scrolly.is-mobile-sticky.has-mobile-progress.eekad-iv-sticky .eekad-iv-sticky__media::before,
	.eekad-iv-scrolly.is-mobile-sticky.has-mobile-progress.eekad-iv-immersive .eekad-iv-immersive__bg::before {
		display: block;
		content: '';
		position: absolute;
		inset: auto 0 0;
		height: 2px;
		z-index: 4;
		background: var(--c-lime);
		transform: scaleX(var(--scrolly-progress, 0));
		transform-origin: right center;
		pointer-events: none;
	}

	/* Tap-to-examine affordance. The lightbox is already wired to every
	   article image, so the tap needs no script — but nothing on a pinned
	   band says it is tappable, and on an OSINT piece the reader's instinct
	   is to look closer at exactly this kind of picture. Neutral, not lime:
	   lime is spoken for by the rail two pixels below it. */
	.eekad-iv-scrolly.is-mobile-sticky.eekad-iv-sticky .eekad-iv-sticky__media::after,
	.eekad-iv-scrolly.is-mobile-sticky.eekad-iv-immersive .eekad-iv-immersive__bg::after {
		content: '';
		position: absolute;
		inset-block-start: 10px;
		inset-inline-end: 10px;
		z-index: 4;
		width: 28px;
		height: 28px;
		background:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M9 4H4v5M15 4h5v5M9 20H4v-5M15 20h5v-5'/%3E%3C/svg%3E")
			center / 16px 16px no-repeat,
			rgba(8, 9, 11, .55);
		pointer-events: none;
	}

	/* The band itself stays inert so it never eats a scroll gesture; only the
	   picture actually on screen takes the tap. Every step's media is stacked
	   in the band at once, so without the .is-active test a tap could open a
	   plate the reader cannot even see. */
	.eekad-iv-scrolly.is-mobile-sticky .eekad-iv-sticky__slot.is-active,
	.eekad-iv-scrolly.is-mobile-sticky .eekad-iv-immersive__plate.is-active {
		pointer-events: auto;
	}
	/* A band this short would letterbox a "fit whole image" plate into a
	   sliver, so every plate crops to fill here. The step's mobile framing
	   still decides which part of a wide image survives the crop. */
	.eekad-iv-scrolly.is-mobile-sticky .eekad-iv-immersive__plate.is-fit-contain img {
		object-fit: cover;
	}

	/* --- The text track: normal flow beneath the band --- */
	.eekad-iv-scrolly.is-mobile-sticky.eekad-iv-sticky .eekad-iv-sticky__steps,
	.eekad-iv-scrolly.is-mobile-sticky.eekad-iv-immersive .eekad-iv-immersive__track {
		/* Immersive pulls the track up over the media; sticky leaves it where
		   it falls, directly after the band's 38svh of flow. */
		margin-top: 0;
		padding-block: 0 8svh;
	}
	/* The third selector mirrors the [data-active-step] one in the immersive
	   rules above purely to out-specify it — without it, sticky-mode blocks
	   keep the full-screen step height meant for the floating-text layout. */
	.eekad-iv-scrolly.is-mobile-sticky .eekad-iv-sticky__step,
	.eekad-iv-scrolly.is-mobile-sticky .eekad-iv-immersive__card,
	.eekad-iv-scrolly.is-mobile-sticky.eekad-iv-sticky[data-active-step] .eekad-iv-sticky__step[data-scroll-step] {
		/* Scroll travel per step. This is a floor, not a height — a step with
		   a lot of text simply grows past it. Set well under the 62svh
		   reading area because real steps are a sentence or two: at a full
		   reading area each one left most of the screen empty. Still long
		   enough that a step's media holds while its text is being read. */
		min-height: 40svh;
		justify-content: center;
		padding: 4svh var(--container-px);
	}
	/* A step with no text still has to drive its plate, but must not leave a
	   blank screen: it collapses to pure scroll travel. */
	.eekad-iv-scrolly.is-mobile-sticky .eekad-iv-immersive__card.is-media-only {
		min-height: 40svh;
		padding-block: 0;
	}

	/* At this travel two beats can share the reading area, which on its own
	   leaves the reader guessing which paragraph the pinned media belongs to.
	   Dimming the others answers it: spacing only implies the pairing, this
	   states it. Same signal that swaps the media, so the two cannot disagree.

	   Sticky-mode blocks already get this from .eekad-iv-sticky__step further
	   up — that rule is not breakpoint-scoped. Immersive-mode blocks author
	   the same steps as cards, which never dim on desktop because there they
	   are glass over full-screen imagery; here they are prose, so they follow
	   the sticky rule, matching its 0.32 and 0.45s exactly. Dimming the
	   *inactive* steps rather than lighting the active one is deliberate:
	   if the engine never runs, no class is set and every step stays
	   readable. */
	.eekad-iv-scrolly.is-mobile-sticky .eekad-iv-immersive__card {
		transition: opacity 0.45s var(--ease-out);
	}
	.eekad-iv-scrolly.is-mobile-sticky .eekad-iv-immersive__card.is-scroll-step-before,
	.eekad-iv-scrolly.is-mobile-sticky .eekad-iv-immersive__card.is-scroll-step-after {
		opacity: 0.32;
	}

	/* --- The prose: the article's own voice, not an overlay --- */
	.eekad-iv-scrolly.is-mobile-sticky .eekad-iv-sticky__kicker,
	.eekad-iv-scrolly.is-mobile-sticky .eekad-iv-immersive__kicker {
		display: none;
	}
	.eekad-iv-scrolly.is-mobile-sticky .eekad-iv-sticky__body,
	.eekad-iv-scrolly.is-mobile-sticky .eekad-iv-immersive__body {
		font-size: var(--fs-article-mobile);
		line-height: 1.85;
		color: var(--c-text-2);
		text-align: justify;
		text-align-last: start;
		text-shadow: none;
		/* The reveal animation belongs to text floating over a photograph.
		   Here the text is the article, so it just sits there. */
		opacity: 1;
		transform: none;
		filter: none;
		will-change: auto;
	}
	.eekad-iv-scrolly.is-mobile-sticky .eekad-iv-sticky__body p,
	.eekad-iv-scrolly.is-mobile-sticky .eekad-iv-immersive__body p {
		margin: 0 0 1em;
	}
}

/* ============================================================
 * Scrollytelling — the background lattice
 *
 * render.php emits one element for either breakpoint and the has-grid-mobile
 * / has-grid-desktop classes decide where it shows. Everything about how it
 * looks lives here, once, so the phone and desktop grids stay identical.
 *
 * Pinned to the viewport rather than the section. Held still it behaves like
 * a surface the prose travels across; scrolling with the text it was just a
 * second moving sheet and the depth collapsed. The negative margin keeps its
 * viewport height out of the block's own layout, and z-index 0 puts it under
 * the text track (1) and the pinned band (2).
 * ============================================================ */
/* Keep the lattice inside the block.
 *
 * It is sticky with a negative bottom margin, and a negative margin enlarges
 * the rectangle sticky is allowed to travel within — so the grid could slide
 * up to a full viewport past where the block ends, and carry on over the
 * prose that follows.
 *
 * `clip` and not `hidden`: hidden would make the section a scroll container
 * and the pinned media inside would stop pinning. clip paints nothing outside
 * the box without creating one. */
.eekad-iv-scrolly.has-grid-mobile,
.eekad-iv-scrolly.has-grid-desktop {
	overflow: clip;
}

.eekad-iv-scrolly__lattice {
	display: none;
	position: sticky;
	top: 0;
	height: 100svh;
	margin-block-end: -100svh;
	z-index: 0;
	pointer-events: none;
	/* One knob for how present the grid is, whichever pattern is chosen.
	   This is the phone value, tuned against a narrow column of prose. */
	--lattice-ink: .018;
	/* Faded at both ends, so the grid dissolves into the article background
	   instead of starting and stopping on a hard line. The top fade is what
	   makes it arrive rather than appear. */
	mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 74%, transparent 100%);
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 74%, transparent 100%);
}

/* Ruled lattice — the one the relations graph puts behind its nodes, which
   borrows the vocabulary of the database. Tuned well below the graph's
   80px / 3%: this sits under prose, not behind nodes, so it has to stay
   under the reading. */
.eekad-iv-scrolly__lattice.is-grid-lines {
	background-image:
		linear-gradient(rgba(255, 255, 255, var(--lattice-ink)) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, var(--lattice-ink)) 1px, transparent 1px);
	background-size: 32px 32px;
}

/* Dotted lattice — the same 32px cell, marked at the intersections instead
   of ruled through them. Quieter across a wide desktop column, where a full
   grid starts to read as a table.
   Dots need more alpha than lines to weigh the same: each cell carries a
   couple of square pixels of ink against the ruled version's sixty-odd, so
   at matched alpha they vanish. The multiplier keeps the two patterns at
   one perceived weight from a single knob. */
.eekad-iv-scrolly__lattice.is-grid-dots {
	background-image: radial-gradient(
		rgba(255, 255, 255, calc(var(--lattice-ink) * 2.2)) 1.1px,
		transparent 1.1px
	);
	background-size: 32px 32px;
}

/* Desktop switch. Sticky only: immersive fills the screen with the picture,
   so there is nothing for a grid to sit behind. */
@media (min-width: 801px) {
	.eekad-iv-scrolly.eekad-iv-sticky.has-grid-desktop .eekad-iv-scrolly__lattice {
		display: block;
		/* The same cell spread across a desktop canvas reads fainter than it
		   does on a phone — more empty space between the marks, and the screen
		   is further from the eye. Nudged up so it carries at this size. */
		--lattice-ink: .026;
	}
}

/* ============================================================
 * Scrollytelling — arrival (desktop sticky)
 *
 * scroll-steps.js stamps [data-arrival] on sticky blocks still below the
 * fold, then .is-entered when the block crosses into view. Frame first,
 * lattice behind it, step column last — one breath, ~0.9s end to end,
 * never repeated. Only [data-arrival] hides anything, so no JS (or reduced
 * motion, which the script also respects) means nothing is ever hidden.
 * ============================================================ */
@media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
	.eekad-iv-scrolly[data-arrival] .eekad-iv-sticky__media {
		opacity: 0;
		transform: scale(.965) translateY(26px);
	}
	.eekad-iv-scrolly[data-arrival] .eekad-iv-scrolly__lattice {
		opacity: 0;
	}
	.eekad-iv-scrolly[data-arrival] .eekad-iv-sticky__steps {
		opacity: 0;
		transform: translateY(34px);
	}

	.eekad-iv-scrolly[data-arrival].is-entered .eekad-iv-sticky__media {
		opacity: 1;
		transform: none;
		transition:
			opacity .75s cubic-bezier(.22, 1, .36, 1),
			transform .75s cubic-bezier(.22, 1, .36, 1);
	}
	.eekad-iv-scrolly[data-arrival].is-entered .eekad-iv-scrolly__lattice {
		opacity: 1;
		transition: opacity 1.1s ease .2s;
	}
	.eekad-iv-scrolly[data-arrival].is-entered .eekad-iv-sticky__steps {
		opacity: 1;
		transform: none;
		transition:
			opacity .65s cubic-bezier(.22, 1, .36, 1) .35s,
			transform .65s cubic-bezier(.22, 1, .36, 1) .35s;
	}
}

/* ============================================================
 * Scrollytelling — desktop rail (counter + step ticks)
 *
 * Rides inside the media pin, so it holds on screen exactly as long as the
 * media does. Active state is contrast, not lime — the same rule as pills
 * and tabs; lime here is only the focus ring, matching the site-wide
 * keyboard style. Phone layouts have their own progress bar.
 * ============================================================ */
.eekad-iv-sticky__rail {
	display: none;
}

@media (min-width: 801px) {
	.eekad-iv-sticky__rail {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		flex: 0 0 auto;
		margin-inline-start: 18px;
	}

	.eekad-iv-sticky__counter {
		font-family: var(--font-mono);
		font-size: 11px;
		letter-spacing: .08em;
		color: var(--c-text-faint);
		/* Vertical, reading upward — a spine, not a caption. dir="ltr" in the
		   markup keeps the digits ordered; this only turns them. */
		writing-mode: vertical-rl;
		transform: rotate(180deg);
	}

	.eekad-iv-sticky__ticks {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.eekad-iv-sticky__tick {
		display: block;
		width: 20px;
		height: 12px;
		padding: 0;
		background: transparent;
		border: none;
		cursor: pointer;
		position: relative;
	}
	/* The visible mark — a short rule, drawn through a pseudo so the button
	   keeps a hit area four times the ink. */
	.eekad-iv-sticky__tick::before {
		content: "";
		position: absolute;
		inset-block-start: 5px;
		inset-inline-start: 4px;
		width: 12px;
		height: 2px;
		background: rgba(255, 255, 255, .22);
		transition: background .2s ease, width .2s ease, inset-inline-start .2s ease;
	}
	.eekad-iv-sticky__tick:hover::before {
		background: rgba(255, 255, 255, .55);
	}
	.eekad-iv-sticky__tick.is-current::before {
		background: var(--c-text);
		width: 20px;
		inset-inline-start: 0;
	}
	.eekad-iv-sticky__tick:focus-visible {
		outline: 2px solid var(--c-lime);
		outline-offset: 2px;
	}
}

/* ============================================================
 * Scrollytelling — living media (desktop)
 *
 * Each step's picture arrives a breath large and settles to exactly 1.0,
 * so the frame is live at the moment of the swap and the *resting* state
 * shows the full evidence — the opposite trade to Ken Burns, which drifts
 * away from the full frame the longer a reader lingers.
 *
 * Only the soft transitions get it: a block set to "cut" chose hard edits,
 * and kenburns already owns the transform. Contain-fit plates are excluded
 * for the same reason they are excluded from every transform elsewhere —
 * the whole image is the point. Images only; scaling video costs real
 * decode work for a nearly invisible effect.
 * ============================================================ */
@media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
	.eekad-iv-scrolly.is-trans-crossfade .eekad-iv-sticky__slot.is-active img,
	.eekad-iv-scrolly.is-trans-blur .eekad-iv-sticky__slot.is-active img,
	.eekad-iv-scrolly.is-trans-crossfade .eekad-iv-immersive__plate.is-active:not(.is-fit-contain) img,
	.eekad-iv-scrolly.is-trans-blur .eekad-iv-immersive__plate.is-active:not(.is-fit-contain) img {
		animation: eekad-scrolly-settle 9s cubic-bezier(.16, 1, .3, 1) both;
	}
}

@keyframes eekad-scrolly-settle {
	from { transform: scale(1.022); }
	to   { transform: scale(1); }
}

/* ============================================================
 * Scrollytelling — evidence focus (desktop sticky)
 *
 * A step can declare the region of the frame its caption discusses;
 * render.php emits one .eekad-iv-scrolly__focus per such slot, placed by
 * custom properties. While the step is active the surround dims — the
 * oversized box-shadow, clipped by the slot — and the region is ruled in
 * lime: semantic, this-is-the-evidence, the reserved meaning of the
 * accent. It arrives after the crossfade has landed, so the reader sees
 * the picture first and the finding second.
 * ============================================================ */
.eekad-iv-scrolly__focus {
	display: none;
}

@media (min-width: 801px) {
	.eekad-iv-sticky__slot.has-focus {
		overflow: hidden; /* clips the dimming shadow to the frame */
	}

	/*
	 * Three layers, because one bordered box reads like a highlighter pen:
	 *   the element  — dims everything outside it
	 *   ::before     — the frame: hairline, lifted off the picture by a dark
	 *                  halo so it holds against any image under it
	 *   ::after      — an inset second hairline, the way a mount sits inside
	 *                  a picture frame. Reads as deliberate rather than drawn on.
	 *
	 * White, not lime. Lime is for what a reader can act on, and this is not
	 * clickable; at this size a lime rectangle read as a marker pen rather
	 * than an instrument.
	 */
	.eekad-iv-sticky__slot .eekad-iv-scrolly__focus {
		display: block;
		position: absolute;
		left: calc(var(--fx) - var(--fw) / 2);
		top: calc(var(--fy) - var(--fh) / 2);
		width: var(--fw);
		height: var(--fh);
		pointer-events: none;
		box-shadow: 0 0 0 200vmax rgba(9, 11, 13, 0);
	}

	.eekad-iv-sticky__slot .eekad-iv-scrolly__focus::before,
	.eekad-iv-sticky__slot .eekad-iv-scrolly__focus::after {
		content: "";
		position: absolute;
		opacity: 0;
	}

	.eekad-iv-sticky__slot .eekad-iv-scrolly__focus::before {
		inset: 0;
		border: 1px solid rgba(255, 255, 255, .92);
		box-shadow:
			0 0 0 1px rgba(0, 0, 0, .45),
			0 10px 34px rgba(0, 0, 0, .5);
	}

	.eekad-iv-sticky__slot .eekad-iv-scrolly__focus::after {
		inset: 5px;
		border: 1px solid rgba(255, 255, 255, .22);
	}

	/*
	 * The reveal. Held until the block is actually on screen — see armInView()
	 * — so the first step performs for someone who is there to see it, and
	 * staged so it reads as an instrument settling on a detail: the surround
	 * sinks first, then the frame pulls into focus out of a slight blur, then
	 * the mount line appears last.
	 */
	.eekad-iv-scrolly.is-in-view .eekad-iv-sticky__slot.is-active .eekad-iv-scrolly__focus {
		animation: eekad-focus-dim .85s cubic-bezier(.33, 1, .68, 1) .7s both;
	}
	.eekad-iv-scrolly.is-in-view .eekad-iv-sticky__slot.is-active .eekad-iv-scrolly__focus::before {
		animation: eekad-focus-frame .7s cubic-bezier(.22, 1, .36, 1) 1.05s both;
	}
	.eekad-iv-scrolly.is-in-view .eekad-iv-sticky__slot.is-active .eekad-iv-scrolly__focus::after {
		animation: eekad-focus-mount .5s ease 1.5s both;
	}

	@media (prefers-reduced-motion: reduce) {
		.eekad-iv-scrolly.is-in-view .eekad-iv-sticky__slot.is-active .eekad-iv-scrolly__focus,
		.eekad-iv-scrolly.is-in-view .eekad-iv-sticky__slot.is-active .eekad-iv-scrolly__focus::before,
		.eekad-iv-scrolly.is-in-view .eekad-iv-sticky__slot.is-active .eekad-iv-scrolly__focus::after {
			animation-duration: 1ms;
			animation-delay: 0s;
		}
	}
}

@keyframes eekad-focus-dim {
	from { box-shadow: 0 0 0 200vmax rgba(9, 11, 13, 0); }
	to   { box-shadow: 0 0 0 200vmax rgba(9, 11, 13, .52); }
}

/* Opens a touch wide and soft, then lands — a lens finding its subject. */
@keyframes eekad-focus-frame {
	from {
		opacity: 0;
		transform: scale(1.045);
		filter: blur(3px);
	}
	to {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}
}

@keyframes eekad-focus-mount {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ============================================================
 * Map scrollytelling — eekad/map-scrolly
 *
 * Reuses the scrollytelling layout grammar wholesale (.eekad-iv-sticky__*,
 * .eekad-iv-immersive__*) so the rail, the arrival, the mobile band and the
 * step spacing are the same code. Everything here is the delta: a map is a
 * live canvas, not a picture, so it never crops, never crossfades, and has
 * no fullscreen affordance.
 * ============================================================ */

/* The stage.
 *
 * Scoped through the block modifier on purpose: Mapbox stamps its own
 * `mapboxgl-map` class onto whatever container it initialises in, and
 * mapbox-gl.css — which loads after this file — declares
 * `.mapboxgl-map { position: relative }` at the same specificity. A bare
 * `.eekad-iv-scrolly__map` therefore lost, `inset` stopped applying, and the
 * element collapsed to zero height with a live GL canvas inside it: a map
 * that reports itself perfectly healthy and paints nothing.
 *
 * The explicit width/height are the belt to that braces — they hold the box
 * open even if the positioning is overridden again by a future version. */
.eekad-iv-scrolly--map .eekad-iv-scrolly__map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: var(--c-bg-alt);
}

/* Sticky: the map takes the media panel's whole box. The panel's own frame —
   border, shadow — still applies, so a map reads as the same object as a
   pinned photograph. */
.eekad-iv-scrolly--map .eekad-iv-sticky__media {
	aspect-ratio: 4 / 3;
	cursor: default; /* not a fullscreen trigger, unlike the media block */
}

.eekad-iv-scrolly--map .eekad-iv-immersive__bg {
	position: sticky;
	top: 0;
	height: 100svh;
}
/* Immersive stage is the full viewport, and the same Mapbox class collision
   applies — keep it explicitly sized. */
.eekad-iv-scrolly--map .eekad-iv-immersive__bg .eekad-iv-scrolly__map {
	height: 100svh;
}

/* Mapbox paints into a child canvas; without this the corners of the panel
   frame are drawn over by it. */
.eekad-iv-scrolly--map .mapboxgl-canvas-container,
.eekad-iv-scrolly--map .mapboxgl-canvas {
	outline: none;
}

/* A map story never shows the lattice: the map *is* the background. Guards
   against a copy-pasted has-grid-* class doing something silly. */
.eekad-iv-scrolly--map .eekad-iv-scrolly__lattice {
	display: none !important;
}

/* Fades in once the GL context has actually painted, so the reader never
   sees a flash of empty canvas under the arrival choreography. */
.eekad-iv-scrolly--map .eekad-iv-scrolly__map {
	opacity: 0;
	transition: opacity .6s ease;
}
.eekad-iv-scrolly--map.is-map-ready .eekad-iv-scrolly__map {
	opacity: 1;
}

/* No WebGL, or the style failed. If the editor supplied a still it is set as
   a background image inline; otherwise this is just the empty surface, and
   the step text carries the story on its own. */
.eekad-iv-scrolly__map.is-map-failed {
	opacity: 1;
	background-size: cover;
	background-position: center;
}

/* ----- Map controls -----
   A corner cluster of glyphs, the grammar every map application uses: square
   tiles, one job each, stacked. No labels at rest — the padlock and the
   globe/map pair say what they do, and the tooltip and the transient hint
   carry the words only when the reader is looking for them.

   Positioned clear of Mapbox's wordmark, which sits in this same corner and
   must stay legible — that is a term of the tile licence, not decoration. */
.eekad-iv-scrolly__ctrls {
	position: absolute;
	inset-block-end: 36px;
	inset-inline-end: 14px;
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.eekad-iv-scrolly__ctrl {
	position: relative;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	padding: 0;
	color: var(--c-text);
	background: rgba(14, 16, 18, .74);
	border: 1px solid rgba(255, 255, 255, .16);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.eekad-iv-scrolly__ctrl svg {
	width: 19px;
	height: 19px;
	display: block;
}
.eekad-iv-scrolly__ctrl-face {
	display: grid;
	place-items: center;
}
.eekad-iv-scrolly__ctrl [hidden] {
	display: none;
}

.eekad-iv-scrolly__ctrl:hover,
.eekad-iv-scrolly__ctrl:focus-visible {
	border-color: var(--c-lime);
	color: var(--c-lime);
	background: rgba(14, 16, 18, .9);
}
.eekad-iv-scrolly__ctrl:focus-visible {
	outline: 2px solid var(--c-lime);
	outline-offset: 2px;
}

/* Tooltip — the label, on demand. Sits beside the tile rather than over the
   map so it never covers the thing the reader is about to act on. */
.eekad-iv-scrolly__tip {
	position: absolute;
	inset-inline-start: calc(100% + 8px);
	white-space: nowrap;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--c-text);
	background: rgba(14, 16, 18, .92);
	border: 1px solid rgba(255, 255, 255, .14);
	opacity: 0;
	transform: translateX(-4px);
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
}
.eekad-iv-scrolly__ctrl:hover .eekad-iv-scrolly__tip:not([hidden]),
.eekad-iv-scrolly__ctrl:focus-visible .eekad-iv-scrolly__tip:not([hidden]) {
	opacity: 1;
	transform: none;
}

/* Unlocked: the whole control goes lime and the map admits it is draggable.
   `is-calling` is the pulse fired when a reader tries to drag a locked map. */
.eekad-iv-scrolly--map.is-exploring [data-map-explore] {
	border-color: var(--c-lime);
	color: var(--c-lime);
}
[data-map-explore].is-calling {
	animation: eekad-ctrl-call .45s ease 2;
}
@keyframes eekad-ctrl-call {
	0%, 100% { border-color: rgba(255, 255, 255, .16); color: var(--c-text); }
	50%      { border-color: var(--c-lime); color: var(--c-lime); }
}
@media (prefers-reduced-motion: reduce) {
	[data-map-explore].is-calling { animation: none; border-color: var(--c-lime); }
}

/* ----- Transient hint -----
   Never present at rest. It appears when the reader unlocks the map, and when
   they try to drag one that is still locked — help that arrives with the
   intent instead of a caption sitting on the picture forever. */
.eekad-iv-scrolly__hint {
	position: absolute;
	inset-block-end: 36px;
	inset-inline-end: 66px;
	z-index: 4;
	margin: 0;
	max-width: min(260px, 56%);
	padding: 8px 13px;
	font-size: 12.5px;
	line-height: 1.4;
	/* The article's prose is justified; a one-line pill inherited that and
	   came out with word-spacing stretched across the box. */
	text-align: start;
	text-wrap: balance;
	color: var(--c-text);
	background: rgba(14, 16, 18, .9);
	border: 1px solid rgba(255, 255, 255, .14);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	pointer-events: none;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .3s ease, transform .3s ease;
}
.eekad-iv-scrolly__hint.is-up {
	opacity: 1;
	transform: none;
}

/* Immersive: the cluster rides inside the sticky background, so it holds its
   corner for the whole sequence instead of scrolling away with the section. */
.eekad-iv-scrolly--map .eekad-iv-immersive__bg .eekad-iv-scrolly__ctrls {
	inset-block-end: 40px;
	inset-inline-end: 24px;
}
.eekad-iv-scrolly--map .eekad-iv-immersive__bg .eekad-iv-scrolly__hint {
	inset-block-end: 40px;
	inset-inline-end: 76px;
}

/* The text track is pulled up over the sticky background with a negative
   margin, so it is a full-viewport transparent sheet lying on top of the map —
   and it was swallowing every pointer event aimed at either the explore button
   or the map itself. Nothing in the track needs the pointer except the cards,
   so the sheet goes inert and the cards take their own events back.
   Map stories only: on an image immersive there is nothing underneath to
   reach, and dropping events there would only cost text selection. */
.eekad-iv-scrolly--map.eekad-iv-immersive .eekad-iv-immersive__track {
	pointer-events: none;
}
.eekad-iv-scrolly--map.eekad-iv-immersive .eekad-iv-immersive__card:not(.is-media-only) {
	pointer-events: auto;
}

/* While exploring, the map is the reader's. The cursor admits it is
   draggable, and a lime hairline traces the stage — a state you can see from
   anywhere in the frame, not only at the control you pressed. */
.eekad-iv-scrolly--map.is-exploring .eekad-iv-scrolly__map {
	cursor: grab;
}
.eekad-iv-scrolly--map.is-exploring .eekad-iv-scrolly__map::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	box-shadow: inset 0 0 0 1px rgba(205, 254, 100, .55);
}
.eekad-iv-scrolly--map.is-exploring .eekad-iv-scrolly__map:active {
	cursor: grabbing;
}

/* ============================================================
 * Map stories — narration chrome
 *
 * A map story already carries its own position, scale and progress: the
 * camera moves, the highlight lands, the rail fills. The step numerals and
 * the rules trailing off the kickers were repeating that in text, and on a
 * near-black satellite frame they read as leftover furniture rather than
 * design. Stripped here only — the image scrollytelling blocks keep theirs,
 * where there is no camera to carry the sense of place.
 * ============================================================ */
.eekad-iv-scrolly--map .eekad-iv-sticky__step::before,
.eekad-iv-scrolly--map .eekad-iv-immersive__card::before,
.eekad-iv-scrolly--map .eekad-iv-sticky__kicker::after,
.eekad-iv-scrolly--map .eekad-iv-immersive__kicker::after,
.eekad-iv-scrolly--map .eekad-iv-sticky__counter {
	display: none;
}

/* The kicker is now the card's first line, so it carries the space the
   numeral used to hold above it. */
.eekad-iv-scrolly--map .eekad-iv-sticky__kicker,
.eekad-iv-scrolly--map .eekad-iv-immersive__kicker {
	display: block;
	margin-block-end: 16px;
}

/* Without the counter the rail is ticks alone; centre them in the column they
   used to share. (A hairline track behind them was tried and removed — it
   read as a line drawn through the marks rather than a rail holding them.) */
.eekad-iv-scrolly--map .eekad-iv-sticky__rail {
	justify-content: center;
}

/* ----- Immersive card -----
   Narrower, tighter, and no chrome. The previous box was 580px wide holding
   three lines of 26px text, which left a slab of empty glass under every
   short step — the "unbalanced" feel. A 460px column fills at four to six
   lines, which is what these steps actually run to, and the smaller type
   keeps the map the subject: in an immersive frame the words are the caption,
   not the article. */
@media (min-width: 801px) {
	.eekad-iv-scrolly--map .eekad-iv-immersive__card {
		max-width: 460px;
		padding: 34px 38px 36px;
		/* Barely any saturation boost, unlike the image immersive. The photo
		   plates that setting was tuned for are already graded; satellite
		   desert is not, and 150% turned every panel over Sudan olive-brown.
		   The panel should read as neutral glass over whatever is beneath. */
		background: rgba(var(--c-bg-base-rgb), 0.80);
		backdrop-filter: blur(30px) saturate(104%);
		-webkit-backdrop-filter: blur(30px) saturate(104%);
	}
	.eekad-iv-scrolly--map.is-text-center .eekad-iv-immersive__card,
	.eekad-iv-scrolly--map .eekad-iv-immersive__card.is-card-center {
		max-width: 560px;
	}
	.eekad-iv-scrolly--map .eekad-iv-immersive__kicker {
		font-size: 12px;
		color: var(--c-text-muted);
	}
	.eekad-iv-scrolly--map .eekad-iv-immersive__body {
		font-size: 21px;
		line-height: 1.62;
	}
}

/* ----- Missing token / fallback prose -----
   A configuration failure must not swallow the journalism. */
.eekad-iv-scrolly--map.is-no-token {
	padding-block: 40px;
}
.eekad-iv-scrolly__fallback-steps {
	max-width: 720px;
	margin-inline: auto;
	padding-inline: var(--container-px);
	display: grid;
	gap: 24px;
}

@media (max-width: 800px) {
	/* Phone band.
	   16/9 is the right shape for a photograph and the wrong one for a map:
	   on a 390pt phone it left a 219pt letterbox, too shallow to show a place
	   and its surroundings at once, which is the only reason to put a map in
	   an article. 4/3 buys ninety more points of context and still leaves the
	   text the larger half of the screen.

	   Set through the band's own custom property rather than overriding
	   aspect-ratio directly: the shared rule reads --scrolly-band-ratio, and
	   competing with it on specificity would only invite the next person to
	   raise the stakes again. */
	.eekad-iv-scrolly--map {
		--scrolly-band-ratio: 4 / 3;
	}

	/* The padlock is out on touch: unlocking a map inside a scrolling article
	   turns every attempt to scroll past it into a pan, and there is no
	   hover to explain the way back. The basemap switch stays — it is a
	   single tap with an immediate, obvious result. */
	.eekad-iv-scrolly--map [data-map-explore],
	.eekad-iv-scrolly--map .eekad-iv-scrolly__hint {
		display: none;
	}
	.eekad-iv-scrolly--map .eekad-iv-scrolly__ctrls {
		inset-block-end: 34px;
		inset-inline-end: 10px;
	}
	.eekad-iv-scrolly--map .eekad-iv-scrolly__ctrl {
		width: 34px;
		height: 34px;
	}
	/* No hover on touch, so the tooltip would only ever appear stuck open
	   after a tap. The glyph carries it. */
	.eekad-iv-scrolly--map .eekad-iv-scrolly__tip {
		display: none;
	}

	/* The band inherits the media block's "tap to examine" corner icon, which
	   opens the image lightbox. A map has no image to open — the icon would
	   promise something that cannot happen. */
	.eekad-iv-scrolly--map.is-mobile-sticky.eekad-iv-sticky .eekad-iv-sticky__media::after,
	.eekad-iv-scrolly--map.is-mobile-sticky.eekad-iv-immersive .eekad-iv-immersive__bg::after {
		content: none;
	}
}

/* ============================================================
 * Scrollytelling — image transition types (block-level)
 *
 * The parent block's `transition` attribute becomes .is-trans-<type> on the
 * section and controls how one pinned image gives way to the next — on both
 * desktop (sticky slot / immersive plate) and the shared mobile background.
 * Declared after the mobile @media block so these win on every breakpoint.
 * The active image is marked .is-active by the engine.
 * ============================================================ */

/* Crossfade (default) — smooth opacity dissolve, no motion on the image.
   This is the "smooth" default; dropping the old base scale is what removed
   the zoom-pulse jump on mobile. */
.eekad-iv-scrolly.is-trans-crossfade .eekad-iv-sticky__slot,
.eekad-iv-scrolly.is-trans-crossfade .eekad-iv-immersive__plate {
	transition: opacity 1.25s cubic-bezier(.4, 0, .2, 1);
}
.eekad-iv-scrolly.is-trans-crossfade .eekad-iv-sticky__slot img,
.eekad-iv-scrolly.is-trans-crossfade .eekad-iv-sticky__slot video,
.eekad-iv-scrolly.is-trans-crossfade .eekad-iv-immersive__plate img {
	transform: none;
}

/* Cut — instant hard switch, no fade, no motion. */
.eekad-iv-scrolly.is-trans-cut .eekad-iv-sticky__slot,
.eekad-iv-scrolly.is-trans-cut .eekad-iv-immersive__plate {
	transition: none;
}
.eekad-iv-scrolly.is-trans-cut .eekad-iv-sticky__slot img,
.eekad-iv-scrolly.is-trans-cut .eekad-iv-immersive__plate img {
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	/* Ken Burns — crossfade plus a slow, continuous zoom on the active image
	   (the documentary drift used by NYT / Apple story pages). Never applied
	   to "fit whole image" plates, whose higher-specificity rule keeps them
	   un-transformed. */
	.eekad-iv-scrolly.is-trans-kenburns .eekad-iv-sticky__slot,
	.eekad-iv-scrolly.is-trans-kenburns .eekad-iv-immersive__plate {
		transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1);
	}
	.eekad-iv-scrolly.is-trans-kenburns .eekad-iv-sticky__slot img,
	.eekad-iv-scrolly.is-trans-kenburns .eekad-iv-immersive__plate img {
		transform: scale(1);
		transition: transform 7s ease-out;
	}
	.eekad-iv-scrolly.is-trans-kenburns .eekad-iv-sticky__slot.is-active img,
	.eekad-iv-scrolly.is-trans-kenburns .eekad-iv-immersive__plate.is-active img {
		transform: scale(1.08);
	}

	/* Blur dissolve — crossfade while the incoming image sharpens up from a
	   soft blur (the dreamy swap Apple uses on product pages). */
	.eekad-iv-scrolly.is-trans-blur .eekad-iv-sticky__slot,
	.eekad-iv-scrolly.is-trans-blur .eekad-iv-immersive__plate {
		transition: opacity 1.15s ease;
	}
	.eekad-iv-scrolly.is-trans-blur .eekad-iv-sticky__slot img,
	.eekad-iv-scrolly.is-trans-blur .eekad-iv-immersive__plate img {
		transform: none;
		filter: blur(18px) saturate(1.05) contrast(1.05);
		transition: filter 1.15s ease;
	}
	.eekad-iv-scrolly.is-trans-blur .eekad-iv-sticky__slot.is-active img,
	.eekad-iv-scrolly.is-trans-blur .eekad-iv-immersive__plate.is-active img {
		filter: blur(0) saturate(1.1) contrast(1.06);
	}
}

/* =============================================================
 * Category archive
 * =========================================================== */

/* --- Page background --- */
.eekad-archive { background: var(--c-bg-base); padding-block-end: 80px; }

/* --- Hero --- */
.eekad-archive__hero {
	position: relative;
	padding-block: clamp(80px, 9vw, 120px) 24px;
	background: transparent; /* one deep canvas — no hero band */
	overflow: hidden;
}
.eekad-archive__hero-bg {
	display: none;
}
.eekad-archive__hero .eekad-container {
	position: relative;
	z-index: 1;
}
.eekad-archive__breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--c-text-muted);
	margin-block-end: 20px;
}
.eekad-archive__breadcrumb a {
	color: var(--c-text-2);
	transition: opacity .2s;
}
.eekad-archive__breadcrumb a:hover { opacity: .7; }
.eekad-archive__breadcrumb-sep {
	color: var(--c-text-faint);
}
.eekad-archive__title {
	font-size: clamp(44px, 5vw, 64px);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 16px;
}
.eekad-archive__desc {
	font-size: 17px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--c-text-3);
	max-width: 640px;
	margin: 0 0 20px;
}
.eekad-archive__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: var(--c-text-faint);
}
.eekad-archive__accent-line {
	display: none; /* decorative lime retired */
}
.eekad-archive__count {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* --- Subcategory pills (matches news archive pill style) --- */
.eekad-archive__subs {
	padding-block: 0;
	background: none;
	border: none;
}
.eekad-archive__subs-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding-top: 48px;
	padding-bottom: 24px;
	margin-bottom: 48px; /* separation is space, not lines */
}
.eekad-archive__sub-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--c-text-2);
	background: var(--glass-bg);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	text-decoration: none;
	transition: color .2s, background .2s, border-color .2s;
}
.eekad-archive__sub-pill:hover {
	color: var(--c-text);
	background: var(--glass-bg-hover);
}
.eekad-archive__sub-pill.is-active {
	color: var(--c-bg-base);
	background: var(--c-text);
	border-color: var(--c-text);
	font-weight: 600;
}
.eekad-archive__sub-count {
	font-size: 11px;
	opacity: .5;
	background: rgba(var(--c-border-rgb), .08);
	padding: 2px 6px;
	line-height: 1;
}
.eekad-archive__sub-pill.is-active .eekad-archive__sub-count {
	background: rgba(var(--c-border-rgb), .1);
	opacity: .7;
}

/* --- Featured post --- */
.eekad-archive__featured {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 0;
	margin-block: 40px;
	background: var(--glass-bg);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	border-radius: 0;
	overflow: hidden;
}
.eekad-archive__featured-media {
	display: block;
	overflow: hidden;
	max-height: 420px;
}
.eekad-archive__featured-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.eekad-archive__featured:hover .eekad-archive__featured-media img {
	transform: scale(1.03);
}
.eekad-archive__featured-body {
	padding: 36px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0;
}
.eekad-archive__featured-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--c-text-muted);
	margin: 0 0 16px;
}
.eekad-archive__featured-cat {
	color: var(--c-text-muted);
	font-weight: 600;
}
.eekad-archive__meta-sep {
	width: 3px;
	height: 3px;
	background: rgba(var(--c-border-rgb), .2);
	border-radius: 50%;
	flex-shrink: 0;
}
.eekad-archive__featured-title {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 14px;
}
.eekad-archive__featured-title a {
	transition: color .2s;
}
.eekad-archive__featured-title a:hover {
	color: var(--c-text);
}
.eekad-archive__featured-excerpt {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--c-text-3);
	margin: 0 0 24px;
}
.eekad-archive__featured-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--c-text);
	transition: color .2s;
}
.eekad-archive__featured-cta:hover {
	color: var(--c-lime); /* interactive hover */
}
.eekad-archive__featured-cta svg {
	width: 18px;
	height: 18px;
}

/* --- Category featured reports --- */
.eekad-cat-featured {
	padding-block: 48px 56px;
}
.eekad-cat-featured__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 40px;
}
/* Category page section headings. "أبرز التقارير" and "جميع المقالات"
   are peers one level below the page title, so they share a single
   definition and cannot drift apart. The featured heading used to take
   --fs-display — the page-title token — which landed it within a few
   pixels of the h1 above it and flattened the hierarchy. */
.eekad-cat-featured__title,
.eekad-cat-all__title {
	font-family: var(--font-sans);
	font-size: var(--fs-section);
	font-weight: 700;
	color: var(--c-text);
	margin: 0;
}
.eekad-cat-featured__pills {
	margin: 0;
}
.eekad-cat-featured__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.eekad-cat-featured__grid[hidden] { display: none; }
@media (max-width: 960px) {
	.eekad-cat-featured__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.eekad-cat-featured__grid { grid-template-columns: 1fr; }
}

/* --- Posts grid --- */
.eekad-archive__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-block-end: 48px;
}
.eekad-archive__card {
	background: var(--glass-bg);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	border-radius: 0;
	overflow: hidden;
	transition: transform .2s, background .2s;
}
.eekad-archive__card:hover {
	transform: translateY(-3px);
	background: var(--glass-bg-hover);
}
.eekad-archive__card-media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.eekad-archive__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.eekad-archive__card:hover .eekad-archive__card-media img {
	transform: scale(1.03);
}
.eekad-archive__card-body {
	padding: 20px 24px 24px;
}
.eekad-archive__card-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--c-text-muted);
	margin: 0 0 10px;
}
.eekad-archive__card-cat {
	color: var(--c-text-muted);
	font-weight: 600;
}
.eekad-archive__card-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 8px;
}
.eekad-archive__card-title a {
	transition: color .2s;
}
.eekad-archive__card-title a:hover {
	color: var(--c-text);
}
.eekad-archive__card-excerpt {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.65;
	color: var(--c-text-muted);
	margin: 0;
}

/* --- Pagination --- */
.eekad-archive__pagination {
	margin-block: 40px 48px;
	display: flex;
	justify-content: center;
}
.eekad-archive__pagination .page-numbers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 4px;
}
.eekad-archive__pagination .page-numbers li {
	display: inline-flex;
}
.eekad-archive__pagination .page-numbers a,
.eekad-archive__pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--c-text-muted);
	border: 1px solid rgba(var(--c-border-rgb), .06);
	transition: color .2s, background .2s, border-color .2s;
}
.eekad-archive__pagination .page-numbers a:hover {
	color: var(--c-text);
	background: rgba(var(--c-border-rgb), .06);
	border-color: rgba(var(--c-border-rgb), .1);
}
.eekad-archive__pagination .page-numbers .current {
	color: var(--c-bg-base);
	background: var(--c-text);
	border-color: var(--c-text);
	font-weight: 700;
}

/* --- Related entities --- */
.eekad-archive__entities {
	margin-block: 16px 56px;
	padding-block-start: 32px;
	border-block-start: 1px solid rgba(var(--c-border-rgb), .06);
}
.eekad-archive__entities-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 20px;
}
.eekad-archive__entities-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0;
}
.eekad-archive__entities-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--c-text-2);
	transition: opacity .2s;
}
.eekad-archive__entities-more svg {
	width: 16px;
	height: 16px;
}
.eekad-archive__entities-more:hover { opacity: .7; }
.eekad-archive__entities-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
.eekad-archive__entity {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: rgba(var(--c-border-rgb), .03);
	border: 1px solid rgba(var(--c-border-rgb), .04);
	text-decoration: none;
	transition: background .2s, border-color .2s;
}
.eekad-archive__entity:hover {
	background: rgba(var(--c-border-rgb), .06);
	border-color: rgba(var(--c-border-rgb), .08);
}
.eekad-archive__entity-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.eekad-archive__entity-name {
	flex: 1;
	font-size: 14px;
	font-weight: 600;
	color: var(--c-text);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.eekad-archive__entity-type {
	font-size: 11px;
	color: var(--c-text-faint);
	flex-shrink: 0;
}

/* --- Responsive --- */
@media (max-width: 768px) {
	.eekad-archive__hero { padding-block: 80px 28px; }
	.eekad-archive__title { font-size: 32px; }
	.eekad-archive__featured { grid-template-columns: 1fr; }
	.eekad-archive__featured-body { padding: 24px; }
	.eekad-archive__grid { grid-template-columns: 1fr; }
	.eekad-archive__entities-grid { grid-template-columns: 1fr; }
}

/* =============================================================
 * Category — All Posts section
 * =========================================================== */
.eekad-cat-all {
	padding-block: 56px 80px;
}
.eekad-cat-all__header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 32px;
}
/* Type comes from the shared section-heading rule above. No underline:
   section headings across the site carry no rule beneath them. */
.eekad-cat-all__search {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 420px;
	background: var(--c-bg-surface);
	border: 1px solid rgba(var(--c-border-rgb), .08);
	padding: 10px 16px;
	transition: border-color .2s;
}
.eekad-cat-all__search:focus-within {
	border-color: var(--c-lime, #CDFE64);
}
.eekad-cat-all__search-label {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--c-text-faint);
	cursor: pointer;
}
.eekad-cat-all__search-label svg { width: 18px; height: 18px; }
.eekad-cat-all__search-input {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	outline: 0;
	color: var(--c-text);
	font-size: 14px;
	font-family: inherit;
	padding: 0;
	width: 100%;
}
.eekad-cat-all__search-input::placeholder { color: var(--c-text-faint); }
.eekad-cat-all__search-input::-webkit-search-cancel-button { display: none; }
.eekad-cat-all__search-clear {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--c-text-faint);
	transition: color .2s;
}
.eekad-cat-all__search-clear:hover { color: var(--c-text); }
.eekad-cat-all__search-clear svg { width: 14px; height: 14px; }
.eekad-cat-all__results {
	transition: opacity .2s;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.eekad-cat-all__empty {
	color: var(--c-text-muted);
	font-size: 15px;
	text-align: center;
	padding: 48px 0;
}
.eekad-cat-all .eekad-news-archive__grid {
	grid-template-columns: repeat(4, 1fr);
	width: 100%;
}
@media (max-width: 1100px) {
	.eekad-cat-all .eekad-news-archive__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
	.eekad-cat-all .eekad-news-archive__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.eekad-cat-all__search { max-width: none; }
}
@media (max-width: 640px) {
	.eekad-cat-all .eekad-news-archive__grid { grid-template-columns: 1fr; }
}
/* The "load more" button that used to sit here retired with the switch
   to real paginated links — the category list now uses the shared
   pagination kit (.eekad-archive__pagination). */

/* =============================================================
 * Eekad File (ملف إيكاد)
 * =========================================================== */

/* --- Hero overlay HUD (floating file badge on the hero) --- */
.eekad-file-hud {
	position: absolute;
	top: 80px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	background: rgba(0, 0, 0, .55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(var(--c-border-rgb), .08);
	inset-inline-end: clamp(16px, 4vw, 80px);
}
.eekad-file-hud__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0; /* Arabic — never tracked */
	color: var(--c-text-muted);
}
.eekad-file-hud__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--c-text);
}
.eekad-file-hud__status {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	color: var(--c-text-3);
	background: rgba(var(--c-border-rgb), .08);
}
.eekad-file-hud__status--active { color: #55ce5c; background: rgba(85, 206, 92, .12); }
.eekad-file-hud__status--developing { color: #fdec4b; background: rgba(253, 236, 75, .12); }
.eekad-file-hud__status--archived { color: rgba(var(--c-border-rgb), .35); }

/* --- Context bar (sticky dossier strip below the hero) --- */
.eekad-file-bar {
	position: sticky;
	top: 56px;
	z-index: 90;
	background: var(--c-bg-alt);
	border-block-end: 1px solid rgba(var(--c-border-rgb), .06);
}
.eekad-file-bar__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-block: 18px;
}
.eekad-file-bar__id {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.eekad-file-bar__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c-lime, #cdfe64);
}
.eekad-file-bar__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--c-text);
}
.eekad-file-bar__status {
	font-size: 10px;
	font-weight: 600;
	padding: 2px 7px;
	color: var(--c-text-muted);
	background: rgba(var(--c-border-rgb), .06);
}
.eekad-file-bar__status--active { color: #55ce5c; background: rgba(85, 206, 92, .1); }
.eekad-file-bar__status--developing { color: #fdec4b; background: rgba(253, 236, 75, .1); }
.eekad-file-bar__stats {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-inline-start: auto;
}
.eekad-file-bar__stat {
	font-size: 12px;
	color: var(--c-text-muted);
}
.eekad-file-bar__stat strong {
	color: var(--c-text);
	font-weight: 600;
	margin-inline-end: 3px;
}
.eekad-file-bar__cta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--c-lime, #cdfe64);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: opacity .2s;
}
.eekad-file-bar__cta:hover { opacity: .7; }

/* --- Close button on the context bar --- */
.eekad-file-bar__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	color: var(--c-text-faint);
	background: transparent;
	border: 1px solid rgba(var(--c-border-rgb), .08);
	cursor: pointer;
	transition: color .2s, border-color .2s;
	padding: 0;
	margin-inline-start: 12px;
}
.eekad-file-bar__close:hover {
	color: var(--c-text);
	border-color: rgba(var(--c-border-rgb), .2);
}
.eekad-file-bar__close svg { width: 14px; height: 14px; }

@media (max-width: 768px) {
	.eekad-file-hud { top: 68px; padding: 6px 12px; gap: 6px; }
	.eekad-file-hud__name { font-size: 13px; }
	.eekad-file-bar__inner { flex-wrap: wrap; gap: 8px 16px; }
	.eekad-file-bar__stats { margin-inline-start: 0; }
	.eekad-file-bar__cta { margin-inline-start: auto; }
}

/* --- Hero (legacy, kept for compatibility) --- */
.eekad-file__hero {
	position: relative;
	padding-block: 100px 40px;
	background: var(--c-bg-surface);
	overflow: hidden;
}
.eekad-file__hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: .3;
}
.eekad-file__hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--c-bg-base) 0%, transparent 60%);
}
.eekad-file__hero-content {
	position: relative;
	z-index: 1;
}

/* Badge row */
.eekad-file__hero-badge {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block-end: 20px;
}
.eekad-file__hero-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #cdfe64;
}
.eekad-file__hero-status {
	font-size: 12px;
	font-weight: 600;
	padding: 5px 12px;
	color: var(--c-text-2);
	background: rgba(var(--c-border-rgb), .08);
}
.eekad-file__hero-status--active {
	color: #55ce5c;
	background: rgba(85, 206, 92, .1);
}
.eekad-file__hero-status--developing {
	color: #fdec4b;
	background: rgba(253, 236, 75, .1);
}
.eekad-file__hero-status--archived {
	color: var(--c-text-muted);
}

/* Title & text */
.eekad-file__hero-title {
	font-size: 48px;
	font-weight: 700;
	line-height: var(--lh-title);
	margin: 0 0 16px;
}
.eekad-file__hero-desc {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--c-text-3);
	max-width: 640px;
	margin: 0 0 16px;
}
.eekad-file__hero-date {
	font-size: 13px;
	color: var(--c-text-faint);
	margin: 0 0 24px;
}

/* Stats */
.eekad-file__stats {
	display: flex;
	gap: 24px;
}
.eekad-file__stat {
	font-size: 14px;
	color: var(--c-text-muted);
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.eekad-file__stat-num {
	font-size: 28px;
	font-weight: 700;
	color: var(--c-text);
	line-height: 1;
}

/* --- Featured (full-bleed image card) --- */
.eekad-file__featured {
	display: block;
	position: relative;
	margin-block: 40px;
	min-height: 420px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	text-decoration: none;
	color: var(--c-text);
}
.eekad-file__featured-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .1) 100%);
	transition: background .3s;
}
.eekad-file__featured:hover .eekad-file__featured-overlay {
	background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .4) 50%, rgba(0, 0, 0, .15) 100%);
}
.eekad-file__featured-body {
	position: relative;
	z-index: 1;
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 420px;
}
.eekad-file__featured-badges {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-block-end: 14px;
}
.eekad-file__type-badge {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
	padding: 4px 10px;
	color: var(--c-lime, #CDFE64);
	background: rgba(213, 254, 119, .15);
}
.eekad-file__featured-cat {
	font-size: 12px;
	color: var(--c-text-muted);
}
.eekad-file__featured-title {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 12px;
	max-width: 700px;
}
.eekad-file__featured-excerpt {
	font-size: 16px;
	line-height: 1.7;
	color: var(--c-text-2);
	margin: 0 0 16px;
	max-width: 600px;
}
.eekad-file__featured-date {
	font-size: 13px;
	color: var(--c-text-faint);
}

/* --- Lead article cards (2-col) --- */
.eekad-file__lead-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-block-end: 24px;
}
.eekad-file__lead-card {
	background: var(--c-bg-elevated);
	overflow: hidden;
	transition: transform .2s;
}
.eekad-file__lead-card:hover { transform: translateY(-2px); }
.eekad-file__lead-media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.eekad-file__lead-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s;
}
.eekad-file__lead-card:hover .eekad-file__lead-media img { transform: scale(1.03); }
.eekad-file__lead-body {
	padding: 18px 22px 22px;
}
.eekad-file__lead-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	margin: 6px 0 8px;
}
.eekad-file__lead-title a { transition: color .2s; }
.eekad-file__lead-title a:hover { color: var(--c-lime); }

/* --- Sections --- */
.eekad-file__section {
	margin-block-end: 48px;
	padding-block-start: 32px;
	border-block-start: 1px solid rgba(var(--c-border-rgb), .06);
}
.eekad-file__section-title {
	font-size: var(--fs-section);
	font-weight: 700;
	margin: 0 0 20px;
}

/* --- Investigation cards --- */
.eekad-file__inv-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.eekad-file__inv-card {
	display: flex;
	flex-direction: column;
	background: var(--c-bg-elevated);
	overflow: hidden;
	text-decoration: none;
	transition: transform .2s;
}
.eekad-file__inv-card:hover { transform: translateY(-2px); }
.eekad-file__inv-thumb {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.eekad-file__inv-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s;
}
.eekad-file__inv-card:hover .eekad-file__inv-thumb img { transform: scale(1.03); }
.eekad-file__inv-body {
	padding: 16px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.eekad-file__inv-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--c-text);
}
.eekad-file__inv-date {
	font-size: 12px;
	color: var(--c-text-faint);
}

/* --- Article rows --- */
.eekad-file__articles {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.eekad-file__article-row {
	display: flex;
	gap: 20px;
	padding-block: 20px;
	border-block-end: 1px solid rgba(var(--c-border-rgb), .04);
	align-items: center;
}
.eekad-file__article-row:last-child { border-block-end: none; }
.eekad-file__article-thumb {
	flex-shrink: 0;
	width: 160px;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	display: block;
}
.eekad-file__article-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s;
}
.eekad-file__article-row:hover .eekad-file__article-thumb img { transform: scale(1.03); }
.eekad-file__article-body {
	flex: 1;
	min-width: 0;
}
.eekad-file__article-cat {
	font-size: 12px;
	font-weight: 600;
	color: var(--c-lime, #CDFE64);
	margin-block-end: 4px;
	display: block;
}
.eekad-file__article-title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 6px;
}
.eekad-file__article-title a { transition: color .2s; }
.eekad-file__article-title a:hover { color: var(--c-lime); }
.eekad-file__article-excerpt {
	font-size: 14px;
	line-height: 1.6;
	color: var(--c-text-muted);
	margin: 0 0 6px;
}
.eekad-file__article-date {
	font-size: 12px;
	color: var(--c-text-faint);
}

/* --- Entities --- */
.eekad-file__entities-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 20px;
}
.eekad-file__entities-header .eekad-file__section-title { margin: 0; }
.eekad-file__entities-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--c-lime, #CDFE64);
	transition: opacity .2s;
}
.eekad-file__entities-link svg { width: 16px; height: 16px; }
.eekad-file__entities-link:hover { opacity: .7; }
.eekad-file__entities-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-block-end: 48px;
}
.eekad-file__entity {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: rgba(var(--c-border-rgb), .03);
	border: 1px solid rgba(var(--c-border-rgb), .04);
	text-decoration: none;
	transition: background .2s, border-color .2s;
}
.eekad-file__entity:hover {
	background: rgba(var(--c-border-rgb), .06);
	border-color: rgba(var(--c-border-rgb), .08);
}
.eekad-file__entity-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.eekad-file__entity-name {
	flex: 1;
	font-size: 14px;
	font-weight: 600;
	color: var(--c-text);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.eekad-file__entity-type {
	font-size: 11px;
	color: var(--c-text-faint);
	flex-shrink: 0;
}

/* --- Responsive --- */
@media (max-width: 768px) {
	.eekad-file__hero { padding-block: 80px 28px; }
	.eekad-file__hero-title { font-size: 32px; }
	.eekad-file__stats { flex-wrap: wrap; gap: 16px; }
}


/* =============================================================
 * Investigations Archive — /investigations/
 * =========================================================== */

.eekad-inv-archive__hero {
	position: relative;
	padding-block: clamp(80px, 9vw, 120px) 24px;
	background: transparent; /* one deep canvas */
	overflow: hidden;
}
.eekad-inv-archive__hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: .25;
}
.eekad-inv-archive__hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--c-bg-base) 0%, transparent 60%);
}
.eekad-inv-archive__hero-inner {
	position: relative;
	z-index: 1;
}
.eekad-inv-archive__hero-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0; /* Arabic — never tracked */
	color: var(--c-text-2);
	margin-block-end: 16px;
}
.eekad-inv-archive__hero-title {
	font-size: clamp(44px, 5vw, 64px);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 16px;
}
.eekad-inv-archive__hero-desc {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--c-text-3);
	max-width: 640px;
	margin: 0 0 20px;
}
.eekad-inv-archive__hero-count {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--c-text-muted);
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
}

/* Featured */
.eekad-inv-archive__featured {
	display: block;
	position: relative;
	margin-block: 40px;
	min-height: 420px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	text-decoration: none;
	color: var(--c-text);
}
.eekad-inv-archive__featured-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .1) 100%);
	transition: background .3s;
}
.eekad-inv-archive__featured:hover .eekad-inv-archive__featured-overlay {
	background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .4) 50%, rgba(0, 0, 0, .15) 100%);
}
.eekad-inv-archive__featured-body {
	position: relative;
	z-index: 1;
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 420px;
}
.eekad-inv-archive__featured-badges {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-block-end: 14px;
}
.eekad-inv-archive__badge {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0; /* Arabic — never tracked */
	padding: 0;
	color: var(--c-text-muted);
	background: transparent;
}
.eekad-inv-archive__featured-file {
	font-size: 12px;
	color: var(--c-text-muted);
}
.eekad-inv-archive__featured-title {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 12px;
	max-width: 700px;
}
.eekad-inv-archive__featured-excerpt {
	font-size: 16px;
	line-height: 1.7;
	color: var(--c-text-2);
	margin: 0 0 16px;
	max-width: 600px;
}
.eekad-inv-archive__featured-date {
	font-size: 13px;
	color: var(--c-text-faint);
}

/* Grid */
.eekad-inv-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-block-end: 48px;
}
.eekad-inv-archive__card {
	background: var(--glass-bg);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	overflow: hidden;
	transition: transform .2s, background .2s;
}
.eekad-inv-archive__card:hover { background: var(--glass-bg-hover); }
.eekad-inv-archive__card:hover { transform: translateY(-2px); }
.eekad-inv-archive__card-media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.eekad-inv-archive__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s;
}
.eekad-inv-archive__card:hover .eekad-inv-archive__card-media img { transform: scale(1.03); }
.eekad-inv-archive__card-body {
	padding: 18px 22px 22px;
}
.eekad-inv-archive__card-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-block-end: 8px;
}
.eekad-inv-archive__card-file {
	font-size: 12px;
	color: var(--c-text-muted);
}
.eekad-inv-archive__card-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 8px;
}
.eekad-inv-archive__card-title a { transition: color .2s; }
.eekad-inv-archive__card-title a:hover { color: var(--c-text); }
.eekad-inv-archive__card-excerpt {
	font-size: 14px;
	line-height: 1.6;
	color: var(--c-text-muted);
	margin: 0 0 10px;
}
.eekad-inv-archive__card-date {
	font-size: 12px;
	color: var(--c-text-faint);
}

/* Pagination for this archive retired its own copy — see the pagination
   kit near the end of this file, which now styles every archive. */

@media (max-width: 768px) {
	.eekad-inv-archive__hero { padding-block: 64px 16px; }
	.eekad-inv-archive__hero-title { font-size: 36px; }
	.eekad-inv-archive__featured { min-height: 300px; }
	.eekad-inv-archive__featured-body { min-height: 300px; padding: 24px; }
	.eekad-inv-archive__featured-title { font-size: 24px; }
	.eekad-inv-archive__grid { grid-template-columns: 1fr; }
}


/* =============================================================
 * Files Index — /files/
 * =========================================================== */

.eekad-files-index__hero {
	padding-block: clamp(80px, 9vw, 120px) 24px;
	background: transparent; /* one deep canvas — no hero band */
}
.eekad-files-index__hero-inner {
	position: relative;
	z-index: 1;
}
.eekad-files-index__hero-label {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0; /* Arabic — never tracked */
	color: var(--c-text-2);
	margin-block-end: 16px;
}
.eekad-files-index__hero-title {
	font-size: clamp(44px, 5vw, 64px);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 16px;
}
.eekad-files-index__hero-desc {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--c-text-3);
	max-width: 680px;
	margin: 0 0 16px;
}
.eekad-files-index__hero-count {
	font-size: 14px;
	color: var(--c-text-faint);
}

/* Sections */
.eekad-files-index__section {
	padding-block: 40px; /* separation is space, not lines */
}
.eekad-files-index__section-title {
	font-size: var(--fs-section);
	font-weight: 700;
	margin: 0 0 24px;
}

/* Card grid */
.eekad-files-index__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.eekad-files-index__grid--archived {
	grid-template-columns: repeat(3, 1fr);
}

/* File card */
.eekad-files-index__card {
	display: block;
	position: relative;
	min-height: 280px;
	overflow: hidden;
	text-decoration: none;
	color: var(--c-text);
	background: var(--c-bg-elevated);
	transition: transform .2s;
}
.eekad-files-index__card:hover { transform: translateY(-2px); }
.eekad-files-index__card-cover {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform .5s;
}
.eekad-files-index__card:hover .eekad-files-index__card-cover { transform: scale(1.03); }
.eekad-files-index__card-cover--empty {
	background: linear-gradient(135deg, rgba(var(--c-lime-rgb), .06) 0%, rgba(var(--c-bg-elevated-rgb), .8) 100%);
}
.eekad-files-index__card-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .05) 100%);
}
.eekad-files-index__card-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 28px;
	min-height: 280px;
}

/* Badges */
.eekad-files-index__card-badges {
	margin-block-end: 12px;
}
.eekad-files-index__card-status {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	color: var(--c-text-3);
	background: rgba(var(--c-border-rgb), .08);
}
.eekad-files-index__card-status--active {
	color: #55ce5c;
	background: rgba(85, 206, 92, .12);
}
.eekad-files-index__card-status--developing {
	color: #fdec4b;
	background: rgba(253, 236, 75, .12);
}
.eekad-files-index__card-status--archived {
	color: var(--c-text-muted);
}

/* Card text */
.eekad-files-index__card-title {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.3;
	margin-block-end: 8px;
}
.eekad-files-index__card-desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--c-text-muted);
	margin-block-end: 14px;
	display: block;
}
.eekad-files-index__card-stats {
	display: flex;
	gap: 14px;
	font-size: 12px;
	color: var(--c-text-faint);
}
.eekad-files-index__card-stats span {
	display: inline-flex;
	align-items: center;
}

/* Archived cards — simpler, no cover image */
.eekad-files-index__card--archived {
	min-height: auto;
	background: rgba(var(--c-border-rgb), .03);
	border: 1px solid rgba(var(--c-border-rgb), .04);
}
.eekad-files-index__card--archived:hover {
	background: rgba(var(--c-border-rgb), .05);
	border-color: rgba(var(--c-border-rgb), .08);
}
.eekad-files-index__card--archived .eekad-files-index__card-body {
	min-height: auto;
	padding: 20px 24px;
}
.eekad-files-index__card--archived .eekad-files-index__card-title {
	font-size: 17px;
}

/* Empty state */
.eekad-files-index__empty {
	text-align: center;
	padding-block: 80px;
	font-size: 16px;
	color: var(--c-text-muted);
}

@media (max-width: 768px) {
	.eekad-files-index__hero { padding-block: 64px 16px; }
	.eekad-files-index__hero-title { font-size: 36px; }
	.eekad-files-index__grid { grid-template-columns: 1fr; }
	.eekad-files-index__grid--archived { grid-template-columns: 1fr; }
}

/* ============================================================
   Latest News — homepage strip + category page strip
   ============================================================ */

.eekad-news { padding-block: var(--section-pad); }
.eekad-news__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 32px;
}
.eekad-news__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--c-text);
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
}
.eekad-news__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--c-text-muted);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: color .2s;
}
.eekad-news__more svg { width: 16px; height: 16px; }
.eekad-news__more:hover { color: #cdfe64; }

/* File-filter pills */
.eekad-news__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}
.eekad-news__pill {
	appearance: none;
	border: 0;
	background: var(--c-bg-surface);
	color: var(--c-text);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	padding: 10px 22px;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.eekad-news__pill:hover {
	background: var(--c-bg-elevated);
	color: var(--c-text);
}
.eekad-news__pill.is-active {
	background: var(--c-text);
	color: var(--c-bg-base);
}

.eekad-news__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: none;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
.eekad-news__list.is-active { display: grid; }
.eekad-news__item {
	margin: 0;
}
@media (max-width: 900px) {
	.eekad-news__list { grid-template-columns: 1fr; }
}
.eekad-news__link {
	display: flex;
	gap: 20px;
	align-items: center;
	padding: 20px 24px;
	background: var(--card-bg, var(--c-bg-elevated));
	text-decoration: none;
	transition: background .2s, filter .2s;
	height: 100%;
}
.eekad-news__thumb {
	flex-shrink: 0;
	width: 140px;
	height: 94px;
	overflow: hidden;
	background: var(--c-bg-surface);
}
.eekad-news__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}
.eekad-news__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	flex: 1;
}
.eekad-news__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--c-text-muted);
}
.eekad-news__cat { color: var(--c-text-2); font-weight: 600; font-size: 13px; }
.eekad-news__sep {
	display: inline-block;
	width: 21px;
	height: 1px;
	background: rgba(var(--c-border-rgb), .3);
}
.eekad-news__heading {
	color: var(--c-text);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.eekad-news__link:hover .eekad-news__heading { color: var(--c-text); }

@media (max-width: 900px) {
	.eekad-news__list { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	.eekad-news__pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		margin-inline: -16px;
		padding-inline: 16px;
	}
	.eekad-news__pills::-webkit-scrollbar { display: none; }
	.eekad-news__pill { flex-shrink: 0; }
}
@media (max-width: 560px) {
	.eekad-news__list { grid-template-columns: 1fr; }
	.eekad-news__title { font-size: 22px; }
}
@media (max-width: 480px) {
	.eekad-news { padding-block: 48px; }
	.eekad-news__link { padding: 14px; gap: 14px; }
	.eekad-news__thumb { width: 110px; height: 74px; }
	.eekad-news__heading { font-size: 15px; }
	.eekad-news__title { font-size: 20px; }
	.eekad-news__meta { font-size: 12px; }
	.eekad-news__header { margin-bottom: 16px; }
}

/* ============================================================
   Category page — "آخر أخبار [category]" strip
   ============================================================ */

.eekad-archive__news {
	margin-block: 24px 40px;
	padding: 24px;
	background: linear-gradient(135deg, rgba(205, 254, 100, 0.04), transparent);
	border: 1px solid rgba(205, 254, 100, 0.15);
	border-radius: 0;
}
.eekad-archive__news-header { margin-bottom: 18px; }
.eekad-archive__news-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--c-text);
	font-size: 22px;
	font-weight: 700;
}
.eekad-archive__news-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--archive-accent, #cdfe64);
	box-shadow: 0 0 0 4px rgba(205, 254, 100, 0.15);
}
.eekad-archive__news-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
}
.eekad-archive__news-item { margin: 0; }
.eekad-archive__news-link {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 10px;
	background: rgba(var(--c-border-rgb), 0.03);
	border: 1px solid transparent;
	border-radius: 0;
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s;
}
.eekad-archive__news-link:hover {
	background: rgba(205, 254, 100, 0.06);
	border-color: rgba(205, 254, 100, 0.3);
}
.eekad-archive__news-thumb {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 0;
	overflow: hidden;
	background: var(--c-bg-surface);
}
.eekad-archive__news-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.eekad-archive__news-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1;
}
.eekad-archive__news-time {
	font-size: 11px;
	color: var(--archive-accent, #cdfe64);
	font-weight: 600;
}
.eekad-archive__news-heading {
	color: var(--c-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.eekad-archive__news-link:hover .eekad-archive__news-heading { color: var(--c-text); }

/* Hub-only: news count link in the hero meta row */
.eekad-archive__count--news {
	color: var(--archive-accent, #cdfe64);
	text-decoration: none;
	transition: opacity 0.2s;
}
.eekad-archive__count--news:hover { opacity: 0.75; }

/* ============================================================
   Coverage-area hub — big subcategory cards grid
   ============================================================ */
.eekad-archive__hub-subs {
	padding-block: 48px 16px;
}
.eekad-archive__hub-subs-header {
	margin-bottom: 28px;
}
.eekad-archive__hub-subs-title {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: var(--c-text);
	font-size: 26px;
	font-weight: 700;
}
.eekad-archive__hub-subs-accent {
	display: none; /* decorative accent retired */
}
.eekad-archive__hub-subs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}
.eekad-archive__hub-sub-card {
	position: relative;
	display: block;
	min-height: 220px;
	overflow: hidden;
	border-radius: 0;
	background: var(--c-bg-surface);
	text-decoration: none;
	color: var(--c-text);
	isolation: isolate;
	transition: transform 0.3s, box-shadow 0.3s;
}
.eekad-archive__hub-sub-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.eekad-archive__hub-sub-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
	transition: transform 0.6s;
}
.eekad-archive__hub-sub-card:hover .eekad-archive__hub-sub-bg {
	transform: scale(1.06);
}
.eekad-archive__hub-sub-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(15, 17, 22, 0.35) 0%,
		rgba(15, 17, 22, 0.7) 55%,
		rgba(15, 17, 22, 0.94) 100%
	);
}
.eekad-archive__hub-sub-body {
	position: absolute;
	inset-inline-start: 24px;
	inset-inline-end: 24px;
	bottom: 24px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.eekad-archive__hub-sub-name {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-text);
	transition: color 0.2s;
}
.eekad-archive__hub-sub-card:hover .eekad-archive__hub-sub-name {
	color: var(--c-text);
}
.eekad-archive__hub-sub-count {
	font-size: 13px;
	color: var(--c-text-3);
	font-family: var(--font-mono);
}
.eekad-archive__hub-sub-arrow {
	position: absolute;
	top: 20px;
	inset-inline-end: 20px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(var(--c-border-rgb), 0.1);
	border-radius: 50%;
	color: var(--c-text-2);
	z-index: 2;
	transition: background 0.2s, border-color 0.2s;
}
.eekad-archive__hub-sub-arrow svg { width: 16px; height: 16px; }
.eekad-archive__hub-sub-card:hover .eekad-archive__hub-sub-arrow {
	background: var(--archive-accent, #cdfe64);
	color: var(--c-text-on-accent);
	border-color: var(--archive-accent, #cdfe64);
}

@media (max-width: 560px) {
	.eekad-archive__hub-subs-grid { grid-template-columns: 1fr; }
	.eekad-archive__hub-sub-card { min-height: 180px; }
}

/* ============================================================
   Dedicated /news/ archive — hero + timeline of news cards
   ============================================================ */
.eekad-news-archive { padding-block: 0 80px; background: var(--c-bg-base); }
.eekad-news-archive__hero {
	position: relative;
	padding-block: clamp(80px, 9vw, 120px) 8px;
	margin-bottom: 48px;
	background: transparent; /* one deep canvas — no hero band */
	color: var(--c-text);
	overflow: hidden;
}
.eekad-news-archive__kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	color: var(--c-text-2);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0; /* Arabic — never tracked */
}
.eekad-news-archive__dot {
	width: 10px;
	height: 10px;
	background: var(--c-lime);
	box-shadow: 0 0 8px rgba(203, 255, 0, .7);
	animation: eekad-news-pulse 2s ease-in-out infinite;
}
@keyframes eekad-news-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .35; }
}
.eekad-news-archive__title {
	margin: 0 0 16px;
	color: var(--c-text);
	font-size: clamp(44px, 5vw, 64px);
	font-weight: 700;
	line-height: 1.15;
}
.eekad-news-archive__desc {
	max-width: 640px;
	margin: 0 0 20px;
	color: var(--c-text-3);
	font-size: 17px;
	line-height: 1.7;
}
.eekad-news-archive__meta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--c-text-muted);
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
}
.eekad-news-archive__meta-sep {
	width: 24px;
	height: 1px;
	background: rgba(var(--c-border-rgb), .25);
}

.eekad-news-archive__label-filters {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	margin-inline-start: auto;
	flex-shrink: 0;
}
.eekad-news-archive__label-pill {
	display: inline-flex;
	align-items: center;
	padding: 10px 14px;
	background: var(--glass-bg);
	color: var(--c-text-2);
	font-size: 14px;
	font-weight: 600;
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	text-decoration: none;
	transition: all 0.2s ease;
}
.eekad-news-archive__label-pill:hover {
	background: var(--glass-bg-hover);
	color: var(--c-text);
}
.eekad-news-archive__label-pill.is-active {
	background: var(--c-text);
	color: var(--c-bg-base);
	border-color: var(--c-text);
}

/* Unified toolbar — search, filters, and view mode. */
/* Archive section heading — same scale as the hub section titles.
   No hairline under it: section headings carry no rule anywhere.
   scroll-margin keeps it clear of the fixed header when in-place
   pagination scrolls back up to it. */
.eekad-news-archive__section-title {
	margin: 0 0 24px;
	font-size: var(--fs-section);
	font-weight: 700;
	color: var(--c-text);
	scroll-margin-top: 96px;
}
.eekad-news-archive__controls {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 48px;
}
.eekad-news-archive__search {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	max-width: 420px;
	min-width: 200px;
	background: var(--glass-bg);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	padding: 10px 16px;
	transition: border-color .2s;
}
.eekad-news-archive__search:focus-within {
	border-color: var(--c-lime, #CDFE64);
}
.eekad-news-archive__search-label {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--c-text-faint);
	cursor: pointer;
}
.eekad-news-archive__search-label svg { width: 18px; height: 18px; }
.eekad-news-archive__search-input {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	outline: 0;
	color: var(--c-text);
	font-size: 14px;
	font-family: inherit;
	padding: 0;
	width: 100%;
}
.eekad-news-archive__search-input::placeholder { color: var(--c-text-faint); }
.eekad-news-archive__search-input::-webkit-search-cancel-button { display: none; }
.eekad-news-archive__search-clear {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--c-text-faint);
	transition: color .2s;
}
.eekad-news-archive__search-clear:hover { color: var(--c-text); }
.eekad-news-archive__search-clear svg { width: 14px; height: 14px; }

/* Dropdown group */
.eekad-news-archive__dropdowns {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

/* The label filter renders twice: pills for desktop, a third select
   for phones. Each breakpoint shows exactly one. */
.eekad-news-archive__label-select { display: none; }

/* Phone controls: two rows, not a wall of chrome — the search on top,
   then all three filters as selects sharing one row and one 40px
   rhythm. */
@media (max-width: 768px) {
	.eekad-news-archive__controls {
		flex-wrap: wrap;
		align-items: stretch;
		gap: 8px;
		margin-bottom: 36px;
	}
	.eekad-news-archive__search {
		width: 100%;
		max-width: none;
		padding: 8px 14px;
	}
	.eekad-news-archive__dropdowns { width: 100%; gap: 8px; }
	.eekad-news-archive__dropdowns .eekad-select-wrap { flex: 1; min-width: 0; }
	.eekad-news-archive__dropdowns .eekad-select {
		width: 100%;
		min-width: 0;
		font-size: 13px;
		padding: 9px 12px;
		padding-inline-end: 30px;
	}
	.eekad-news-archive__label-select { display: block; }
	.eekad-news-archive__label-filters { display: none; }

	/* Archive cards on phones: compact list rows — square thumb beside
	   a clamped title, excerpt dropped. An archive is for scanning
	   volume; rows triple the items per screen without shrinking type
	   the way a 2-up photo grid would. Scoped to /news/ via the results
	   wrapper — other pages using this card keep their photo form. */
	#eekad-news-archive-results .eekad-news-archive__grid { gap: 12px; }
	#eekad-news-archive-results .eekad-news-archive__card {
		display: flex;
		align-items: center;
	}
	#eekad-news-archive-results .eekad-news-archive__card-media {
		flex: 0 0 104px;
		align-self: stretch;
		aspect-ratio: auto;
		min-height: 104px;
	}
	#eekad-news-archive-results .eekad-news-archive__card-body {
		min-width: 0;
		padding: 12px 14px;
	}
	#eekad-news-archive-results .eekad-news-archive__card-cat {
		font-size: 11px;
		margin-block-end: 6px;
	}
	#eekad-news-archive-results .eekad-news-archive__card-title {
		font-size: 15px;
		line-height: 1.45;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	#eekad-news-archive-results .eekad-news-archive__card-excerpt {
		display: none;
	}
}

/* The day-grouped timeline (rail, bullets, per-day headings) retired:
   at the site's publishing cadence most day groups held one or two
   cards, fragmenting the grid under repeated headings. The archive is
   one flat grid; each card carries its own date in the meta row. */
.eekad-news-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.eekad-news-archive__card {
	background: var(--glass-bg);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	border-radius: 0;
	overflow: hidden;
	transition: background 0.2s, transform 0.2s;
}
.eekad-news-archive__card:hover {
	background: var(--glass-bg-hover);
	transform: translateY(-3px);
}
.eekad-news-archive__card-media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--c-bg-surface);
}
.eekad-news-archive__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s;
}
.eekad-news-archive__card:hover .eekad-news-archive__card-media img {
	transform: scale(1.05);
}
.eekad-news-archive__card-body { padding: 20px 22px 26px; }
.eekad-news-archive__card-cat {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	color: var(--c-text-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0; /* Arabic — never tracked */
}
.eekad-news-archive__card-sep {
	display: inline-block;
	width: 21px;
	height: 1px;
	background: rgba(var(--c-border-rgb), .3);
}
.eekad-news-archive__card-date {
	color: var(--c-text-muted);
}
/* News label — quiet genre meta, not a filled chip. */
.eekad-news-archive__card-cat .eekad-news-label,
.eekad-news-label {
	display: inline-flex;
	align-items: center;
	padding: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--c-text-muted);
	background: transparent;
	line-height: 1;
}
.eekad-news-archive__card-title {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.eekad-news-archive__card-title a {
	color: var(--c-text);
	text-decoration: none;
	transition: color 0.2s;
}
.eekad-news-archive__card:hover .eekad-news-archive__card-title a { color: var(--c-text); }
.eekad-news-archive__card-excerpt {
	margin: 0;
	color: var(--c-text-3);
	font-size: 14px;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.eekad-news-archive__empty {
	padding: 60px 0;
	color: var(--c-text-muted);
	text-align: center;
	font-size: 16px;
}

/* Pagination for this archive retired its own copy — see the pagination
   kit near the end of this file, which now styles every archive. */

@media (max-width: 900px) {
	.eekad-news-archive__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.eekad-news-archive__hero { padding-block: 64px 8px; }
	.eekad-news-archive__title { font-size: 36px; }
	.eekad-news-archive__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   News hub — section 1: files spotlight ("أخبار الملفات")
   ============================================================
   The photo-forward slice: one featured card + five compact rows,
   filterable by Eekad File. Glass material from the shared tokens;
   pills take their surface from the PILL KIT. This is the only
   image-led block on /news/ — the briefs below it are text, the map
   is a map, the timeline is the river. Geometry is the separator. */
.eekad-news-files {
	margin-block-end: 72px;
}
.eekad-news-files__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-end: 28px;
}
.eekad-news-files__pill {
	appearance: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	padding: 10px 22px;
	cursor: pointer;
}
.eekad-news-files__pill:active {
	transform: scale(.97);
	transition-duration: var(--dur-press);
}
.eekad-news-files__pill:focus-visible {
	outline: 2px solid var(--c-lime);
	outline-offset: 2px;
}

.eekad-news-files__panel { display: none; }
.eekad-news-files__panel.is-active { display: block; }

/* RTL grid: the featured card takes the leading (visual right) column. */
.eekad-news-files__slice {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 24px;
	align-items: stretch;
}

/* --- Featured card --- */
.eekad-news-files__feature {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	background: var(--glass-bg);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	transition: transform var(--dur-quick) var(--ease-spring),
	            background var(--dur-quick) var(--ease-out);
}
.eekad-news-files__feature:hover {
	background: var(--glass-bg-hover);
	transform: translateY(-3px);
}
.eekad-news-files__feature:active {
	transform: scale(.99);
	transition-duration: var(--dur-press);
}
.eekad-news-files__feature-media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--c-bg-surface);
}
.eekad-news-files__feature-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.eekad-news-files__feature-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 22px 26px;
}
.eekad-news-files__feature-title {
	color: var(--c-text);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Compact list --- */
.eekad-news-files__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.eekad-news-files__item {
	/* A full panel's five rows grow to share the featured card's height;
	   the cap stops a sparse panel's one or two rows from ballooning
	   into empty glass slabs. */
	flex: 1 1 auto;
	max-height: 140px;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	text-decoration: none;
	background: var(--glass-bg);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	transition: transform var(--dur-quick) var(--ease-spring),
	            background var(--dur-quick) var(--ease-out);
}
.eekad-news-files__item:hover {
	background: var(--glass-bg-hover);
	transform: translateY(-3px);
}
.eekad-news-files__item:active {
	transform: scale(.99);
	transition-duration: var(--dur-press);
}
.eekad-news-files__item-thumb {
	flex: 0 0 76px;
	width: 76px;
	height: 76px;
	overflow: hidden;
	background: var(--c-bg-surface);
}
.eekad-news-files__item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.eekad-news-files__item-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.eekad-news-files__item-title {
	color: var(--c-text);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Shared meta row --- */
.eekad-news-files__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--c-text-muted);
}
.eekad-news-files__kicker {
	color: var(--c-text-2);
	font-weight: 600;
}
.eekad-news-files__sep {
	display: inline-block;
	width: 21px;
	height: 1px;
	background: rgba(var(--c-border-rgb), .3);
}

/* A panel with a single post: the featured card goes cinematic — full
   width, wider ratio — instead of leaving a dead second column. */
.eekad-news-files__feature:only-child {
	grid-column: 1 / -1;
}
.eekad-news-files__feature:only-child .eekad-news-files__feature-media {
	aspect-ratio: 21 / 9;
}

/* --- Focus + reduced motion --- */
.eekad-news-files__feature:focus-visible,
.eekad-news-files__item:focus-visible {
	outline: 2px solid var(--c-lime);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.eekad-news-files__feature:hover,
	.eekad-news-files__item:hover { transform: none; }
}

/* --- Responsive --- */
@media (max-width: 900px) {
	.eekad-news-files__slice { grid-template-columns: 1fr; }
	.eekad-news-files__feature-title { font-size: 20px; }
}
@media (max-width: 768px) {
	.eekad-news-files { margin-block-end: 56px; }
	.eekad-news-files__pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		margin-inline: -16px;
		padding-inline: 16px;
	}
	.eekad-news-files__pills::-webkit-scrollbar { display: none; }
	.eekad-news-files__pill { flex-shrink: 0; }
}
@media (max-width: 480px) {
	.eekad-news-files__item-thumb { flex-basis: 64px; width: 64px; height: 64px; }
	.eekad-news-files__item-title { font-size: 15px; }
}

/* ============================================================
   News hub — section 2: wire briefs ("الموجز")
   ============================================================
   The text slice: no images, a time column, tight two-column rows.
   Switched by a segmented control (the same bordered-group grammar
   as the old list/map toggle) rather than pills, so it reads as a
   different instrument from the spotlight above it. */
.eekad-news-briefs {
	margin-block-end: 72px;
}
/* Controls row. The section heading retired, so the segmented control
   holds the leading edge on its own. */
.eekad-news-briefs__header {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 16px;
	margin-block-end: 24px;
}

/* Segmented control — bordered group, contrast active. */
.eekad-news-briefs__seg {
	display: flex;
	gap: 0;
	border: 1px solid rgba(var(--c-border-rgb), .1);
	width: fit-content;
}
.eekad-news-briefs__seg-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	background: none;
	border: none;
	color: var(--c-text-muted);
	cursor: pointer;
	transition: color .18s ease, background .18s ease;
}
.eekad-news-briefs__seg-btn:hover {
	color: var(--c-text);
}
.eekad-news-briefs__seg-btn.is-active {
	color: var(--c-bg-base);
	background: var(--c-text);
}
.eekad-news-briefs__seg-btn:active {
	transform: scale(.97);
	transition-duration: var(--dur-press);
}
.eekad-news-briefs__seg-btn:focus-visible {
	outline: 2px solid var(--c-lime);
	outline-offset: -2px;
}

.eekad-news-briefs__panel { display: none; }
.eekad-news-briefs__panel.is-active { display: block; }

/* Photo tiles: 3×2 equal tiles, text ON the image over a bottom scrim —
   the same text-on-photo grammar as the coverage-area cards. Third
   instrument on the page: the spotlight is photos beside text, the
   timeline is photos above text, the briefs are text on photos. */
.eekad-news-briefs__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.eekad-news-briefs__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	text-decoration: none;
	background: var(--c-bg-surface);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	transition: transform var(--dur-quick) var(--ease-spring);
}
.eekad-news-briefs__tile-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Photography reads as photography; the scrim carries the text. */
	filter: saturate(.9) brightness(.78);
	transition: filter var(--dur-quick) var(--ease-out);
}
.eekad-news-briefs__tile-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(var(--c-bg-base-rgb), 0) 35%,
		rgba(var(--c-bg-base-rgb), .55) 65%,
		rgba(var(--c-bg-base-rgb), .92) 100%);
}
.eekad-news-briefs__tile-content {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px;
}
.eekad-news-briefs__tile-title {
	color: var(--c-text);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.eekad-news-briefs__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--c-text-muted);
}
.eekad-news-briefs__kicker {
	color: var(--c-text-2);
	font-weight: 600;
}
.eekad-news-briefs__sep {
	display: inline-block;
	width: 21px;
	height: 1px;
	background: rgba(var(--c-border-rgb), .3);
}
.eekad-news-briefs__tile:hover {
	transform: translateY(-3px);
}
.eekad-news-briefs__tile:hover .eekad-news-briefs__tile-img {
	filter: saturate(1) brightness(.9);
}
.eekad-news-briefs__tile:active {
	transform: scale(.99);
	transition-duration: var(--dur-press);
}
.eekad-news-briefs__tile:focus-visible {
	outline: 2px solid var(--c-lime);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.eekad-news-briefs__tile:hover { transform: none; }
}
@media (max-width: 900px) {
	.eekad-news-briefs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 768px) {
	.eekad-news-briefs { margin-block-end: 56px; }
}
/* Phones: six stacked full-width tiles cost ~1400px of scroll for one
   section. The grid becomes a swipe rail — one tile tall, snap per
   card — the same touch grammar as the site's other mobile rails. */
@media (max-width: 640px) {
	.eekad-news-briefs__grid {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-inline: -16px;
		padding-inline: 16px;
	}
	.eekad-news-briefs__grid::-webkit-scrollbar { display: none; }
	.eekad-news-briefs__tile {
		flex: 0 0 300px;
		scroll-snap-align: start;
	}
}
@media (max-width: 480px) {
	.eekad-news-briefs__tile { flex-basis: 280px; }
	.eekad-news-briefs__tile-title { font-size: 16px; }
	.eekad-news-briefs__tile-content { padding: 14px 16px; }
}

/* ============================================================
   News hub — section 3: map band ("خريطة الأخبار")
   ============================================================
   The geographic slice: the Mapbox map as a standing full-bleed band,
   filterable by Eekad File. Replaced the old list/map view toggle —
   the map is content now, not a mode. Popup and location-panel styles
   below are shared with it unchanged. */
.eekad-news-map-band {
	margin-block-end: 72px;
}
.eekad-news-map-band__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-block-end: 24px;
}
.eekad-news-map-band__title {
	margin: 0;
	font-size: var(--fs-section);
	font-weight: 700;
	color: var(--c-text);
}
.eekad-news-map-band__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.eekad-news-map-band__pill {
	appearance: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	padding: 8px 18px;
	cursor: pointer;
}
.eekad-news-map-band__pill:active {
	transform: scale(.97);
	transition-duration: var(--dur-press);
}
.eekad-news-map-band__pill:focus-visible {
	outline: 2px solid var(--c-lime);
	outline-offset: 2px;
}
/* The stage sits in the container as a glass slab — the same window
   chrome as the homepage database device, not an edge-to-edge strip. */
.eekad-news-map-band__stage {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .12),
		0 32px 64px -24px rgba(0, 0, 0, .5);
}
.eekad-news-map-band__map {
	width: 100%;
	height: 520px;
	background: var(--c-bg-alt);
}
/* Empty state floats over the (still live) map so switching files
   never tears the canvas down. */
.eekad-news-map-band__empty {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	margin: 0;
	pointer-events: none;
}
.eekad-news-map-band__empty::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(var(--c-bg-base-rgb), .55);
}
.eekad-news-map-band__empty[hidden] { display: none; }
.eekad-news-map-band__empty > * { position: relative; }
.eekad-news-map-band__empty {
	font-size: 15px;
	font-weight: 600;
	color: var(--c-text-2);
}
@media (max-width: 768px) {
	.eekad-news-map-band { margin-block-end: 56px; }
	.eekad-news-map-band__map { height: 380px; }
}
@media (max-width: 480px) {
	.eekad-news-map-band__pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		width: 100%;
	}
	.eekad-news-map-band__pills::-webkit-scrollbar { display: none; }
	.eekad-news-map-band__pill { flex-shrink: 0; }
}

/* --- Mapbox popup overrides --- */
/* Pin clicks always open the location panel — a single experience
   whether a spot holds one item or ten; the count chip carries the
   difference. The old single-pin mapbox popup retired with that. */
.eekad-map-popup__title {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--c-text);
	text-decoration: none;
	transition: color .18s ease;
}
.eekad-map-popup__title:hover {
	color: var(--c-lime);
}
.eekad-map-popup__date {
	font-size: 12px;
	color: var(--c-text-muted);
}
.eekad-map-popup--list {
	width: min(340px, calc(100vw - 48px));
}
.eekad-news-map-panel {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	width: min(380px, calc(100% - 32px));
	max-height: calc(100% - 32px);
	display: flex;
	flex-direction: column;
	transform: translate(-50%, -50%);
	/* Same glass slab as the pin popup — one surface for map overlays. */
	background: rgba(var(--c-bg-base-rgb), .88);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	backdrop-filter: blur(12px) saturate(160%);
	color: var(--c-text);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .10),
		0 24px 56px -16px rgba(0, 0, 0, .65);
	overflow: hidden;
}
@media (prefers-reduced-transparency: reduce) {
	.eekad-news-map-panel {
		background: var(--c-bg-elevated);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}
.eekad-news-map-panel__close {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-end: 8px;
	z-index: 2;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: rgba(var(--c-bg-base-rgb), .6);
	border: 1px solid var(--glass-edge);
	color: var(--c-text);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}
.eekad-news-map-panel__close:hover,
.eekad-news-map-panel__close:focus-visible {
	background: rgba(var(--c-bg-base-rgb), .85);
	color: var(--c-lime);
}
.eekad-news-map-panel .eekad-map-popup--list {
	width: 100%;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
.eekad-news-map-panel .eekad-map-popup__head {
	flex-shrink: 0;
	padding-inline-end: 52px;
}
.eekad-news-map-panel .eekad-map-popup__list {
	min-height: 0;
	max-height: none;
	flex: 1;
}
.eekad-map-popup__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-block-end: 1px solid rgba(var(--c-border-rgb), .08);
}
.eekad-map-popup__head > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.eekad-map-popup__head strong {
	font-size: 14px;
	line-height: 1.3;
}
.eekad-map-popup__head span:not(.eekad-map-popup__count) {
	font-size: 11px;
	color: var(--c-text-muted);
}
.eekad-map-popup__count {
	min-width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: 8px;
	background: var(--c-lime);
	color: var(--c-text-on-accent);
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 700;
}
.eekad-map-popup__list {
	max-height: 300px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.eekad-map-popup__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	padding: 10px 12px;
	border-block-end: 1px solid rgba(var(--c-border-rgb), .06);
}
.eekad-map-popup__item.has-thumbnail {
	grid-template-columns: 64px minmax(0, 1fr);
}
.eekad-map-popup__item:last-child {
	border-block-end: 0;
}
.eekad-map-popup__item img {
	width: 64px;
	height: 64px;
	object-fit: cover;
}
.eekad-map-popup__item-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.eekad-map-popup__item .eekad-map-popup__title {
	font-size: 13px;
	line-height: 1.45;
}

@media (max-width: 768px) {
	.eekad-map-popup__list {
		max-height: 230px;
	}
}

/* =============================================================
 * Verifications archive — /verifications/
 * Top: file filter tabs + three editor-picked cards per file.
 * Bottom: newest-first grid of every verification, paginated.
 * Cards reuse the homepage .eekad-verify__card language via a
 * --grid modifier that unlocks the fixed rail width.
 * =========================================================== */
.eekad-verify-archive__featured {
	margin-block: 40px 72px;
}
.eekad-verify-archive__featured-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 40px; /* separation is space, not lines */
}
.eekad-verify-archive__featured-heading {
	margin: 0;
	font-size: var(--fs-section);
	font-weight: 700;
	line-height: 1.25;
	color: var(--c-text);
}
.eekad-verify-archive__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.eekad-verify-archive__tab {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	background: var(--glass-bg);
	color: var(--c-text-2);
	font-size: 14px;
	font-weight: 600;
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
}
.eekad-verify-archive__tab:hover {
	background: var(--glass-bg-hover);
	color: var(--c-text);
}
.eekad-verify-archive__tab.is-active {
	background: var(--c-text);
	color: var(--c-bg-base);
	border-color: var(--c-text);
}

.eekad-verify-archive__featured-rail {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.eekad-verify-archive__featured-rail[hidden] { display: none; }
.eekad-verify-archive__featured-rail:not(.is-active) { display: none; }

.eekad-verify-archive__recent-heading {
	margin: 0 0 40px;
	font-size: var(--fs-section);
	font-weight: 700;
	line-height: 1.25;
	color: var(--c-text);
}

.eekad-verify-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 56px;
}

/* Grid-mode override for the homepage verify card: lose the fixed
   width from the rail, fit whatever grid cell it lands in, and
   slightly shorter for archive density. */
.eekad-verify__card--grid {
	flex: initial;
	width: 100%;
	height: 520px;
}
.eekad-verify__card--grid .eekad-verify__sticker {
	width: 118px;
	bottom: 198px;
}

@media (max-width: 960px) {
	.eekad-verify-archive__featured-rail,
	.eekad-verify-archive__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.eekad-verify-archive__featured-rail,
	.eekad-verify-archive__grid {
		grid-template-columns: 1fr;
	}
	.eekad-verify__card--grid {
		max-width: 420px;
		margin-inline: auto;
	}
}

/* =============================================================
 * Verification submit form
 * =========================================================== */
.eekad-verify-submit__notice {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 24px;
	margin-block-end: 24px;
	font-size: 15px;
	font-weight: 600;
	color: var(--c-text-on-accent);
	background: #cdfe64;
}
.eekad-verify-submit__notice svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.eekad-verify-submit {
	margin-block: 64px 72px;
	padding: 48px;
	background: var(--glass-bg);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
}
.eekad-verify-submit__inner {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: 48px;
	align-items: start;
}
.eekad-verify-submit__intro {
	position: sticky;
	top: 100px;
}
.eekad-verify-submit__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	font-size: var(--fs-section);
	font-weight: 700;
	color: var(--c-text);
}
.eekad-verify-submit__icon {
	width: 28px;
	height: 28px;
	color: var(--c-text-muted);
	flex-shrink: 0;
}
.eekad-verify-submit__desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.75;
	color: var(--c-text-3);
}

/* Trust badges */
.eekad-verify-submit__badges {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-block-start: 28px;
	padding-block-start: 24px;
	border-block-start: 1px solid rgba(var(--c-border-rgb), .06);
}
.eekad-verify-submit__badge {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--c-text-3);
}
.eekad-verify-submit__badge svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--c-text-muted);
}

/* How it works steps */
.eekad-verify-submit__steps {
	list-style: none;
	margin: 24px 0 0;
	padding: 24px 0 0;
	border-block-start: 1px solid rgba(var(--c-border-rgb), .06);
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.eekad-verify-submit__steps li {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	font-weight: 500;
	color: var(--c-text-3);
}
.eekad-verify-submit__step-num {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	color: var(--c-text);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	background: var(--glass-bg);
}

/* --- Form fields --- */
.eekad-verify-submit__form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.eekad-verify-submit__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.eekad-verify-submit__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.eekad-verify-submit__field label {
	font-size: 13px;
	font-weight: 600;
	color: var(--c-text-2);
	letter-spacing: .01em;
}
.eekad-verify-submit__field input,
.eekad-verify-submit__field textarea {
	padding: 12px 16px;
	background: rgba(var(--c-border-rgb), .04);
	border: 1px solid rgba(var(--c-border-rgb), .1);
	color: var(--c-text);
	font-size: 15px;
	font-family: inherit;
	line-height: 1.6;
	transition: border-color .2s, background .2s;
	resize: vertical;
}
.eekad-verify-submit__field input::placeholder,
.eekad-verify-submit__field textarea::placeholder {
	color: var(--c-text-faint);
}
.eekad-verify-submit__field input:focus,
.eekad-verify-submit__field textarea:focus {
	outline: none;
	border-color: rgba(205, 254, 100, .4);
	background: rgba(205, 254, 100, .04);
}

/* --- Submit button --- */
.eekad-verify-submit__btn {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	padding: 12px 28px;
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	color: var(--c-text-on-accent);
	background: #cdfe64;
	border: 1px solid #cdfe64;
	cursor: pointer;
	transition: background .2s, border-color .2s, transform .2s;
}
.eekad-verify-submit__btn svg {
	width: 18px;
	height: 18px;
}
.eekad-verify-submit__btn:hover {
	background: #CDFE64;
	border-color: #CDFE64;
	transform: translateY(-1px);
}

@media (max-width: 860px) {
	.eekad-verify-submit { padding: 32px 24px; }
	.eekad-verify-submit__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.eekad-verify-submit__intro { position: static; }
	.eekad-verify-submit__stats { justify-content: center; }
	.eekad-verify-submit__row { grid-template-columns: 1fr; }
}

/* Floating "submit claim" icon — matches investigation sidebar
   style: dark bg, lime border, icon-only with hover tooltip. */
.eekad-verify-fab {
	position: fixed;
	inset-inline-end: 24px;
	bottom: 40px;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--c-bg-elevated);
	border: 1px solid rgba(205, 254, 100, .35);
	color: var(--c-lime);
	transition: border-color .2s ease, background .2s ease, opacity .35s ease, transform .35s ease;
}
.eekad-verify-fab svg {
	width: 22px;
	height: 22px;
}
.eekad-verify-fab__label {
	position: absolute;
	inset-inline-end: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	background: var(--c-bg-elevated);
	border: 1px solid rgba(205, 254, 100, .35);
	color: var(--c-lime);
	font-size: 13px;
	font-weight: 700;
	padding: 8px 14px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}
.eekad-verify-fab:hover .eekad-verify-fab__label {
	opacity: 1;
}
.eekad-verify-fab:hover {
	border-color: var(--c-lime);
	background: var(--c-bg-alt);
	color: var(--c-lime);
}
.eekad-verify-fab.is-hidden {
	opacity: 0;
	pointer-events: none;
	transform: translateY(20px);
}
@media (max-width: 768px) {
	.eekad-verify-fab {
		inset-inline-end: 16px;
		bottom: 20px;
	}
}

/* =================================================================
   Evidence Drawer — المرفقات والأدلة
   Sticky FAB + slide-out panel + lightbox for article media.
   ================================================================= */

/* ── Action Dock (vertical icon bar) ───────────────────── */
.eekad-action-dock {
	position: fixed;
	bottom: 28px;
	left: 28px;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 6px;
	background: rgba(var(--c-bg-base-rgb), .25);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	animation: eekad-dock-in .5s var(--ease-spring) both;
	transition: opacity .25s, transform .25s;
}
.eekad-action-dock.is-hidden {
	opacity: 0;
	pointer-events: none;
	transform: translateY(20px);
}
.eekad-action-dock__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: none;
	color: var(--c-text-2); /* quiet at rest; lime = engagement */
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: color var(--dur-quick) var(--ease-out), opacity var(--dur-quick) var(--ease-out);
	opacity: .7;
}
.eekad-action-dock__btn:hover {
	opacity: 1;
	color: var(--c-lime);
}
.eekad-action-dock__btn + .eekad-action-dock__btn {
	border-top: none;
}
.eekad-action-dock__btn svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	flex-shrink: 0;
}
/* Tooltip */
.eekad-action-dock__btn::after {
	content: attr(data-tooltip);
	position: absolute;
	left: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%) translateX(-4px);
	padding: 5px 12px;
	background: rgba(var(--c-bg-base-rgb), .9);
	border: 1px solid rgba(var(--c-border-rgb), .08);
	color: var(--c-text);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s, transform .15s;
}
.eekad-action-dock__btn:hover::after {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}
/* Label strip — hidden, dock is icon-only */
.eekad-action-dock__label { display: none; }
@keyframes eekad-dock-in {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
	.eekad-action-dock {
		bottom: 16px;
		left: 16px;
	}
	.eekad-action-dock__btn::after {
		display: none;
	}
}

/* ── Drawer panel ──────────────────────────────────────── */
.eekad-evidence-drawer {
	position: fixed;
	inset: 0;
	z-index: 10000;
	pointer-events: none;
	visibility: hidden;
}
.eekad-evidence-drawer.is-open {
	pointer-events: auto;
	visibility: visible;
}
.eekad-evidence-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .6);
	opacity: 0;
	transition: opacity .3s ease;
}
.eekad-evidence-drawer.is-open .eekad-evidence-drawer__backdrop {
	opacity: 1;
}
.eekad-evidence-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	width: 520px;
	max-width: 90vw;
	height: 100%;
	background: var(--c-bg-alt);
	border-inline-start: 1px solid rgba(var(--c-border-rgb), .06);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .35s cubic-bezier(.16, 1, .3, 1);
	overflow: hidden;
}
[dir="rtl"] .eekad-evidence-drawer__panel {
	right: auto;
	left: 0;
	transform: translateX(-100%);
	border-inline-start: none;
	border-inline-end: 1px solid rgba(var(--c-border-rgb), .06);
}
.eekad-evidence-drawer.is-open .eekad-evidence-drawer__panel {
	transform: translateX(0);
}
.eekad-evidence-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-block-end: 1px solid rgba(var(--c-border-rgb), .06);
	flex-shrink: 0;
}
.eekad-evidence-drawer__title {
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 700;
	color: var(--c-text);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}
.eekad-evidence-drawer__count {
	background: rgba(var(--c-border-rgb), .08);
	color: var(--c-text-muted);
	font-size: 11px;
	font-weight: 600;
	min-width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
	letter-spacing: .04em;
}
.eekad-evidence-drawer__close {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(var(--c-border-rgb), .04);
	border: 1px solid rgba(var(--c-border-rgb), .08);
	border-radius: 0;
	color: var(--c-text);
	cursor: pointer;
	transition: background .15s;
}
.eekad-evidence-drawer__close:hover {
	background: rgba(var(--c-border-rgb), .1);
}
.eekad-evidence-drawer__close svg {
	width: 18px;
	height: 18px;
}

/* ── Grid ──────────────────────────────────────────────── */
.eekad-evidence-drawer__grid {
	flex: 1 1 0;
	min-height: 0;
	overflow-y: auto;
	padding: 20px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: min-content;
	gap: 12px;
}
.eekad-evidence-drawer__card {
	display: flex;
	flex-direction: column;
	background: rgba(var(--c-border-rgb), .03);
	border: 1px solid rgba(var(--c-border-rgb), .06);
	border-radius: 0;
	cursor: pointer;
	overflow: hidden;
	transition: border-color .2s, transform .2s;
	text-align: start;
	padding: 0;
	color: inherit;
	font: inherit;
}
.eekad-evidence-drawer__card:hover {
	border-color: rgba(var(--c-border-rgb), .25);
	transform: translateY(-2px);
}
.eekad-evidence-drawer__thumb {
	width: 100%;
	min-height: 130px;
	flex-shrink: 0;
	overflow: hidden;
	background: rgba(0, 0, 0, .3);
}
.eekad-evidence-drawer__thumb img {
	width: 100%;
	height: 130px;
	object-fit: cover;
	display: block;
}
.eekad-evidence-drawer__thumb--embed {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-text-muted);
}
.eekad-evidence-drawer__thumb--embed svg {
	width: 32px;
	height: 32px;
}
.eekad-evidence-drawer__type {
	display: inline-block;
	margin: 8px 10px 0;
	padding: 2px 8px;
	background: rgba(var(--c-border-rgb), .06);
	color: var(--c-text-muted);
	border: 1px solid rgba(var(--c-border-rgb), .08);
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .04em;
	align-self: flex-start;
}
.eekad-evidence-drawer__caption {
	display: block;
	padding: 6px 10px 10px;
	font-size: 12px;
	color: var(--c-text-muted);
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── Lightbox ──────────────────────────────────────────── */
.eekad-evidence-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	visibility: hidden;
}
.eekad-evidence-lightbox.is-open {
	pointer-events: auto;
	visibility: visible;
}
.eekad-evidence-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .92);
	opacity: 0;
	transition: opacity .25s;
}
.eekad-evidence-lightbox.is-open .eekad-evidence-lightbox__backdrop {
	opacity: 1;
}
.eekad-evidence-lightbox__content {
	position: relative;
	z-index: 1;
	max-width: 90vw;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 0;
	transform: scale(.95);
	transition: opacity .25s, transform .25s;
}
.eekad-evidence-lightbox.is-open .eekad-evidence-lightbox__content {
	opacity: 1;
	transform: scale(1);
}
.eekad-evidence-lightbox__img,
.eekad-evidence-lightbox__video {
	max-width: 90vw;
	max-height: 80vh;
	object-fit: contain;
	display: block;
}
.eekad-evidence-lightbox__caption {
	margin-top: 12px;
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--c-text-2);
	text-align: center;
	max-width: 600px;
}
.eekad-evidence-lightbox__close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 2;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(var(--c-border-rgb), .08);
	border: 1px solid rgba(var(--c-border-rgb), .12);
	border-radius: 0;
	color: var(--c-text);
	cursor: pointer;
	transition: background .15s;
}
.eekad-evidence-lightbox__close:hover {
	background: rgba(var(--c-border-rgb), .18);
}
.eekad-evidence-lightbox__close svg {
	width: 22px;
	height: 22px;
}
.eekad-evidence-lightbox__prev,
.eekad-evidence-lightbox__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(var(--c-border-rgb), .06);
	border: 1px solid rgba(var(--c-border-rgb), .1);
	border-radius: 0;
	color: var(--c-text);
	cursor: pointer;
	transition: background .15s;
}
.eekad-evidence-lightbox [hidden] {
	display: none !important;
}
.eekad-evidence-lightbox__prev:hover,
.eekad-evidence-lightbox__next:hover {
	background: rgba(var(--c-border-rgb), .15);
}
.eekad-evidence-lightbox__prev svg,
.eekad-evidence-lightbox__next svg {
	width: 24px;
	height: 24px;
}
.eekad-evidence-lightbox__prev {
	left: 20px;
}
.eekad-evidence-lightbox__next {
	right: 20px;
}
.eekad-evidence-lightbox__counter {
	position: absolute;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-sans);
	font-size: 13px;
	color: var(--c-text-muted);
	z-index: 2;
}
.eekad-evidence-lightbox__locate {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: rgba(var(--c-border-rgb), .08);
	border: 1px solid rgba(var(--c-border-rgb), .12);
	border-radius: 0;
	color: var(--c-lime);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s;
}
.eekad-evidence-lightbox__locate:hover {
	background: rgba(205, 254, 100, .12);
}
.eekad-evidence-lightbox__locate svg {
	width: 16px;
	height: 16px;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 600px) {
	.eekad-action-dock__btn {
		font-size: 11px;
		padding: 8px 14px;
	}
	.eekad-evidence-drawer__panel {
		width: 100vw;
		max-width: 100vw;
	}
	.eekad-evidence-drawer__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
		padding: 12px;
	}
	.eekad-evidence-lightbox__prev,
	.eekad-evidence-lightbox__next {
		width: 40px;
		height: 40px;
	}
	.eekad-evidence-lightbox__prev { left: 8px; }
	.eekad-evidence-lightbox__next { right: 8px; }
	.eekad-evidence-lightbox__locate {
		bottom: 16px;
		font-size: 11px;
	}
}

/* Scrollbar in drawer */
.eekad-evidence-drawer__grid::-webkit-scrollbar {
	width: 4px;
}
.eekad-evidence-drawer__grid::-webkit-scrollbar-track {
	background: transparent;
}
.eekad-evidence-drawer__grid::-webkit-scrollbar-thumb {
	background: rgba(var(--c-border-rgb), .1);
}

/* =============================================================
 * Shared pill row — staggered reveal animation + scroll snap
 * =============================================================
 * Adding .eekad-pill-row to ANY flex/inline container is enough —
 * pills.js stamps each direct child with a --pill-delay based on its
 * index, then adds .is-revealed once the row enters the viewport, and
 * the CSS below transitions every child in sequence.
 *
 * The visual look of each pill is still owned by its section's own
 * class (eekad-news__pill, eekad-archive__sub-pill, etc.) — we only
 * touch opacity + transform here so we never fight section styling.
 *
 * Snap: every child is a snap-start point, so after any scroll the
 * row aligns to a full pill (no half-clipped text at the edge).
 *
 * For NEW pill rows without their own styling, add .eekad-pill to
 * each child to pick up the shared look too.
 */
.eekad-pill-row {
	scroll-snap-type: x mandatory;
	/* Own the horizontal containment in CSS instead of depending on the
	   .eekad-pill-row-wrap that pills.js inserts at runtime. A pill row is
	   usually a flex item, and flex items default to min-width:auto — so
	   without the wrap's min-width:0 the row refuses to shrink, sizes to
	   max-content, and widens the whole document. On mobile that expands
	   the layout viewport (note: overflow-x:hidden on <html> does NOT
	   prevent this), letting the page pan sideways and stranding the
	   RTL-anchored content off-screen. Keep this here so the page stays
	   contained even when the script never runs. */
	min-width: 0;
	max-width: 100%;
}

/* Edge fade via mask-image — pills near a scrollable edge dissolve into
 * transparency instead of being hard-clipped against the paddle.
 * `to left` is the RTL direction (leading on the right, trailing on
 * the left); the [dir=ltr] override flips it. Vars are 0 by default,
 * so the mask = solid black = no visual change until JS toggles the
 * is-fade-* class on the side that has more to scroll to. */
.eekad-pill-row.is-fade-start,
.eekad-pill-row.is-fade-end {
	--fade: 16px;
	--fade-leading: 0px;
	--fade-trailing: 0px;
	-webkit-mask-image: linear-gradient(
		to left,
		transparent 0,
		#000 var(--fade-leading),
		#000 calc(100% - var(--fade-trailing)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to left,
		transparent 0,
		#000 var(--fade-leading),
		#000 calc(100% - var(--fade-trailing)),
		transparent 100%
	);
}
.eekad-pill-row.is-fade-start { --fade-leading: var(--fade); }
.eekad-pill-row.is-fade-end   { --fade-trailing: var(--fade); }
[dir="ltr"] .eekad-pill-row.is-fade-start,
[dir="ltr"] .eekad-pill-row.is-fade-end {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--fade-leading),
		#000 calc(100% - var(--fade-trailing)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--fade-leading),
		#000 calc(100% - var(--fade-trailing)),
		transparent 100%
	);
}
.eekad-pill-row > * {
	opacity: 0;
	transform: translateY(14px) scale(.94);
	transition:
		opacity .6s cubic-bezier(.22, 1, .36, 1),
		transform .6s cubic-bezier(.22, 1, .36, 1);
	transition-delay: var(--pill-delay, 0ms);
	will-change: opacity, transform;
	scroll-snap-align: start;
}
.eekad-pill-row.is-revealed > * {
	opacity: 1;
	transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
	.eekad-pill-row > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --- Scroll paddles (chevrons floating in the outer gutter) ---
 * pills.js wraps every .eekad-pill-row in .eekad-pill-row-wrap. The
 * row inside fills the wrap entirely so its edges align with whatever
 * content sits below it (e.g. the /tv/ reels grid). Paddle buttons are
 * absolutely positioned OUTSIDE the wrap's box, projecting into the
 * parent container's padding-inline gutter. No layout shift between
 * "paddles on" and "paddles off" states.
 */
.eekad-pill-row-wrap {
	position: relative;
	min-width: 0;
}
.eekad-pill-row-paddle {
	position: absolute;
	inset-block: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	padding: 0;
	font: inherit;
	color: var(--c-text);
	background: var(--c-bg-surface);
	border: 1px solid rgba(var(--c-border-rgb), .12);
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease, visibility 0s;
}
/* Tuck 48px outside the wrap (40px paddle + 8px breathing room). */
.eekad-pill-row-paddle.is-start { inset-inline-start: -48px; }
.eekad-pill-row-paddle.is-end   { inset-inline-end:   -48px; }
/* Narrow viewports: not enough gutter to project outward — hide
 * paddles entirely; users swipe to scroll on touch devices anyway. */
@media (max-width: 600px) {
	.eekad-pill-row-paddle { display: none; }
}
.eekad-pill-row-paddle:hover,
.eekad-pill-row-paddle:focus-visible {
	background: var(--c-lime, #cdfe64);
	color: #000;
	border-color: var(--c-lime, #cdfe64);
	outline: none;
}
.eekad-pill-row-paddle.is-hidden {
	visibility: hidden;
}
.eekad-pill-row-paddle svg { display: block; }

.eekad-pill-row-wrap.is-static > .eekad-pill-row-paddle {
	display: none;
}

/* In LTR contexts the chevron paths render mirrored — flip via CSS. */
[dir="ltr"] .eekad-pill-row-paddle svg { transform: scaleX(-1); }

/* --- Base look for unstyled pill rows (opt-in) --- */
.eekad-pill {
	appearance: none;
	border: 0;
	background: var(--c-bg-surface);
	color: var(--c-text);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	padding: 10px 22px;
	cursor: pointer;
	line-height: 1.2;
	transition: background .18s ease, color .18s ease;
}
.eekad-pill:hover {
	background: var(--c-bg-elevated);
	color: var(--c-text);
}
.eekad-pill.is-active {
	background: var(--c-text);
	color: var(--c-bg-base);
}

/* =============================================================
 * Homepage "قاعدة بيانات" — unified intelligence-device preview
 * =============================================================
 * One framed device: title on top, toolbar with tab switcher + primary
 * CTA, a single stage that swaps between live network graph (default)
 * and a rich entity grid, and a Somaya status strip at the bottom.
 * HUD-style corner brackets frame the device for a console feel.
 *
 * Bound to one admin-picked eekad_file term at a time — namespaced so
 * nothing collides with the OSINT workspace or the standalone network
 * map on other pages.
 */
.eekad-home-db {
	color: var(--c-text);
	padding-block: var(--section-pad);
	position: relative;
	overflow: hidden;
}
.eekad-home-db__wrap {
	position: relative;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 32px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* --- Lead: title + description --- */
.eekad-home-db__lead {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}
.eekad-home-db__title {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px; /* match .eekad-news__title */
	flex-wrap: wrap;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1;
}
.eekad-home-db__title-kicker { color: var(--c-text); }

/* --- Device frame --- */
.eekad-home-db__device {
	position: relative;
	background: var(--card-bg, var(--c-bg-base));
	border: 1px solid rgba(var(--c-border-rgb), .08);
	display: flex;
	flex-direction: column;
}

/* HUD corner brackets */
.eekad-home-db__corner {
	position: absolute;
	width: 18px;
	height: 18px;
	border-color: var(--c-lime);
	border-style: solid;
	pointer-events: none;
}
.eekad-home-db__corner--tl { top: -1px; left: -1px;    border-width: 2px 0 0 2px; transform-origin: top left; }
.eekad-home-db__corner--tr { top: -1px; right: -1px;   border-width: 2px 2px 0 0; transform-origin: top right; }
.eekad-home-db__corner--bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; transform-origin: bottom left; }
.eekad-home-db__corner--br { bottom: -1px; right: -1px;border-width: 0 2px 2px 0; transform-origin: bottom right; }

/* --- Reveal choreography.
   JS adds `is-armed` on load (if IntersectionObserver + no reduced
   motion), which puts the device in its "off" state. When the device
   enters the viewport, JS adds `is-revealed` and the sequence plays
   once: corners lock in with stagger, top scanline draws across,
   content reveals top-down via clip-path, a single vertical scan
   sweep finishes the motion. Status counters tick via JS.

   No-JS / reduced-motion users never get `is-armed`, so the device
   renders in its final state immediately. */
.eekad-home-db__scanline,
.eekad-home-db__scan-sweep {
	position: absolute;
	left: 0;
	right: 0;
	pointer-events: none;
	z-index: 5;
	opacity: 0;
}
.eekad-home-db__scanline {
	top: -1px;
	height: 1px;
	background: var(--c-lime);
	transform: scaleX(0);
	transform-origin: center;
	box-shadow: 0 0 12px rgba(205, 254, 100, .7);
}
.eekad-home-db__scan-sweep {
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, rgba(205, 254, 100, .55) 50%, transparent 100%);
}

/* Armed (pre-reveal) state — hide content that's about to animate in. */
.eekad-home-db__device.is-armed .eekad-home-db__corner {
	transform: scale(0);
	opacity: 0;
}
.eekad-home-db__device.is-armed .eekad-home-db__devhead,
.eekad-home-db__device.is-armed .eekad-home-db__toolbar,
.eekad-home-db__device.is-armed .eekad-home-db__stage,
.eekad-home-db__device.is-armed .eekad-home-db__status {
	clip-path: inset(0 0 100% 0);
	opacity: 0;
}

/* Revealed — play each beat with its delay.
   Middle-ground pacing: fast enough to feel responsive, slow enough
   that each beat registers as its own moment. Total runtime ~2.1s. */
.eekad-home-db__device.is-armed.is-revealed .eekad-home-db__scanline {
	animation: eekad-db-scan-draw 750ms cubic-bezier(.16, 1, .3, 1) forwards;
}
.eekad-home-db__device.is-armed.is-revealed .eekad-home-db__corner {
	animation: eekad-db-corner-in 600ms cubic-bezier(.16, 1, .3, 1) forwards;
}
.eekad-home-db__device.is-armed.is-revealed .eekad-home-db__corner--tl { animation-delay: 120ms; }
.eekad-home-db__device.is-armed.is-revealed .eekad-home-db__corner--tr { animation-delay: 220ms; }
.eekad-home-db__device.is-armed.is-revealed .eekad-home-db__corner--bl { animation-delay: 320ms; }
.eekad-home-db__device.is-armed.is-revealed .eekad-home-db__corner--br { animation-delay: 420ms; }

.eekad-home-db__device.is-armed.is-revealed .eekad-home-db__devhead {
	animation: eekad-db-reveal 650ms cubic-bezier(.16, 1, .3, 1) 60ms forwards;
}
.eekad-home-db__device.is-armed.is-revealed .eekad-home-db__toolbar {
	animation: eekad-db-reveal 650ms cubic-bezier(.16, 1, .3, 1) 100ms forwards;
}
.eekad-home-db__device.is-armed.is-revealed .eekad-home-db__stage {
	animation: eekad-db-reveal 650ms cubic-bezier(.16, 1, .3, 1) 160ms forwards;
}
.eekad-home-db__device.is-armed.is-revealed .eekad-home-db__status {
	animation: eekad-db-reveal 650ms cubic-bezier(.16, 1, .3, 1) 300ms forwards;
}
.eekad-home-db__device.is-armed.is-revealed .eekad-home-db__scan-sweep {
	animation: eekad-db-sweep 1450ms cubic-bezier(.4, 0, .2, 1) 700ms forwards;
}

@keyframes eekad-db-corner-in {
	from { transform: scale(0); opacity: 0; }
	to   { transform: scale(1); opacity: 1; }
}
@keyframes eekad-db-reveal {
	from { clip-path: inset(0 0 100% 0); opacity: 0; }
	to   { clip-path: inset(0 0 0 0);    opacity: 1; }
}
@keyframes eekad-db-scan-draw {
	0%   { transform: scaleX(0); opacity: 0; }
	10%  { opacity: 1; }
	70%  { transform: scaleX(1); opacity: 1; }
	100% { transform: scaleX(1); opacity: 0; }
}
@keyframes eekad-db-sweep {
	0%   { top: 0;    opacity: 0; }
	15%  { opacity: .5; }
	85%  { opacity: .5; }
	100% { top: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.eekad-home-db__device.is-armed,
	.eekad-home-db__device.is-armed * {
		animation: none !important;
		clip-path: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* --- Device header: file readout.
   Two-line layout: name + ID on one row (ID sits on the far edge,
   baseline-aligned with the title), description on the second row. */
.eekad-home-db__devhead {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 24px 20px;
	background: var(--card-bg, var(--c-bg-surface));
	border-bottom: 1px solid rgba(var(--c-border-rgb), .06);
}
.eekad-home-db__devhead-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}
.eekad-home-db__devhead-name {
	margin: 0;
	color: var(--c-text);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.005em;
}
.eekad-home-db__devhead-id {
	flex-shrink: 0;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--c-text-muted);
	letter-spacing: .08em;
}
.eekad-home-db__devhead-desc {
	margin: 0;
	max-width: 780px;
	color: var(--c-text-2);
	font-size: 15px;
	line-height: 1.65;
}

/* --- Toolbar: tabs + CTA --- */
.eekad-home-db__toolbar {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px;
	border-bottom: 1px solid rgba(var(--c-border-rgb), .06);
	background: var(--card-bg, var(--c-bg-surface));
}
.eekad-home-db__tabs {
	display: flex;
	gap: 4px;
}
.eekad-home-db__tab {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--c-text-3);
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	padding: 12px 16px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	position: relative;
	transition: color .2s ease, background .2s ease;
}
.eekad-home-db__tab svg { width: 16px; height: 16px; opacity: .75; }
.eekad-home-db__tab:hover { color: var(--c-text); background: rgba(var(--c-border-rgb), .03); }
.eekad-home-db__tab.is-active {
	color: var(--c-text);
	background: rgba(var(--c-border-rgb), .08);
}
.eekad-home-db__tab.is-active svg { opacity: 1; }
.eekad-home-db__tab.is-active::after {
	display: none; /* selection reads from the fill, not an accent bar */
}
.eekad-home-db__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: transparent;
	color: var(--c-text);
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
	border: 1px solid rgba(var(--c-border-rgb), .12);
	transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.eekad-home-db__cta:hover {
	color: var(--c-lime);
	border-color: rgba(203, 255, 0, .5);
	background: rgba(203, 255, 0, .04);
}
.eekad-home-db__cta svg { width: 14px; height: 14px; opacity: .7; transition: opacity .2s ease; }
.eekad-home-db__cta:hover svg { opacity: 1; }

/* --- Stage: the big canvas area.
   Matches the section background (Ink) so graph/entities/map read
   as one continuous surface with the outer section. */
.eekad-home-db__stage {
	--db-stage-height: 540px;
	position: relative;
	background: var(--section-bg, var(--c-bg-alt));
	height: var(--db-stage-height);
	min-height: var(--db-stage-height);
	overflow: hidden;
}
/* The device frame already shows HUD brackets — hide the map's own pair. */
.eekad-home-db__map .eekad-network-map__canvas::after { display: none; }
.eekad-home-db__view { display: none; }
.eekad-home-db__view.is-active { display: block; height: 100%; }
.eekad-home-db__view { animation: eekad-home-db-fade .35s ease both; }
@keyframes eekad-home-db-fade {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

/* Graph view — let the existing network map fill the stage
   edge-to-edge. The network block ships with vertical margins for
   the in-article embeds, which inside our stage show up as black
   bands top and bottom. Reset them here. */
.eekad-home-db__map {
	background: transparent;
	border: 0;
	margin: 0;
	--nm-height: var(--db-stage-height);
}

/* Entities view — the panel itself scrolls so we don't blow the
   page layout when a file has dozens of entities. */
.eekad-home-db__view[data-db-view="entities"] {
	height: 100%;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--c-border-rgb), .2) transparent;
}
.eekad-home-db__view[data-db-view="entities"]::-webkit-scrollbar {
	width: 8px;
}
.eekad-home-db__view[data-db-view="entities"]::-webkit-scrollbar-thumb {
	background: rgba(var(--c-border-rgb), .15);
}
.eekad-home-db__view[data-db-view="entities"]::-webkit-scrollbar-thumb:hover {
	background: rgba(203, 255, 0, .3);
}
.eekad-home-db__entity-tools {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 24px 0;
	background: var(--section-bg, var(--c-bg-alt));
}
.eekad-home-db__entity-filter .eekad-select {
	min-width: 164px;
}
.eekad-home-db__entity-filter-count {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--c-text-3);
	white-space: nowrap;
}
.eekad-home-db__entity-filter-count [data-db-entity-visible-count] {
	color: var(--c-lime);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.eekad-home-db__entity-empty {
	margin: 32px 24px;
	color: var(--c-text-muted);
	font-size: 14px;
	text-align: center;
}
/* Grid: give each card its own surface with air between.
   No shared backgrounds; cards sit on the stage as discrete objects. */
.eekad-home-db__entity-grid {
	list-style: none;
	margin: 0;
	padding: 16px 24px 24px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.eekad-home-db__entity { margin: 0; display: flex; }
.eekad-home-db__entity[hidden] { display: none; }
.eekad-home-db__entity-card {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto 1fr;
	align-items: start;
	column-gap: 16px;
	row-gap: 6px;
	padding: 20px;
	background: var(--card-bg, var(--c-bg-surface));
	border: 1px solid rgba(var(--c-border-rgb), .06);
	color: inherit;
	text-decoration: none;
	width: 100%;
	position: relative;
	transition:
		border-color .2s ease,
		background .2s ease,
		box-shadow .25s ease,
		transform .2s ease;
	min-width: 0;
}
/* Subtle top highlight = quiet depth cue, no gradient on the surface. */
.eekad-home-db__entity-card::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: rgba(var(--c-border-rgb), .04);
	pointer-events: none;
}
/* Lime edge slides in from the inline-start on hover — Eekad accent
   without washing the card in color. */
.eekad-home-db__entity-card::after {
	content: '';
	position: absolute;
	top: 0; bottom: 0;
	inset-inline-start: 0;
	width: 2px;
	background: var(--c-lime);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .25s ease;
}
.eekad-home-db__entity-card:hover {
	border-color: rgba(var(--c-border-rgb), .12);
	background: var(--c-bg-surface);
	box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .6);
	transform: translateY(-1px);
}
.eekad-home-db__entity-card:hover::after { transform: scaleY(1); }

.eekad-home-db__entity-avatar {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	background: var(--c-bg-base);
	overflow: hidden;
	grid-row: 1 / span 3;
}
.eekad-home-db__entity-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.eekad-home-db__entity-initial {
	font-family: var(--font-mono);
	font-size: 18px;
	font-weight: 700;
	color: var(--c-text-muted);
}
.eekad-home-db__entity-body { display: contents; }

.eekad-home-db__entity-name {
	font-weight: 700;
	font-size: 16px;
	color: var(--c-text);
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	letter-spacing: -.005em;
}
.eekad-home-db__entity-meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--c-text-3);
	font-weight: 500;
}
.eekad-home-db__entity-dot {
	width: 6px;
	height: 6px;
	background: var(--ent-color, rgba(var(--c-border-rgb), .3));
	flex: 0 0 auto;
}
.eekad-home-db__entity-schema { color: rgba(var(--c-border-rgb), .8); font-weight: 600; }
.eekad-home-db__entity-sep { color: rgba(var(--c-border-rgb), .2); }
.eekad-home-db__entity-country { color: rgba(var(--c-border-rgb), .55); }
.eekad-home-db__entity-summary {
	font-size: 13px;
	line-height: 1.55;
	color: var(--c-text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 2px;
}

/* --- Map view ---
   The device embeds the shared OSINT map (template-parts/osint/map.php),
   so the chrome and pin styling come from the plugin's workspace.css.
   Only the stage sizing is local. */
.eekad-home-db__view--map.is-active {
	display: flex;
	flex-direction: column;
}
/* Same grammar as the relations graph: the canvas IS the surface, and the
   controls ride on it as floating islands. The view switcher already holds
   the top leading corner, so the map's own controls take the bottom one —
   low enough to leave the map readable, far enough from Mapbox's logo and
   attribution (pushed to the other side) not to crowd them. */
.eekad-home-db__view--map .osint__map--embedded {
	position: relative;
	padding: 0;
}
.eekad-home-db__view--map .osint__map-filter {
	position: absolute;
	z-index: 5;
	bottom: 20px;
	inset-inline-start: 20px;
	padding: 0;
	gap: 10px;
}
.eekad-home-db__view--map .osint__map-canvas {
	min-height: 0;
	border: 0;
	background: var(--c-bg-alt); /* Ink — matches section; Mapbox recolors its own layers on load */
}

/* Map instruments, not page chrome. These take the zoom control's language
   instead of the view switcher's: the same surface, the same 32px cells,
   hairline-divided and flush to the container edge, so they read as part of
   the map the way + and − do. Selection stays white-on-dark. */
.eekad-home-db__view--map .osint__map-mode {
	padding: 0;
	overflow: hidden;
	background: rgba(var(--c-bg-surface-rgb), .9);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(var(--c-border-rgb), .08);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}
.eekad-home-db__view--map .osint__map-base {
	margin-inline-start: 0;
}
.eekad-home-db__view--map .osint__map-mode-button {
	height: 32px;
	padding: 0 12px;
	font-size: 12px;
	font-weight: 600;
	gap: 6px;
	color: var(--c-text-muted);
}
.eekad-home-db__view--map .osint__map-mode-button + .osint__map-mode-button {
	border-inline-start: 1px solid rgba(var(--c-border-rgb), .06);
}
.eekad-home-db__view--map .osint__map-mode-button svg {
	width: 14px;
	height: 14px;
}
.eekad-home-db__view--map .osint__map-mode-button:hover {
	background: rgba(255, 255, 255, .06);
	color: var(--c-text);
}
.eekad-home-db__view--map .osint__map-mode-button.is-active {
	background: var(--c-text);
	color: var(--c-bg-base);
}
/* A dataset with more than one map layer brings its select along. It joins
   the same instrument row, so it takes the same height and material rather
   than arriving as a full-size form control. */
.eekad-home-db__view--map .osint__map-filter .eekad-select-wrap {
	width: auto;
	min-width: 0;
	max-width: 220px;
}
.eekad-home-db__view--map .osint__map-filter .eekad-select-wrap .eekad-select {
	height: 34px;
	min-width: 0;
	padding-block: 0;
	padding-inline: 12px 30px;
	background: rgba(var(--c-bg-surface-rgb), .9);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(var(--c-border-rgb), .08);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
	color: var(--c-text-muted);
	font-size: 12px;
	font-weight: 600;
	text-overflow: ellipsis;
}
.eekad-home-db__view--map .osint__map-filter .eekad-select-wrap .eekad-select:hover {
	color: var(--c-text);
}
.eekad-home-db__view--map .osint__map-filter .eekad-select-wrap .eekad-select__arrow {
	width: 14px;
	height: 14px;
}
@media (prefers-reduced-transparency: reduce) {
	.eekad-home-db__view--map .osint__map-filter .eekad-select-wrap .eekad-select {
		background: var(--c-bg-surface);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.eekad-home-db__view--map .osint__map-mode {
		background: var(--c-bg-surface);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

@media (max-width: 768px) {
	/* The workspace stacks these controls into a column; over a phone-sized
	   canvas they share one row instead, pinned to both edges — lifted clear
	   of Mapbox's logo and attribution, which must stay visible. */
	.eekad-home-db__view--map .osint__map-filter {
		flex-direction: row;
		bottom: 64px;
		inset-inline: 12px;
		gap: 8px;
	}
	.eekad-home-db__view--map .osint__map-mode { width: auto; flex: 1; }
	.eekad-home-db__view--map .osint__map-mode-button { padding: 0 8px; }
}

/* Popup + Mapbox control chrome for the embedded map now come from the
   plugin's workspace.css, which the homepage enqueues alongside the
   workspace itself — one set of rules for both surfaces. */

/* --- Status bar footer --- */
.eekad-home-db__status {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	background: var(--card-bg, var(--c-bg-surface));
	border-top: 1px solid rgba(var(--c-border-rgb), .06);
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--c-text-3);
	flex-wrap: wrap;
}
.eekad-home-db__status-group {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.eekad-home-db__status-num {
	color: var(--c-lime);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.eekad-home-db__status-dot {
	width: 7px;
	height: 7px;
	background: var(--c-lime);
	box-shadow: 0 0 8px rgba(203, 255, 0, .7);
	animation: eekad-home-db-pulse 2s ease-in-out infinite;
	/* flex `align-items: center` puts the dot at the line-box center,
	   but the Arabic fallback font's line-box has extra room above for
	   diacritics, so the dot reads as low. Nudge it up to sit at the
	   optical center of "متصل" instead of the metric center. */
	transform: translateY(-2px);
}
@keyframes eekad-home-db-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .35; }
}
.eekad-home-db__status-sep { color: rgba(var(--c-border-rgb), .18); }

/* --- Responsive --- */
@media (max-width: 960px) {
	.eekad-home-db__stage { --db-stage-height: 540px; }
	.eekad-home-db__entity-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.eekad-home-db { padding-block: 48px; }
	.eekad-home-db__wrap { padding-inline: 16px; gap: 20px; }
	.eekad-home-db__title { font-size: 26px; }
	.eekad-home-db__devhead { padding: 16px 16px 14px; gap: 6px; }
	.eekad-home-db__devhead-heading { gap: 12px; }
	.eekad-home-db__devhead-name { font-size: 26px; }
	.eekad-home-db__devhead-id { font-size: 11px; }
	.eekad-home-db__devhead-desc { font-size: 14px; }
	.eekad-home-db__stage { --db-stage-height: 460px; }
	.eekad-home-db__entity-tools { padding: 12px 16px 0; }
	.eekad-home-db__entity-filter .eekad-select { min-width: 140px; }
	.eekad-home-db__entity-grid { grid-template-columns: 1fr; padding: 16px; }
	.eekad-home-db__tabs { flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; }
	.eekad-home-db__tab { flex: 1; justify-content: center; padding: 10px 8px; font-size: 13px; }
	/* CTA collapses to an icon chip in the corner — text label would
	   dominate the toolbar row. Aria label keeps it discoverable. */
	.eekad-home-db__cta {
		flex: 0 0 auto;
		padding: 10px;
		gap: 0;
	}
	.eekad-home-db__cta span { display: none; }
	.eekad-home-db__cta svg { width: 16px; height: 16px; opacity: .9; }
	.eekad-home-db__status { font-size: 11px; padding: 8px 12px; gap: 8px; }
}

/* Reusable locked/coming-soon state for public account surfaces. */
.eekad-feature-lock {
	position: relative;
	isolation: isolate;
}
.eekad-feature-lock.is-locked {
	height: 360px;
	overflow: hidden;
}
.eekad-feature-lock.is-locked > .eekad-feature-lock__content {
	filter: blur(5px);
	opacity: .42;
	pointer-events: none;
	user-select: none;
}
.eekad-feature-lock__overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 28px 18px;
	text-align: center;
	color: var(--c-text);
}
.eekad-feature-lock__overlay[hidden] {
	display: none;
}
.eekad-feature-lock__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: var(--c-lime);
	background: rgba(var(--c-lime-rgb), .1);
	border: 1px solid rgba(var(--c-lime-rgb), .28);
}
.eekad-feature-lock__icon svg {
	width: 24px;
	height: 24px;
}
.eekad-feature-lock__title {
	font-family: "itf Somaya Arabic";
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--c-text);
}
.eekad-home-db__entity-results.is-locked {
	height: 300px;
}

/* Per-card variant of the same idea: one result in an otherwise open list
   is not public yet, so it blurs on its own instead of taking the whole
   grid down with it. Wrapper is always present so grid geometry doesn't
   shift between the locked and unlocked states. */
.eekad-card-lock {
	position: relative;
	display: flex;
	min-width: 0;
}
.eekad-card-lock > * {
	flex: 1 1 auto;
	min-width: 0;
}
.eekad-card-lock.is-locked > :not(.eekad-card-lock__badge) {
	filter: blur(5px);
	opacity: .42;
	pointer-events: none;
	user-select: none;
}
.eekad-card-lock__badge {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
	color: var(--c-text);
}
.eekad-card-lock:not(.is-locked) > .eekad-card-lock__badge {
	display: none;
}
.eekad-card-lock__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: var(--c-lime);
	background: rgba(var(--c-lime-rgb), .1);
	border: 1px solid rgba(var(--c-lime-rgb), .28);
}
.eekad-card-lock__icon svg {
	width: 16px;
	height: 16px;
}
.eekad-card-lock__title {
	font-family: "itf Somaya Arabic";
	font-size: 13px;
	font-weight: 800;
	line-height: 1.2;
}

/* Inside a panel-level lock the card badges would stack a second lock
   under the blur. The panel overlay speaks for all of them. */
.eekad-feature-lock.is-locked .eekad-card-lock.is-locked > :not(.eekad-card-lock__badge) {
	filter: none;
	opacity: 1;
}
.eekad-feature-lock.is-locked .eekad-card-lock__badge {
	display: none;
}

/* In the homepage database, the entity stage can be taller than the generic
   lock panel. Let the locked results consume all space below the filter row. */
/* :not([hidden]) matters — this rule outranks the UA's [hidden] display
   rule, so without it the locked panel stays on screen after switching
   to another tab. */
.eekad-home-db__view[data-db-view="entities"].is-account-locked:not([hidden]) {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.eekad-home-db__view[data-db-view="entities"].is-account-locked .eekad-home-db__entity-tools {
	flex: 0 0 auto;
}
.eekad-home-db__view[data-db-view="entities"].is-account-locked .eekad-home-db__entity-results.is-locked {
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
}

@media (max-width: 600px) {
	.eekad-feature-lock.is-locked { height: 300px; }
	.eekad-home-db__view[data-db-view="entities"].is-account-locked .eekad-home-db__entity-results.is-locked { height: auto; }
}

/* =============================================================
 * PAGE SCANLINE — lime sweep on initial load (all pages except home)
 * =========================================================== */
.eekad-page-scanline {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 9999;
	pointer-events: none;
	background: linear-gradient(
		to left,
		transparent,
		var(--c-lime, #cdfe64) 30%,
		var(--c-lime, #cdfe64) 70%,
		transparent
	);
	transform: scaleX(0);
	transform-origin: right;
	animation: eekad-page-scan .6s ease-out .1s forwards;
}
@keyframes eekad-page-scan {
	0%   { opacity: .8; transform: scaleX(0); }
	50%  { opacity: 1; }
	100% { opacity: 0; transform: scaleX(1); }
}

/* =============================================================
 * HOMEPAGE — APPLE REDESIGN LAYER
 *
 * Scoped to body.eekad-canvas (front page + eekad_file taxonomy —
 * pages built from the homepage sections). Rebuilds the visual system on
 * Apple's design language while keeping Eekad's sharp corners,
 * lime restraint, and RTL-first layout:
 *
 *   1. One continuous deep background — no alternating section
 *      bands. Depth comes from glass materials, not stripes.
 *   2. Typography-led hierarchy — big display titles, quiet
 *      metadata, generous leading. No tracking on Arabic, ever.
 *   3. Materials — translucent glass cards/chips with a light-
 *      catch top edge; ambient content-derived backdrops.
 *   4. Space — one generous vertical rhythm between sections.
 *
 * Kept at the end of the file on purpose: it is a coherent design
 * layer that must win the cascade over the per-section styles above.
 * =========================================================== */

body.eekad-canvas {
	/* Deep continuous canvas */
	background: var(--c-bg-base);

	/* One equal rhythm for every section — generous but not hollow */
	--section-pad: clamp(64px, 7vw, 96px);

	/* Glass material + display type tokens now live in :root —
	   shared with the article reading layer. */
}

/* --- 1. Architecture: kill the striping, open the space --- */
body.eekad-canvas .eekad-main > section:nth-of-type(odd),
body.eekad-canvas .eekad-main > section:nth-of-type(even) {
	background: transparent;
	--card-bg: var(--c-bg-surface);
	--section-bg: var(--c-bg-base);
}

/* Archive pages (news + categories) share the same one-canvas
   architecture — the global odd/even striping outranks the section
   classes, so the kill must be body-scoped exactly like body.eekad-canvas.
   body.page covers every static page (privacy, terms, files…): without it
   they inherit the odd stripe and render on the elevated grey instead of
   the deep canvas the footer and the rest of the site sit on. */
body.archive,
body.search,
body.error404,
body.page {
	background: var(--c-bg-base);
}
body.archive .eekad-main > section:nth-of-type(odd),
body.archive .eekad-main > section:nth-of-type(even),
body.search .eekad-main > section:nth-of-type(odd),
body.search .eekad-main > section:nth-of-type(even),
body.error404 .eekad-main > section:nth-of-type(odd),
body.error404 .eekad-main > section:nth-of-type(even),
body.page .eekad-main > section:nth-of-type(odd),
body.page .eekad-main > section:nth-of-type(even) {
	background: transparent;
	--card-bg: var(--c-bg-surface);
	--section-bg: var(--c-bg-base);
}
body.eekad-canvas .eekad-news,
body.eekad-canvas .eekad-verify,
body.eekad-canvas .eekad-picks,
body.eekad-canvas .eekad-home-db,
body.eekad-canvas .eekad-tv,
body.eekad-canvas .eekad-categories {
	border-top: 0; /* separation is space, not lines */
}

/* --- 2. Section headers: Newsroom-style display titles ---
   The canvas layer used to hide the brackets; they are the section
   marker now, so they stay. Colour comes from .eekad-section-bracket. */
body.eekad-canvas .eekad-news__title,
body.eekad-canvas .eekad-verify__title,
body.eekad-canvas .eekad-picks__title,
body.eekad-canvas .eekad-home-db__title,
body.eekad-canvas .eekad-tv__heading {
	font-size: var(--fs-display);
	font-weight: 700;
	line-height: 1.25;
}
body.eekad-canvas .eekad-news__header,
body.eekad-canvas .eekad-verify__header,
body.eekad-canvas .eekad-tv__head {
	align-items: baseline;
	margin-block-end: 40px;
}
/* "See all" links grow up to match the bigger titles */
body.eekad-canvas .eekad-news__more,
body.eekad-canvas .eekad-tv__see-all,
body.eekad-canvas .eekad-verify__all-link {
	font-size: 15px;
	font-weight: 600;
}

/* --- 3. Hero: cinematic, type-led, no indigo slab --- */
@media (min-width: 769px) {
	body.eekad-canvas .eekad-hero__overlay {
		background: linear-gradient(180deg,
			rgba(0, 0, 0, .10) 0%,
			rgba(0, 0, 0, .02) 35%,
			rgba(0, 0, 0, .55) 74%,
			rgba(0, 0, 0, .84) 100%);
	}
	/* Grid: chip and title span both columns; the excerpt and the CTA
	   share the last row (RTL — excerpt on the right, CTA to its left).
	   Row spacing comes from the items' own margins, not row-gap, so
	   the CTA can center against the excerpt without skewing it. */
	body.eekad-canvas .eekad-hero__card {
		height: auto;
		display: grid;
		grid-template-columns: minmax(0, 620px) 1fr;
		align-items: center;
		gap: 0 40px;
		max-width: 860px;
		margin-block-end: clamp(64px, 6vw, 96px); /* breathing room before the tab reel */
	}
	body.eekad-canvas .eekad-hero__card-bg,
	body.eekad-canvas .eekad-hero__card-expand {
		display: none;
	}
	/* The wrapper dissolves so chip/title/excerpt become grid items and
	   the CTA (a sibling of the wrapper) can share the excerpt's row. */
	body.eekad-canvas .eekad-hero__card-text {
		position: static;
		inset: auto;
		display: contents;
	}
	/* File chip becomes a small glass chip */
	body.eekad-canvas .eekad-hero__card-file {
		grid-row: 1;
		grid-column: 1 / -1;
		justify-self: start;
		font-size: 12px;
		font-weight: 600;
		padding: 6px 14px;
		color: var(--c-text);
		background: rgba(255, 255, 255, .10);
		border: 1px solid rgba(255, 255, 255, .22);
		backdrop-filter: blur(12px) saturate(160%);
		-webkit-backdrop-filter: blur(12px) saturate(160%);
		margin-bottom: 14px;
	}
	body.eekad-canvas .eekad-hero__title {
		grid-row: 2;
		grid-column: 1 / -1;
		--hero-title-size: clamp(34px, 4vw, 58px);
		font-weight: 700;
		line-height: 1.22;
		white-space: normal;
		text-overflow: initial;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
		/* Visual gap to the excerpt row is 12px — the ink padding is
		   subtracted so it doesn't read as extra space. */
		margin-block-end: calc(12px - var(--title-ink-bottom));
	}
	body.eekad-canvas .eekad-hero__excerpt {
		grid-row: 3;
		grid-column: 1;
		font-size: clamp(16px, 1.3vw, 19px);
		font-weight: 400;
		line-height: 1.75;
		max-width: 620px;
		opacity: .88;
		margin-top: 0;
		text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
	}
	body.eekad-canvas .eekad-hero__cta {
		position: static;
		inset: auto;
		grid-row: 3;
		grid-column: 2;
		justify-self: start;
		width: auto;
		height: auto;
		padding: 14px 30px;
		font-size: 16px;
		font-weight: 700;
	}
	/* Tab reel: white-outline boxes become glass chips; the rail
	   line calms down so the strip reads as chrome, not content. */
	body.eekad-canvas .eekad-hero__tab {
		background: rgba(255, 255, 255, .06);
		border-color: rgba(255, 255, 255, .18);
		backdrop-filter: blur(12px) saturate(160%);
		-webkit-backdrop-filter: blur(12px) saturate(160%);
	}
	body.eekad-canvas .eekad-hero__tab:hover {
		background: rgba(255, 255, 255, .12);
	}
	body.eekad-canvas .eekad-hero__tab.is-active {
		background: var(--c-white);
		border-color: var(--c-white);
	}
	body.eekad-canvas .eekad-hero__tab-rail-seg {
		background: rgba(255, 255, 255, .28);
	}
}

/* --- 4. Latest news: Newsroom cards (image top, glass body) --- */
body.eekad-canvas .eekad-news__list {
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
body.eekad-canvas .eekad-news__link {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	background: var(--glass-bg);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
}
body.eekad-canvas .eekad-news__link:hover {
	background: var(--glass-bg-hover);
}
body.eekad-canvas .eekad-news__thumb {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}
body.eekad-canvas .eekad-news__body {
	padding: 20px 22px 26px;
	gap: 10px;
}
body.eekad-canvas .eekad-news__heading {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.55;
	-webkit-line-clamp: 3;
}
/* Filter pills as quiet glass chips */
body.eekad-canvas .eekad-news__pills {
	margin-bottom: 28px;
	gap: 10px;
}
body.eekad-canvas .eekad-news__pill {
	background: var(--glass-bg);
	border: 1px solid var(--glass-edge);
	color: var(--c-text-2);
}
body.eekad-canvas .eekad-news__pill:hover {
	background: var(--glass-bg-hover);
	color: var(--c-text);
}
body.eekad-canvas .eekad-news__pill.is-active {
	background: var(--c-text);
	border-color: var(--c-text);
	color: var(--c-bg-base);
}
@media (max-width: 1024px) {
	body.eekad-canvas .eekad-news__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	body.eekad-canvas .eekad-news__list { grid-template-columns: 1fr; }
}

/* --- 5. Verify: sits on the same canvas as every other section.
   (An ambient blurred backdrop was tried here and removed — one
   section with private atmosphere broke the single-canvas rule.) --- */
body.eekad-canvas .eekad-verify__viewport { z-index: 1; }
body.eekad-canvas .eekad-verify__nav-btn,
body.eekad-canvas .eekad-tv__nav-btn {
	background: var(--glass-bg);
	border-color: var(--glass-edge);
	backdrop-filter: blur(12px) saturate(160%);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
}
body.eekad-canvas .eekad-verify__nav-btn:hover,
body.eekad-canvas .eekad-tv__nav-btn:hover {
	background: var(--glass-bg-hover);
	border-color: var(--glass-edge-top);
}

/* --- 6. Most-read: glass text cards --- */
body.eekad-canvas .eekad-picks__card {
	background: var(--glass-bg);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
}
body.eekad-canvas .eekad-picks__card:hover {
	background: var(--glass-bg-hover);
}


/* --- 7. Database: one glass slab --- */
body.eekad-canvas .eekad-home-db__device {
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
}

/* --- 8. Categories: quieter chrome, same cinema --- */
body.eekad-canvas .eekad-category__cta {
	background: rgba(255, 255, 255, .10);
	color: var(--c-text);
	border: 1px solid rgba(255, 255, 255, .22);
	backdrop-filter: blur(12px) saturate(160%);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
}
body.eekad-canvas .eekad-category:hover .eekad-category__cta {
	background: var(--c-lime);
	border-color: var(--c-lime);
	color: var(--c-text-on-accent);
}

/* --- 9. Footer: breathing room, hairline separation --- */
body.eekad-canvas .eekad-site-footer {
	border-top: 1px solid rgba(255, 255, 255, .07);
}

/* --- Reduced transparency: frost every glass surface here too --- */
@media (prefers-reduced-transparency: reduce) {
	body.eekad-canvas .eekad-hero__card-file,
	body.eekad-canvas .eekad-hero__tab,
	body.eekad-canvas .eekad-news__link,
	body.eekad-canvas .eekad-news__pill,
	body.eekad-canvas .eekad-picks__card,
	body.eekad-canvas .eekad-home-db__device,
	body.eekad-canvas .eekad-verify__nav-btn,
	body.eekad-canvas .eekad-tv__nav-btn,
	body.eekad-canvas .eekad-category__cta {
		background: var(--c-bg-surface);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* =============================================================
 * HOMEPAGE — REFINEMENT PASS (shelf, chrome, rhythm)
 *
 * Continues the body.eekad-canvas Apple layer. All rest-state changes —
 * no scroll effects, no pointer tracking.
 * =========================================================== */

/* --- Categories: dimmed full-bleed wall → framed shelf cards --- */
.eekad-categories__head {
	margin-block-end: 40px;
}
.eekad-categories__title {
	margin: 0;
	/* Same lockup as the other bracketed section titles. */
	display: inline-flex;
	align-items: center;
	gap: 8px; /* match .eekad-news__title */
	font-size: 30px;
	font-weight: 700;
	line-height: 1.25;
}
body.eekad-canvas .eekad-categories {
	padding-block: var(--section-pad);
}
body.eekad-canvas .eekad-categories__title {
	font-size: var(--fs-display);
}
body.eekad-canvas .eekad-categories__row {
	gap: 24px;
	/* Shelf starts aligned with the container's leading edge and
	   runs to the screen edge — same geometry as the TV rail. */
	padding-inline-start: max(var(--container-px), calc((100vw - var(--container)) / 2 + var(--container-px)));
	padding-inline-end: 24px;
}
body.eekad-canvas .eekad-category {
	flex: 0 0 412px;
	min-height: 600px;
	padding: 40px 36px;
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	background: var(--c-bg-surface);
}
/* Photography reads as photography — the scrim below carries the text */
body.eekad-canvas .eekad-category__bg {
	filter: saturate(.9) brightness(.78);
}
body.eekad-canvas .eekad-category:hover .eekad-category__bg {
	filter: saturate(1) brightness(.9);
}
body.eekad-canvas .eekad-category::after {
	background: linear-gradient(180deg,
		rgba(var(--c-bg-base-rgb), 0) 30%,
		rgba(var(--c-bg-base-rgb), .55) 62%,
		rgba(var(--c-bg-base-rgb), .92) 100%);
}
body.eekad-canvas .eekad-category:hover::after {
	opacity: 1;
}
/* Editorial lockup: start-aligned, full presence at rest */
body.eekad-canvas .eekad-category__body {
	opacity: 1;
	align-items: flex-start;
	text-align: start;
	gap: 10px;
}
body.eekad-canvas .eekad-category__title .eekad-category__bracket {
	display: none;
}
body.eekad-canvas .eekad-category__title {
	font-size: 30px;
	line-height: 1.3;
}
body.eekad-canvas .eekad-category__desc {
	font-size: 15px;
	line-height: 1.65;
	color: var(--c-text-3);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
body.eekad-canvas .eekad-category__cta {
	margin-top: 8px;
	padding: 10px 24px;
	font-size: 15px;
	background: transparent;
	color: var(--c-text);
	border: 1px solid rgba(var(--c-border-rgb), .35);
}
body.eekad-canvas .eekad-category:hover .eekad-category__cta {
	background: var(--c-lime);
	border-color: var(--c-lime);
	color: var(--c-text-on-accent);
}

/* --- Database device: glass window chrome (rest-state only) --- */
body.eekad-canvas .eekad-home-db__device {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .12),
		0 32px 64px -24px rgba(0, 0, 0, .5);
}

/* --- Micro-rhythm: one header spacing, consistent card gaps --- */
body.eekad-canvas .eekad-news__header,
body.eekad-canvas .eekad-verify__header,
body.eekad-canvas .eekad-tv__head,
body.eekad-canvas .eekad-picks__header {
	margin-block-end: 40px;
}
body.eekad-canvas .eekad-picks__grid {
	gap: 16px;
}
body.eekad-canvas .eekad-site-footer {
	border-top: 1px solid rgba(255, 255, 255, .07);
}

/* =============================================================
 * HOMEPAGE — DATABASE DEVICE: APPLE GLASS WINDOW
 *
 * The intelligence device drops its HUD cosplay (lime corner
 * brackets, scanline sweeps) and becomes a calm glass window:
 * one material, a segmented control, and a single meaningful
 * lime moment — the live "متصل" status dot.
 * =========================================================== */
body.eekad-canvas .eekad-home-db__corner,
body.eekad-canvas .eekad-home-db__scanline,
body.eekad-canvas .eekad-home-db__scan-sweep {
	display: none;
}
body.eekad-canvas .eekad-home-db__device {
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .08),
		0 40px 80px -32px rgba(0, 0, 0, .6);
}
/* Titlebar + toolbar sit on the glass itself — no separate fills */
body.eekad-canvas .eekad-home-db__toolbar,
body.eekad-canvas .eekad-home-db__status {
	background: transparent;
}

/* Tabs → segmented control: one container, the active segment is a
   brighter piece of the same material. Lime exits — selection is
   carried by contrast, not accent color. */
body.eekad-canvas .eekad-home-db__tabs {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .08);
	padding: 3px;
	gap: 2px;
}
body.eekad-canvas .eekad-home-db__tab {
	padding: 9px 16px;
	color: var(--c-text-muted);
}
body.eekad-canvas .eekad-home-db__tab:hover {
	color: var(--c-text);
	background: rgba(255, 255, 255, .05);
}
body.eekad-canvas .eekad-home-db__tab.is-active {
	color: var(--c-bg-base);
	background: var(--c-text);
}
body.eekad-canvas .eekad-home-db__tab.is-active::after {
	display: none;
}

/* CTA calms down: hover commits to brighter glass, not lime */
body.eekad-canvas .eekad-home-db__cta:hover {
	color: var(--c-text);
	border-color: rgba(var(--c-border-rgb), .40);
	background: rgba(255, 255, 255, .05);
}

/* Status bar: numbers are data, not accents — the pulsing متصل dot
   stays the device's one lime signal. */
body.eekad-canvas .eekad-home-db__status-num {
	color: var(--c-text);
}

/* Stage recesses slightly into the glass */
body.eekad-canvas .eekad-home-db__stage {
	background: rgba(var(--c-bg-base-rgb), .55);
	border-block: 1px solid rgba(255, 255, 255, .05);
}

/* =============================================================
 * HOMEPAGE — DATABASE: CONTENT IS THE SURFACE
 *
 * The window-in-a-window dies. Desktop: the graph becomes the
 * section's own canvas, vignetted softly into the page; the file
 * name, segmented control, live status and CTA float over it as
 * small glass islands (Apple Maps grammar). Mobile keeps the
 * stacked device until the desktop language is settled.
 * =========================================================== */
@media (min-width: 769px) {
	body.eekad-canvas .eekad-home-db__device {
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	/* The canvas: taller, frameless, soft-edged */
	body.eekad-canvas .eekad-home-db__stage {
		--db-stage-height: 660px;
		background: transparent;
		border: 0;
		-webkit-mask-image: radial-gradient(135% 120% at 50% 50%, #000 68%, transparent 99%);
		mask-image: radial-gradient(135% 120% at 50% 50%, #000 68%, transparent 99%);
	}

	/* Shared recipe for the floating islands */
	body.eekad-canvas .eekad-home-db__devhead,
	body.eekad-canvas .eekad-home-db__tabs,
	body.eekad-canvas .eekad-home-db__status,
	body.eekad-canvas .eekad-home-db__cta {
		position: absolute;
		z-index: 6;
		background: rgba(var(--c-bg-elevated-rgb), .72);
		backdrop-filter: blur(20px) saturate(160%);
		-webkit-backdrop-filter: blur(20px) saturate(160%);
		border: 1px solid rgba(255, 255, 255, .12);
		border-top-color: rgba(255, 255, 255, .20);
		box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .55);
	}

	/* File identity — top leading corner */
	body.eekad-canvas .eekad-home-db__devhead {
		top: 20px;
		inset-inline-start: 20px;
		padding: 12px 20px;
		gap: 2px;
		border-bottom: 1px solid rgba(255, 255, 255, .09);
	}
	body.eekad-canvas .eekad-home-db__devhead-name {
		font-size: 24px;
		letter-spacing: 0; /* Arabic — never tracked */
	}
	body.eekad-canvas .eekad-home-db__devhead-heading { gap: 14px; }
	body.eekad-canvas .eekad-home-db__devhead-desc { display: none; }

	/* The toolbar wrapper dissolves — its children are islands now.
	   (display: contents also neutralizes the armed-reveal clip-path,
	   which would otherwise clip the absolute chips to a 0-height box.) */
	body.eekad-canvas .eekad-home-db__toolbar {
		display: contents;
	}
	body.eekad-canvas .eekad-home-db__tabs {
		top: 20px;
		inset-inline-end: 20px;
		padding: 3px;
	}

	/* Live status — bottom leading corner */
	body.eekad-canvas .eekad-home-db__status {
		bottom: 20px;
		inset-inline-start: 20px;
		width: auto;
		padding: 10px 16px;
		border-top: 1px solid rgba(255, 255, 255, .15);
	}

	/* CTA — bottom trailing corner */
	body.eekad-canvas .eekad-home-db__cta {
		bottom: 20px;
		inset-inline-end: 20px;
		padding: 12px 18px;
	}

	/* Entities view lives under floating chrome: clear it top & bottom */
	body.eekad-canvas .eekad-home-db__entity-tools {
		margin-block-start: 78px;
	}
	body.eekad-canvas .eekad-home-db__entity-results {
		padding-block-end: 84px;
	}
	body.eekad-canvas .eekad-home-db__cta:hover {
		background: rgba(var(--c-bg-elevated-rgb), .92);
	}
	/* Inactive segments must still read over the dark canvas */
	body.eekad-canvas .eekad-home-db__tab {
		color: var(--c-text-2);
	}

	@media (prefers-reduced-transparency: reduce) {
		body.eekad-canvas .eekad-home-db__devhead,
		body.eekad-canvas .eekad-home-db__tabs,
		body.eekad-canvas .eekad-home-db__status,
		body.eekad-canvas .eekad-home-db__cta {
			background: var(--c-bg-alt);
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
		}
		body.eekad-canvas .eekad-home-db__stage {
			-webkit-mask-image: none;
			mask-image: none;
		}
	}
}

/* =============================================================
 * HOMEPAGE — DATABASE: ONE KIT, ONE VOICE
 *
 * The floating pieces adopt a single island recipe (one height,
 * one material, one shadow) so the canvas chrome reads as one
 * designed system, not parts. The file identity moves out of the
 * canvas into the section title lockup: eyebrow (قاعدة بيانات +
 * record ID) over the file name as display title.
 * =========================================================== */

.eekad-home-db__lead-desc {
	margin: 12px 0 0;
	max-width: 720px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--c-text-3);
}

@media (min-width: 769px) {
	/* --- Island kit: one metric system --- */
	body.eekad-canvas .eekad-home-db {
		--island-h: 44px;
	}
	body.eekad-canvas .eekad-home-db__tabs,
	body.eekad-canvas .eekad-home-db__status,
	body.eekad-canvas .eekad-home-db__cta {
		height: var(--island-h);
		align-items: center;
	}
	body.eekad-canvas .eekad-home-db__status { display: inline-flex; padding: 0 18px; }
	body.eekad-canvas .eekad-home-db__cta    { padding: 0 18px; }

	/* --- Segmented control, polished ---
	   38px segments in a 44px shell; the active piece is brighter
	   material with its own light edge — a pressed piece of glass,
	   not a differently-styled button. */
	body.eekad-canvas .eekad-home-db__tabs {
		display: inline-flex;
		padding: 3px;
		gap: 2px;
	}
	body.eekad-canvas .eekad-home-db__tab {
		height: 36px;
		padding: 0 16px;
		gap: 8px;
		font-size: 14px;
		font-weight: 600;
	}
	body.eekad-canvas .eekad-home-db__tab svg { width: 15px; height: 15px; }
	body.eekad-canvas .eekad-home-db__tab.is-active {
		background: var(--c-text); /* chrome selection — same language as pills */
		box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
	}

	/* --- Zoom bar joins the kit --- */
	body.eekad-canvas .eekad-home-db .nm-zoom-bar {
		background: rgba(var(--c-bg-elevated-rgb), .72);
		backdrop-filter: blur(20px) saturate(160%);
		-webkit-backdrop-filter: blur(20px) saturate(160%);
		border: 1px solid rgba(255, 255, 255, .12);
		border-top-color: rgba(255, 255, 255, .20);
		box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .55);
	}
	body.eekad-canvas .eekad-home-db .nm-zoom-bar__btn:hover {
		background: rgba(255, 255, 255, .08);
		color: var(--c-text);
	}

	/* Entity count is data, not accent */
	body.eekad-canvas .eekad-home-db__entity-filter-count [data-db-entity-visible-count] {
		color: var(--c-text);
	}

	/* Chip gone — the graph reclaims the top leading corner; give the
	   entities toolbar back its natural position. */
	body.eekad-canvas .eekad-home-db__entity-tools {
		margin-block-start: 0;
	}
}

/* =============================================================
 * HOMEPAGE — DATABASE: COMPOSED, NOT SCATTERED
 *
 * Final composition: standard section header row (title + explore
 * link, same pattern as every section), ONE perceivable canvas
 * surface, only view controls floating on the view (segmented
 * control + zoom), and the status readout as a quiet caption
 * under the canvas with a usage hint.
 * =========================================================== */

/* Header row — mirrors .eekad-news__header exactly */
body.eekad-canvas .eekad-home-db__lead {
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}
.eekad-home-db__explore {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--c-text-muted);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--dur-quick) var(--ease-out);
}
.eekad-home-db__explore svg { width: 16px; height: 16px; }
.eekad-home-db__explore:hover { color: var(--c-lime); }

@media (min-width: 769px) {
	/* The canvas becomes a perceivable surface — a whisper of fill
	   and a hairline, so the floating controls visibly sit ON it. */
	body.eekad-canvas .eekad-home-db__stage {
		background: rgba(255, 255, 255, .02);
		border: 1px solid rgba(255, 255, 255, .07);
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* Status: island no more — a caption under the canvas. */
	body.eekad-canvas .eekad-home-db__status {
		position: static;
		height: auto;
		padding: 14px 2px 0;
		background: transparent;
		border: 0;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		display: flex;
	}
	body.eekad-canvas .eekad-home-db__status-hint {
		margin-inline-start: auto;
		font-family: var(--font-sans);
		font-size: 13px;
		font-weight: 500;
		color: var(--c-text-faint);
	}

	/* Entities view: bottom chrome is gone — restore natural padding */
	body.eekad-canvas .eekad-home-db__entity-results {
		padding-block-end: 24px;
	}
}
/* The hint teaches a desktop drag gesture — hide it on touch layouts */
@media (max-width: 768px) {
	.eekad-home-db__status-hint { display: none; }
}

/* =============================================================
 * HOMEPAGE — DATABASE: CONTROL PRIORITY + CELLS, NOT BOXES
 *
 * 1. The view switcher is the primary control — it takes the
 *    leading edge. Zoom is secondary utility — bottom trailing.
 * 2. Entity cards stop being boxes-on-a-surface: they become
 *    cells OF the surface — no fills, no borders, hairline row
 *    dividers, hover as a quiet material wash. The lime hover
 *    stripe and card chrome retire.
 * =========================================================== */
@media (min-width: 769px) {
	/* --- Control priority --- */
	body.eekad-canvas .eekad-home-db__tabs {
		inset-inline-start: 20px;
		inset-inline-end: auto;
	}
	body.eekad-canvas .eekad-home-db .nm-zoom-bar {
		top: auto;
		transform: none;
		bottom: 20px;
		inset-inline-start: auto;
		inset-inline-end: 20px;
	}

	/* --- Entities as cells of the surface --- */
	body.eekad-canvas .eekad-home-db__entity-grid {
		gap: 0;
		column-gap: 8px;
		padding: 8px 24px 24px;
	}
	body.eekad-canvas .eekad-home-db__entity-card {
		background: transparent;
		border: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .05);
		box-shadow: none;
		padding: 18px 16px;
	}
	body.eekad-canvas .eekad-home-db__entity-card::before,
	body.eekad-canvas .eekad-home-db__entity-card::after {
		display: none;
	}
	body.eekad-canvas .eekad-home-db__entity-card:hover {
		background: rgba(255, 255, 255, .04);
		border-bottom-color: rgba(255, 255, 255, .05);
		box-shadow: none;
		transform: none;
	}

	/* The filter select joins the kit: quiet hairline, no filled box */
	body.eekad-canvas .eekad-home-db .eekad-select {
		background: transparent;
		border-color: rgba(255, 255, 255, .12);
	}
	/* Filter tools mirror the segmented control from the opposite
	   corner — the two ends of the toolbar row stay balanced. */
	body.eekad-canvas .eekad-home-db__entity-tools {
		justify-content: flex-end;
		gap: 14px;
	}
}

/* =============================================================
 * HOMEPAGE — DATABASE: CELL SIMPLIFICATION + TOOLS ROW FIX
 *
 * Cells carry exactly three things: photo, name, one quiet meta
 * line (schema), then the summary. The colored schema dot and the
 * flag+country retire — in a single-file preview the country is
 * the same on every row, which makes it noise, not information.
 * The tools row loses its opaque band (it isn't sticky — its
 * scroll container is a sibling) and gains real breathing room
 * with a hairline that matches the cell dividers.
 * =========================================================== */
@media (min-width: 769px) {
	body.eekad-canvas .eekad-home-db__entity-tools {
		position: static;
		background: transparent;
		padding: 18px 24px 16px;
		border-bottom: 1px solid rgba(255, 255, 255, .05);
	}
	body.eekad-canvas .eekad-home-db__entity-dot,
	body.eekad-canvas .eekad-home-db__entity-sep,
	body.eekad-canvas .eekad-home-db__entity-country {
		display: none;
	}
}

/* ── Network graph craft ──
   Labels fade rather than pop; edges ease between rest and focus.
   (Shared component — applies wherever the graph renders.) */
.nm-edge-label {
	transition: opacity .3s ease;
}
.nm-edge {
	transition: stroke .25s ease, stroke-width .25s ease;
}

/* ── اخترنا لكم: cell alignment + quiet meta ──
   Content anchors to the card top (top-aligned thumb and text),
   the meta row steps back to metadata scale, and the date fades
   further than the category — titles own the card. */
body.eekad-canvas .eekad-picks__card {
	align-items: flex-start;
}
body.eekad-canvas .eekad-picks__body {
	justify-content: flex-start;
}
body.eekad-canvas .eekad-picks__meta {
	font-size: 14px;
	gap: 12px;
	color: var(--c-text-muted);
}
body.eekad-canvas .eekad-picks__date {
	color: var(--c-text-faint);
	white-space: nowrap; /* a date never breaks mid-phrase */
}

body.eekad-canvas .eekad-picks__card-title {
	font-size: 20px;
	line-height: 1.4;
}

/* ── Homepage rail sizing for the shared TV reel card ──
   The reel component owns its look (thumbnail-only, hover title);
   the rail only sets width, snap, and the kit's calm lift. */
.eekad-tv__rail .eekad-tv-reel {
	flex: 0 0 auto;
	width: clamp(180px, 42vw, 240px);
	scroll-snap-align: start;
	transition: transform var(--dur-quick) var(--ease-spring);
}
.eekad-tv__rail .eekad-tv-reel:hover,
.eekad-tv__rail .eekad-tv-reel:focus-visible {
	transform: translateY(-3px);
}
.eekad-tv__rail .eekad-tv-reel:focus-visible {
	outline: 2px solid var(--c-lime);
	outline-offset: 2px;
}
@media (min-width: 1024px) {
	.eekad-tv__rail .eekad-tv-reel { width: clamp(260px, 23vw, 320px); }
}
@media (prefers-reduced-motion: reduce) {
	.eekad-tv__rail .eekad-tv-reel:hover { transform: none; }
}

/* News meta hierarchy matches picks: category present, time faint */
body.eekad-canvas .eekad-news__time {
	color: var(--c-text-faint);
}

/* =============================================================
 * MEGA MENU — APPLE FLYOUT PASS (global chrome)
 *
 * The boxed band-cards retire: an Apple flyout is typographic —
 * columns of links on one glass sheet, hierarchy from type scale
 * and tone, not from containers. Header and sheet share one
 * material while open. Sharp corners return (the old bands and
 * chips carried border-radius against the house rule).
 * =========================================================== */

/* --- One surface: the sheet IS the nav bar's extension ---
   While open, the header goes fully transparent and the sheet
   rises to the viewport top, sliding BEHIND the nav (header z-index
   100 > panel 99). The nav bar visually sits on the sheet itself —
   one material, no seam. (Never put backdrop-filter on the header
   element: it would become the filter root for the nested panel
   and kill the sheet's blur.) */
body.has-mega-open .eekad-site-header {
	background: transparent;
}
/* The sheet covers the nav's strip, and it is a DESCENDANT of the
   nav — so no wrapper z-index can separate them. Raise the nav's
   individual pieces instead (logo, link anchors, actions): none of
   them are ancestors of the panel, so they stack above it cleanly. */
.eekad-site-header__logo,
.eekad-site-header__actions,
.eekad-site-header__cta {
	z-index: 102;
}
.eekad-nav > li > a {
	position: relative;
	z-index: 102;
}
body.has-mega-open .eekad-nav__mega-panel {
	top: 0;
	padding-block-start: 64px;
}
body.has-mega-open .eekad-nav__mega-backdrop {
	top: 0;
}
body.has-mega-open .eekad-nav__mega-panel {
	background: rgba(var(--c-bg-alt-rgb), .78);
	backdrop-filter: blur(24px) saturate(180%);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 40px 80px -32px rgba(0, 0, 0, .6);
}

/* --- Content entrance: the sheet expands, then content settles
   in with a small rise — apple.com flyout choreography. --- */
.eekad-nav__mega-panel > * {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .28s var(--ease-out), transform .34s var(--ease-spring);
}
.eekad-nav__mega-panel.is-open > * {
	opacity: 1;
	transform: none;
	transition-delay: .14s;
}
@media (prefers-reduced-motion: reduce) {
	.eekad-nav__mega-panel > * {
		transform: none;
		transition: opacity .2s ease;
	}
}
@media (prefers-reduced-transparency: reduce) {
	body.has-mega-open .eekad-site-header,
	body.has-mega-open .eekad-nav__mega-panel {
		background: var(--c-bg-alt);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* =============================================================
 * FOOTER — QUIET CLOSE (global chrome)
 *
 * The footer is the page's quietest surface: it sits on the same
 * canvas, hierarchy comes from tone (faint labels, muted links
 * that brighten to white), and lime keeps exactly one job here —
 * the newsletter subscribe action. Accent bars, lime chevrons and
 * lime hovers retire.
 * =========================================================== */
.eekad-site-footer {
	background: var(--c-bg-base);
	border-top: 1px solid rgba(255, 255, 255, .07);
}
.eekad-site-footer__main {
	padding-block: clamp(64px, 7vw, 96px) 56px;
}

/* Labels: quiet, no accent bar */
.eekad-site-footer__heading {
	padding-inline-start: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-text-faint);
}
.eekad-site-footer__heading::before {
	display: none;
}

/* Links: tone hierarchy, white on hover */
.eekad-site-footer__menu a { color: var(--c-text-3); }
.eekad-site-footer__menu a::before { display: none; }
.eekad-site-footer__menu a:hover { color: var(--c-text); }
.eekad-site-footer__logo:hover { color: var(--c-text); opacity: .85; }
.eekad-site-footer__legal a:hover { color: var(--c-text); }

/* Social: ghost squares that answer in white */
.eekad-site-footer__social a {
	border-color: rgba(255, 255, 255, .14);
	color: var(--c-text-3);
}
.eekad-site-footer__social a:hover {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .30);
	color: var(--c-text);
}

/* Newsletter: hairline field; the lime button is the footer's one accent */
.eekad-site-footer__form {
	background: rgba(255, 255, 255, .03);
	border-color: rgba(255, 255, 255, .12);
}

/* Bottom bar: same canvas, hairline only */
.eekad-site-footer__bottom {
	background: transparent;
	border-top: 1px solid rgba(255, 255, 255, .06);
}

/* =============================================================
 * MOBILE PASS — the Apple layer at phone width
 * =========================================================== */
@media (max-width: 768px) {
	/* One rhythm on phones too — the old per-section 48px overrides
	   give way to the shared token, slightly tighter than desktop. */
	body.eekad-canvas { --section-pad: 56px; }
	body.eekad-canvas .eekad-news { padding-block: var(--section-pad); }
	body.eekad-canvas .eekad-home-db { padding-block: var(--section-pad); }
	body.eekad-canvas .eekad-picks__wrap { padding: var(--section-pad) 16px; }

	/* Database lead: the desktop header-row squeezes the title on a
	   phone — stack it, explore link under the title. */
	body.eekad-canvas .eekad-home-db__lead {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	/* Categories shelf: the card fits the phone with a peek of the
	   next one — the peek is the scroll affordance. */
	body.eekad-canvas .eekad-category {
		flex-basis: min(412px, calc(100vw - 72px));
		min-height: 520px;
	}
}

/* --- TV reels on touch: there is no hover — the scrim and title
   are simply always present. (Shared component: homepage + /tv/.) */
@media (hover: none) {
	.eekad-tv-reel::after { opacity: 1; }
	.eekad-tv-reel__title { opacity: 1; transform: none; }
}

/* --- Mobile menu: deep canvas + staggered content entrance.
   Deliberately OPAQUE, not glass: full-screen backdrop-filter is
   the most expensive composite a phone GPU can do, translucent
   attempts historically flashed Safari's URL-bar blur (see the
   overlay rules above), and a full-screen menu replaces its
   context — there is nothing meaningful behind it to reveal.
   It shares the canvas MATERIAL instead: same deep tone, same
   filmic grain. The choreography lives INSIDE the opaque surface:
   items rise in with a small stagger per page activation. */
.eekad-mobile-menu {
	background-color: var(--c-bg-base);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.022 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes eekad-mobile-item-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}
.eekad-mobile-menu.is-open .eekad-mobile-nav__page.is-active > li {
	animation: eekad-mobile-item-in .45s var(--ease-spring) both;
}
.eekad-mobile-menu.is-open .eekad-mobile-nav__page.is-active > li:nth-child(2) { animation-delay: .04s; }
.eekad-mobile-menu.is-open .eekad-mobile-nav__page.is-active > li:nth-child(3) { animation-delay: .08s; }
.eekad-mobile-menu.is-open .eekad-mobile-nav__page.is-active > li:nth-child(4) { animation-delay: .12s; }
.eekad-mobile-menu.is-open .eekad-mobile-nav__page.is-active > li:nth-child(5) { animation-delay: .16s; }
.eekad-mobile-menu.is-open .eekad-mobile-nav__page.is-active > li:nth-child(6) { animation-delay: .20s; }
.eekad-mobile-menu.is-open .eekad-mobile-nav__page.is-active > li:nth-child(7) { animation-delay: .24s; }
.eekad-mobile-menu.is-open .eekad-mobile-nav__page.is-active > li:nth-child(8) { animation-delay: .28s; }
.eekad-mobile-menu.is-open .eekad-mobile-nav__page.is-active > li:nth-child(n+9) { animation-delay: .32s; }
.eekad-mobile-menu.is-open .eekad-mobile-menu__footer {
	animation: eekad-mobile-item-in .45s var(--ease-spring) .3s both;
}
@media (prefers-reduced-motion: reduce) {
	.eekad-mobile-menu.is-open .eekad-mobile-nav__page.is-active > li,
	.eekad-mobile-menu.is-open .eekad-mobile-menu__footer {
		animation: none;
	}
}

/* --- Mobile news: one lead card, then a quiet list ---
   Six stacked Newsroom cards are a desktop pattern that turns into
   a scroll marathon on a phone. Mobile keeps the lead story as the
   big image card and renders the rest as compact hairline rows —
   cells of the canvas, not boxes on it. --- */
@media (max-width: 640px) {
	body.eekad-canvas .eekad-news__list {
		gap: 0;
	}
	body.eekad-canvas .eekad-news__item:first-child .eekad-news__link {
		margin-block-end: 4px;
	}
	body.eekad-canvas .eekad-news__item:not(:first-child) .eekad-news__link {
		flex-direction: row;
		align-items: center;
		gap: 14px;
		padding: 14px 2px;
		background: transparent;
		border: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .06);
	}
	body.eekad-canvas .eekad-news__item:not(:first-child) .eekad-news__link:hover {
		transform: none;
		box-shadow: none;
		background: transparent;
	}
	body.eekad-canvas .eekad-news__item:not(:first-child) .eekad-news__thumb {
		width: 104px;
		aspect-ratio: 3 / 2;
		flex: 0 0 104px;
	}
	body.eekad-canvas .eekad-news__item:not(:first-child) .eekad-news__body {
		padding: 0;
		gap: 5px;
	}
	body.eekad-canvas .eekad-news__item:not(:first-child) .eekad-news__heading {
		font-size: 15.5px;
		line-height: 1.5;
		-webkit-line-clamp: 2;
	}
}

/* --- Mobile database: the cells discipline, phone-sized ---
   (Mirrors the desktop cells rules, which live inside the 769px+
   floating-chrome block.) Entities render as hairline rows on the
   surface; the tools row loses its opaque band here too. */
@media (max-width: 768px) {
	body.eekad-canvas .eekad-home-db__entity-grid {
		gap: 0;
		padding: 4px 16px 20px;
	}
	body.eekad-canvas .eekad-home-db__entity-card {
		background: transparent;
		border: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .05);
		box-shadow: none;
		padding: 14px 4px;
	}
	body.eekad-canvas .eekad-home-db__entity-card::before,
	body.eekad-canvas .eekad-home-db__entity-card::after {
		display: none;
	}
	body.eekad-canvas .eekad-home-db__entity-dot,
	body.eekad-canvas .eekad-home-db__entity-sep,
	body.eekad-canvas .eekad-home-db__entity-country {
		display: none;
	}
	body.eekad-canvas .eekad-home-db__entity-tools {
		position: static;
		background: transparent;
		padding: 14px 16px 12px;
		border-bottom: 1px solid rgba(255, 255, 255, .05);
	}
	body.eekad-canvas .eekad-home-db .eekad-select {
		background: transparent;
		border-color: rgba(255, 255, 255, .12);
	}
	body.eekad-canvas .eekad-home-db__entity-filter-count [data-db-entity-visible-count] {
		color: var(--c-text);
	}
}

/* =============================================================
 * ARTICLE — APPLE READING LAYER
 *
 * Scoped to body.single (posts, verifications — everything that
 * renders through single.php). Brings the article surface onto
 * the same design system as the redesigned homepage:
 *
 *   1. One continuous deep canvas — the same bg-base as home, so
 *      navigating home → article no longer shifts the background.
 *   2. Reading rhythm — headings carry extra space ABOVE (padding,
 *      not margin, per the section-heading convention) so they
 *      cling to the content they introduce.
 *   3. Hierarchy — h2/h3 step clearly away from body size.
 *
 * Kept at the end of the file, after the homepage layer, for the
 * same reason: a design layer that must win the cascade.
 * =========================================================== */

/* --- 1. One deep canvas --- */
body.single {
	background: var(--c-bg-base);
}
body.single .eekad-investigation {
	background: transparent;
}

/* --- 2 + 3. Reading architecture: chapters, standfirst, breathing ---
   The page paces like a story, not a column of newsprint: display-
   scale chapter headings with real air above, a big quiet standfirst,
   and evidence blocks that breathe away from the prose. */
body.single .eekad-investigation__body h2,
body.single .eekad-iv-section-heading {
	font-size: clamp(32px, 3.4vw, 46px);
	line-height: 1.35; /* Somaya leading floor — see cover title */
	padding-block-start: clamp(44px, 6vw, 76px);
}
body.single .eekad-investigation__body h3 {
	font-size: 28px;
	line-height: 1.25;
	padding-block-start: 20px;
}

/* Standfirst — display weight plus the leading rule the base style
   already carries. A rule attaches the opening to the column it belongs
   to, where a bounded panel would cut it out of the article. Neutral, not
   lime: lime stays with the marker-highlight on strong/mark, which is a
   finding rather than decoration. */
body.single .eekad-iv-lead {
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1.5;
	font-weight: 300;
	color: var(--c-text);
	padding-block: clamp(12px, 2.5vw, 32px) clamp(8px, 2vw, 24px);
	margin-block-end: clamp(20px, 3vw, 36px);
}

/* Evidence blocks breathe — margins add to the 28px grid gap, so a
   block sits ~2x farther from prose than prose sits from itself. */
body.single .eekad-investigation__body > .eekad-iv-figure,
body.single .eekad-investigation__body > .eekad-iv-gallery,
body.single .eekad-investigation__body > .eekad-iv-ba,
body.single .eekad-investigation__body > .eekad-iv-time-comparison,
body.single .eekad-investigation__body > .eekad-iv-social,
body.single .eekad-investigation__body > .eekad-iv-map,
body.single .eekad-investigation__body > .eekad-network-map,
body.single .eekad-investigation__body > .eekad-iv-timeline,
body.single .eekad-investigation__body > .eekad-iv-stats,
body.single .eekad-investigation__body > .eekad-iv-sources,
body.single .eekad-investigation__body > .eekad-iv-claim-verdict,
body.single .eekad-investigation__body > .eekad-iv-verification-basic,
body.single .eekad-investigation__body > .eekad-iv-pullquote {
	margin-block: clamp(20px, 3.5vw, 44px);
}

/* Media escapes the text column — narrow prose, wide evidence, full-
   bleed moments. The alternation IS the architecture. */
body.single .eekad-investigation__body > .eekad-iv-figure,
body.single .eekad-investigation__body > .eekad-iv-ba,
body.single .eekad-investigation__body > .eekad-iv-time-comparison,
body.single .eekad-investigation__body > .eekad-iv-gallery:not(.alignfull),
body.single .eekad-investigation__body > .eekad-iv-map:not(.alignfull),
body.single .eekad-investigation__body > .eekad-network-map:not(.alignfull) {
	grid-column: wide;
	max-width: var(--eekad-media-w, 960px);
	margin-inline: auto;
	/* Auto margins on a grid item make it shrink-to-fit: the box takes its
	   content's width and the margins eat the rest of the track. A block
	   whose image was narrower than the column therefore collapsed to the
	   image, and two such blocks ended up at two different widths. Width
	   comes from the column; only the cap above may narrow it. */
	width: 100%;
}
body.single {
	/* One dial for how wide article media sits: 720px = the pre-Apple size,
	   960px = the full wide track. 864 sits between the two.
	   Every media block reads it, so they can never disagree.
	   Back to 720: media sits in the prose column, as it did before the
	   Apple pass moved it out. A photo at the text's own measure reads as
	   evidence inside the argument rather than as a break from it. */
	--eekad-media-w: 720px;
	/* The frame proportion from before the Apple pass (720 x 560 = 1.2857)
	   is the gold standard. The Apple pass scaled width 1.33x but height
	   only 1.14x, which stretched the frame; deriving the cap from the
	   width instead locks the ratio, so resizing can never skew it again. */
	--eekad-figure-cap: calc(var(--eekad-media-w) / 1.2857);
}

/* --- 4. Materials: the card family is glass, with the light-catch
   top edge from the homepage kit. (Unscoped: the editor canvas
   should show the same material.) --- */
.eekad-iv-claim-verdict,
.eekad-iv-verification-basic,
.eekad-iv-stat-card,
.eekad-iv-sources {
	border-top-color: var(--glass-edge-top);
}

/* =============================================================
 * INPUT KIT — the one text-field component.
 *
 * Every text input, search field, textarea, and select on the site
 * shares this material: glass surface, light-catch top edge, quiet
 * placeholder, lime focus ring (focus = earned interactive lime).
 * Sizing stays contextual; the material and focus language do not.
 *
 * Adding a new field? Add its selector here — do not restyle inputs
 * inside feature CSS. Kept at the end of the file so it wins the
 * cascade over any legacy per-component recipe above.
 * =========================================================== */

/* Field shells (wrapper carries the border; inner input is bare) */
.eekad-cat-all__search,
.eekad-tv-archive__search,
.eekad-news-archive__search,
.eekad-site-footer__form {
	background: var(--glass-bg);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	border-radius: 0; /* sharp — kit owns the corner, not the browser */
	transition: border-color .2s, background .2s;
}
.eekad-cat-all__search:focus-within,
.eekad-tv-archive__search:focus-within,
.eekad-news-archive__search:focus-within,
.eekad-site-footer__form:focus-within {
	border-color: var(--c-lime);
}

/* Direct-bordered fields (input/textarea/select own the border) */
.eekad-verify-submit__field input,
.eekad-verify-submit__field textarea,
.eekad-select {
	appearance: none;
	-webkit-appearance: none;
	background: var(--glass-bg);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	border-radius: 0; /* sharp — kit owns the corner, not the browser */
	transition: border-color .2s, background .2s;
}
.eekad-verify-submit__field input:focus,
.eekad-verify-submit__field textarea:focus,
.eekad-select:focus {
	outline: none;
	border-color: var(--c-lime);
	background: var(--glass-bg);
}
.eekad-select:hover {
	border-color: var(--glass-edge-top);
}
/* Native dropdown lists cannot be translucent. */
.eekad-select option {
	background: var(--c-bg-surface);
}

/* One placeholder voice */
.eekad-cat-all__search-input::placeholder,
.eekad-tv-archive__search input[type="text"]::placeholder,
.eekad-news-archive__search-input::placeholder,
.eekad-site-footer__form input::placeholder,
.eekad-verify-submit__field input::placeholder,
.eekad-verify-submit__field textarea::placeholder {
	color: var(--c-text-faint);
}

/* =============================================================
 * PILL KIT — the one filter-pill / chip component.
 *
 * Material: glass with a light-catch top edge. Hover: brighter glass.
 * Active/selected: contrast (white fill, dark text) — never lime.
 * Sizing and typography stay contextual. New pills join this list.
 * =========================================================== */
.eekad-pill,
.eekad-news__pill,
.eekad-picks__pill,
.eekad-news-archive__label-pill,
.eekad-tv-archive__pill,
.eekad-archive__sub-pill,
.eekad-verify-archive__tab {
	background: var(--glass-bg);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	color: var(--c-text-2);
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.eekad-pill:hover,
.eekad-news__pill:hover,
.eekad-picks__pill:hover,
.eekad-news-archive__label-pill:hover,
.eekad-tv-archive__pill:hover,
.eekad-archive__sub-pill:hover,
.eekad-verify-archive__tab:hover {
	background: var(--glass-bg-hover);
	color: var(--c-text);
}
.eekad-pill.is-active,
.eekad-news__pill.is-active,
.eekad-picks__pill.is-active,
.eekad-news-archive__label-pill.is-active,
.eekad-tv-archive__pill.is-active,
.eekad-archive__sub-pill.is-active,
.eekad-verify-archive__tab.is-active {
	background: var(--c-text);
	border-color: var(--c-text);
	color: var(--c-bg-base);
}

/* ---- Modifier: pills sitting ON artwork ----
   The kit's glass is a 4.5% white film, which works on a flat panel and
   disappears over a photograph — whatever is behind the pill reads straight
   through the label. Over a cover image the plate has to do the work the
   panel normally does: a dark translucent surface that actually blurs what
   is under it, so the text keeps its contrast over any frame of any image.
   Selection is untouched — the active pill stays the kit's contrast fill. */
.eekad-pill--on-media {
	background: rgba(var(--c-bg-alt-rgb), .55);
	border-color: rgba(255, 255, 255, .14);
	color: var(--c-text);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
}
/* `:not(.is-active)` is load-bearing, not tidiness. This block sits after the
   kit's active rule and matches at the same specificity, so a bare `:hover`
   wins on the selected pill — repainting its white plate dark while the text
   stays the dark ink the active state set, i.e. invisible. */
.eekad-pill--on-media:not(.is-active):hover {
	background: rgba(var(--c-bg-alt-rgb), .72);
	border-color: rgba(255, 255, 255, .28);
}
/* Blur is what buys the contrast; without it the translucent plate alone is
   not enough, so those browsers get an opaque one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.eekad-pill--on-media {
		background: rgba(var(--c-bg-alt-rgb), .88);
	}
}

/* ---- Modifier: quiet ----
   For rows where the filters are a sentence of options rather than a
   bank of controls — the search console, where six bordered buttons
   under a search field read as a toolbar nobody asked for. Resting
   state is bare text; only the chosen one takes the kit's contrast
   chip, so the row says "you are here" once instead of six times.
   Selection language is untouched: still white-on-dark, never lime. */
.eekad-pill--quiet:not(.is-active) {
	background: none;
	border-color: transparent;
	/* Muted, not faint: without a chip behind it the label is carrying its own
	   legibility, and faint over a translucent panel does not clear the bar. */
	color: var(--c-text-muted);
}
.eekad-pill--quiet:not(.is-active):hover {
	background: none;
	color: var(--c-text);
}

/* =============================================================
 * TRAIL KIT — the one "where does this sit" breadcrumb.
 *
 * A path, not chips. What a piece belongs to is a tree — أمن رقمي /
 * حملات تأثير for an article, قاعدة البيانات / غزة for an OSINT dataset —
 * and two equal-weight boxes read as two unrelated tags instead. Set as
 * one line of plain text with the separator visible: ancestors dim, the
 * leaf at full weight. Depth is carried by the slash and the weight step,
 * so no box is needed.
 *
 * Carries ancestors only, never the current page's own name: the title is
 * already the loudest thing below it, and repeating it reads as a stutter.
 * This is also the whole eyebrow — it says what a page is and where it sits
 * in one quiet line, so nothing above it needs to compete with the title.
 * New trails join this list.
 * =========================================================== */
.eekad-iv-cover__category-trail,
.osint__hero-trail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-block-end: 24px;
	font-family: var(--font-sans);
	/* One step above the 14px date: with the chips gone this is the only
	   wayfinding — and the only link — in the header, so it earns more
	   presence than a timestamp without competing with the title. */
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0; /* Arabic — never tracked */
	color: var(--c-text);
}
.eekad-iv-cover__category-trail a,
.osint__hero-trail a {
	color: var(--c-text);
	text-decoration: none;
	transition: color var(--dur-quick) var(--ease-out);
}
/* Every link but the last is an ancestor — context, not destination. */
.eekad-iv-cover__category-trail a:not(:last-child),
.osint__hero-trail a:not(:last-child) {
	color: rgba(255, 255, 255, .60);
}
.eekad-iv-cover__category-trail a:hover,
.osint__hero-trail a:hover {
	color: var(--c-text);
}
.eekad-iv-cover__category-sub,
.osint__hero-trail-leaf {
	font-weight: 700;
}
.eekad-iv-cover__category-sep,
.osint__hero-trail-sep {
	color: rgba(255, 255, 255, .30);
	font-weight: 400;
}

/* =============================================================
 * PAGINATION KIT — the one page-navigation component.
 * Glass boxes, glass hover, contrast current page.
 *
 * Every archive renders template-parts/pagination.php, so this single
 * class is the whole surface. The per-archive copies that used to live
 * beside each grid were folded in here; only spacing may be varied, via
 * a modifier class on the nav.
 * =========================================================== */
/* A long run (39 pages → 9 controls) overflows a phone. Wrap onto a
   second centred row rather than letting the row pan the whole page
   sideways — same rule the pill rows follow. */
.eekad-archive__pagination .page-numbers {
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 8px;
	max-width: 100%;
}
.eekad-archive__pagination .page-numbers a,
.eekad-archive__pagination .page-numbers span {
	min-width: 40px;
	height: 40px;
	background: var(--glass-bg);
	border: 1px solid var(--glass-edge);
	color: var(--c-text-2);
	transition: background .2s, color .2s;
}
.eekad-archive__pagination .page-numbers a:hover {
	background: var(--glass-bg-hover);
	color: var(--c-text);
	border-color: var(--glass-edge);
}
.eekad-archive__pagination .page-numbers .current {
	background: var(--c-text);
	border-color: var(--c-text);
	color: var(--c-bg-base);
	font-weight: 700;
}
/* The prev/next controls carry a word plus an arrow, so they set their
   own width instead of sitting on the 40px numeral grid. */
.eekad-archive__pagination .page-numbers .prev,
.eekad-archive__pagination .page-numbers .next {
	padding-inline: 16px;
	font-weight: 600;
}
/* Ellipsis is a marker, not a target. */
.eekad-archive__pagination .page-numbers .dots {
	background: none;
	border-color: transparent;
	color: var(--c-text-muted);
}

/* Pill rows on phones: a nowrap row becomes a touch rail — the row
   scrolls, the page never does. */
@media (max-width: 800px) {
	.eekad-pill-row-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		max-width: 100%; /* never let the wrap size to its row's content */
	}
	.eekad-pill-row-wrap::-webkit-scrollbar { display: none; }
	.eekad-pill-row-wrap > .eekad-pill-row {
		flex-wrap: nowrap;
		width: max-content;
		min-width: 100%;
	}
}

/* =============================================================
 * HOMEPAGE — DESKTOP CARD-SHAPE SWAP
 * =============================================================
 * On desktop the two homepage grids trade card forms:
 *
 *   آخر الأخبار (news)  → wide horizontal card, square thumb
 *                          beside the text, 2 columns
 *   اخترنا لكم  (picks) → upright card, 16/9 image on top,
 *                          3 columns
 *
 * Deliberately gated at min-width 1025px. Below that every
 * breakpoint keeps its original shape — news upright, picks
 * horizontal — so phones and tablets are untouched by the swap.
 * Scoped to body.eekad-canvas because the base picks geometry and
 * the canvas news geometry both need overriding, and the canvas
 * layer is where these sections' desktop design already lives.
 * =========================================================== */
@media (min-width: 1025px) {

	/* --- News → wide horizontal card --- */
	body.eekad-canvas .eekad-news__list {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 200px;
		gap: 24px;
	}
	body.eekad-canvas .eekad-news__link {
		flex-direction: row;
		align-items: center;
		gap: 16px;
		padding: 24px;
	}
	body.eekad-canvas .eekad-news__thumb {
		flex: 0 0 140px;
		width: 140px;
		height: 140px;
		aspect-ratio: auto;
	}
	body.eekad-canvas .eekad-news__body {
		padding: 0;
		gap: 8px;
	}
	body.eekad-canvas .eekad-news__heading {
		font-size: 22px;
		line-height: 1.3;
		-webkit-line-clamp: 2;
	}

	/* --- Picks → upright card.
	   The body comes first in the DOM (it carries the heading), so
	   column-reverse — not column — lifts the thumb to the top
	   without reordering the markup for assistive tech. --- */
	body.eekad-canvas .eekad-picks__grid {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: none;
		grid-auto-flow: row;
		gap: 24px;
	}
	body.eekad-canvas .eekad-picks__card {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 0;
		padding: 0;
	}
	body.eekad-canvas .eekad-picks__thumb {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}
	body.eekad-canvas .eekad-picks__body {
		flex: 1 1 auto;
		justify-content: flex-start;
		gap: 10px;
		padding: 20px 22px 26px;
	}
	body.eekad-canvas .eekad-picks__meta {
		gap: 10px;
		font-size: 13px;
	}
	body.eekad-canvas .eekad-picks__card-title {
		font-size: 19px;
		line-height: 1.55;
		-webkit-line-clamp: 3;
	}
}

/* Model credits.
   The 3D asset licences are CC-BY, so the credit is part of using them, not a
   footnote we might add. Printed by the block itself — quiet, but present, and
   impossible for an editor to forget because they were never asked to add it. */
.eekad-iv-scrolly__credit {
	margin: 10px auto 0;
	max-width: 720px;
	padding-inline: var(--container-px);
	font-family: var(--font-mono);
	font-size: 11px;
	line-height: 1.6;
	color: var(--c-text-faint);
	text-align: start;
}

/* Placing a unit: the map takes a crosshair and a lime edge, same grammar as
   drawing a polygon, so the two modes are visibly the same kind of act. */
.eekad-mapstep-edit__preview.is-placing {
	outline: 2px dashed #CDFE64;
	outline-offset: -2px;
}

/* =============================================================
 * SEARCH KIT — the header trigger and the search console.
 *
 * The console is the mega menu's sheet in another posture: same
 * translucent bg-alt, same blur(24px) saturate(180%), same deep
 * shadow. One material for "a surface that floats over the site".
 *
 * The discipline here is subtraction. A search field does not need
 * a directory under it, and every box that is not carrying meaning
 * has been taken out — the only remaining fills are the chosen
 * scope, the row you are on, and artwork. Scope filters use the
 * pill kit's --quiet modifier so the row reads as one chip and five
 * words rather than six buttons.
 *
 * Lime budget for the whole feature: the caret, the <mark> on a
 * matched word, and the loading hairline.
 *
 * Mobile is the base style; the centred sheet is the desktop
 * enhancement, gated at 769px.
 * =========================================================== */

/* Every `display` rule below would otherwise beat the UA's `[hidden]`
   rule, which is how the row image, glyph, verdict chip and badge all
   share one template and show only the one that applies. Keep this
   first so nothing after it can un-hide an element. */
.eekad-search [hidden] {
	display: none !important;
}

/* ---- Header trigger ---- */
.eekad-site-header__actions {
	position: absolute;
	inset-inline-end: 32px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 102;
}
/* The CTA positioned itself before it had a parent to sit in. */
.eekad-site-header__actions .eekad-site-header__cta {
	position: static;
	inset-inline-end: auto;
	top: auto;
	transform: none;
}
/* Icon only, and last in the bar — after the database CTA. */
.eekad-site-header__search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--c-text);
	text-decoration: none;
	opacity: .85;
	transition: opacity .2s;
}
.eekad-site-header__search svg {
	width: 20px;
	height: 20px;
	display: block;
}
.eekad-site-header__search:hover,
.eekad-site-header__search:focus-visible {
	opacity: 1;
}

/* ---- Dialog shell ---- */
.eekad-search {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--c-text);
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.eekad-search::backdrop {
	background: rgba(var(--c-bg-base-rgb), .58);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
body.has-search-open {
	overflow: hidden;
}

/* The mega menu's material, verbatim. */
.eekad-search__panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background: rgba(var(--c-bg-alt-rgb), .78);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 40px 80px -32px rgba(0, 0, 0, .6);
	padding-top: env(safe-area-inset-top);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.eekad-search__panel { background: rgba(var(--c-bg-alt-rgb), .97); }
}

/* ---- Field row ----
   The one hairline the console keeps: it separates what you type from
   what comes back. Every other divider was decoration. */
.eekad-search__bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 22px;
	flex-shrink: 0;
}
.eekad-search__bar-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--c-text-faint);
	transition: color .2s;
}
.eekad-search__bar:focus-within .eekad-search__bar-icon { color: var(--c-text-2); }

.eekad-search__input {
	flex: 1 1 auto;
	min-width: 0;
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	font-family: var(--font-sans);
	font-size: 21px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--c-text);
	/* The one lime in the chrome: it marks where the reader is acting. */
	caret-color: var(--c-lime);
}
.eekad-search__input:focus { outline: none; }
.eekad-search__input::placeholder { color: var(--c-text-faint); font-weight: 400; }
.eekad-search__input::-webkit-search-cancel-button { display: none; }

.eekad-search__clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--c-text-faint);
	cursor: pointer;
	transition: color .2s;
}
.eekad-search__clear:hover { color: var(--c-text); }
.eekad-search__clear svg { width: 15px; height: 15px; }

.eekad-search__cancel {
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--c-text-2);
	cursor: pointer;
	flex-shrink: 0;
}
.eekad-search__cancel:hover { color: var(--c-text); }

/* Loading hairline — only ever visible when the wait is worth reporting. */
.eekad-search__progress {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	overflow: hidden;
	opacity: 0;
	transition: opacity .15s;
}
.eekad-search__progress.is-on { opacity: 1; }
.eekad-search__progress::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inline-size: 40%;
	background: var(--c-lime);
	animation: eekad-search-sweep 1.1s var(--ease-out) infinite;
}
@keyframes eekad-search-sweep {
	0%   { inset-inline-start: -40%; }
	100% { inset-inline-start: 100%; }
}

/* ---- Scope filters ---- */
.eekad-search__scopes {
	display: flex;
	gap: 2px;
	padding: 2px 16px 14px;
	overflow-x: auto;
	scrollbar-width: none;
	flex-shrink: 0;
	border-top: 1px solid rgba(var(--c-border-rgb), .07);
	padding-top: 14px;
	margin-top: 2px;
}
.eekad-search__scopes::-webkit-scrollbar { display: none; }
.eekad-search__scope {
	flex: 0 0 auto;
	padding: 7px 13px;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
}

/* ---- Scrolling body ---- */
.eekad-search__body {
	flex: 1 1 auto;
	/* Without this the item's automatic minimum size is its content height, so
	   a long result list refuses to shrink and grows straight over the scope
	   filters above it. */
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* ---- Result groups ---- */
.eekad-search__results { padding-bottom: 10px; }
.eekad-search__group + .eekad-search__group { margin-top: 18px; }
.eekad-search__group-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 22px 8px;
}
.eekad-search__group-label {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--c-text-muted);
}
.eekad-search__group-more {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: none;
	border: 0;
	padding: 2px;
	font-family: var(--font-sans);
	font-size: 13px;
	color: var(--c-text-faint);
	cursor: pointer;
	transition: color .18s;
}
.eekad-search__group-more:hover:not(:disabled) { color: var(--c-text); }
.eekad-search__group-more:disabled { cursor: default; }
.eekad-search__group-more svg { width: 14px; height: 14px; }
.eekad-search__group-more:disabled svg { display: none; }

/* ---- Result row ----
   The only fill is the row you are on. Artwork is content; a tile
   behind an icon would be one more box saying nothing. */
.eekad-search__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 22px;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
.eekad-search__row.is-selected {
	background: rgba(255, 255, 255, .06);
}
.eekad-search__row-visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 52px;
	block-size: 52px;
	flex-shrink: 0;
	overflow: hidden;
}
.eekad-search__row-img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}
.eekad-search__row-glyph {
	width: 26px;
	height: 26px;
	color: var(--c-text-faint);
}
.eekad-search__row.is-selected .eekad-search__row-glyph { color: var(--c-text-2); }
.eekad-search__row-badge {
	position: absolute;
	inset-block-end: 2px;
	inset-inline-start: 2px;
	font-family: var(--font-mono);
	font-size: 10px;
	line-height: 1;
	padding: 3px 4px;
	color: var(--c-text);
	background: rgba(var(--c-bg-base-rgb), .78);
}
/* The verdict is the answer, so it takes the place artwork would hold. */
.eekad-search__verdict {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	padding: 4px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	color: var(--verdict-unverified);
}
.eekad-search__verdict[data-verdict="true"]       { color: var(--verdict-true); }
.eekad-search__verdict[data-verdict="false"]      { color: var(--verdict-false); }
.eekad-search__verdict[data-verdict="misleading"] { color: var(--verdict-misleading); }

.eekad-search__row-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1 1 auto;
}

/* Two lines, never three. The date hangs off the end of the title the way a
   mail client dates a message — present when you look for it, costing nothing
   when you don't. Everything else shares the line below. */
.eekad-search__row-head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	min-width: 0;
}
.eekad-search__row-title {
	font-size: 17px;
	line-height: 1.35;
	color: var(--c-text);
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.eekad-search__row-title mark {
	background: none;
	color: var(--c-lime);
	font-weight: inherit;
}
.eekad-search__row-date {
	flex: 0 0 auto;
	font-size: 11px;
	line-height: 1.3;
	color: var(--c-text-faint);
	white-space: nowrap;
}
.eekad-search__row-date:empty { display: none; }

/* One subordinate line: what this is, then why it matched. Clamped to a
   single line in the console because scanning speed wins there. */
.eekad-search__row-sub {
	font-size: 13px;
	line-height: 1.45;
	color: var(--c-text-muted);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	overflow: hidden;
}
.eekad-search__row-meta {
	color: var(--c-text-faint);
}
.eekad-search__row-meta:not(:empty) ~ .eekad-search__row-snippet::before {
	content: " · ";
	color: var(--c-text-faint);
}
.eekad-search__row-snippet mark {
	background: none;
	color: var(--c-lime);
	font-weight: inherit;
}

/* ---- Empty and error ---- */
.eekad-search__empty,
.eekad-search__error {
	padding: 40px 22px 44px;
	text-align: center;
}
.eekad-search__empty-title {
	margin: 0 0 6px;
	font-size: 18px;
	color: var(--c-text-muted);
}
.eekad-search__empty-query { color: var(--c-lime); }
.eekad-search__empty-hint {
	margin: 0;
	font-size: 14px;
	color: var(--c-text-faint);
}
.eekad-search__tip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	font-size: 14px;
	color: var(--c-text-2);
	text-decoration: none;
	border-bottom: 1px solid rgba(var(--c-border-rgb), .18);
	padding-bottom: 3px;
	transition: color .18s, border-color .18s;
}
.eekad-search__tip:hover {
	color: var(--c-lime);
	border-bottom-color: var(--c-lime);
}
.eekad-search__tip svg { width: 15px; height: 15px; }
.eekad-search__error p {
	margin: 0 0 16px;
	font-size: 15px;
	color: var(--c-text-muted);
}
.eekad-search__error .eekad-pill {
	padding: 8px 16px;
	font-size: 14px;
	cursor: pointer;
}

/* ---- Footer action — a row, not a button in a bar ---- */
.eekad-search__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-shrink: 0;
	padding: 15px 22px calc(15px + env(safe-area-inset-bottom));
	font-size: 14px;
	font-weight: 600;
	color: var(--c-text-2);
	text-decoration: none;
	border-top: 1px solid rgba(var(--c-border-rgb), .07);
	transition: color .18s, background .18s;
}
.eekad-search__all:hover {
	color: var(--c-text);
	background: rgba(255, 255, 255, .04);
}
.eekad-search__all svg { width: 15px; height: 15px; flex-shrink: 0; }

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

/* ---- Desktop: the sheet detaches, centres, and sizes to its content ---- */
@media (min-width: 769px) {
	.eekad-search {
		width: min(660px, calc(100vw - 48px));
		height: auto;
		max-height: calc(100vh - 96px);
		margin-inline: auto;
		margin-block: clamp(72px, 14vh, 148px) auto;
	}
	.eekad-search__panel {
		height: auto;
		max-height: calc(100vh - 160px);
		padding-top: 0;
	}
	.eekad-search__cancel { display: none; }
	.eekad-search__body { max-height: min(54vh, 540px); }
}

/* ---- Mobile: the trigger keeps its place beside the burger ---- */
@media (max-width: 768px) {
	/* Clears the 44px burger sitting at inset-inline-end:16px, with room to
	   spare so the two tap targets never share a pixel. */
	.eekad-site-header__actions {
		inset-inline-end: 66px;
		gap: 0;
	}
	.eekad-site-header__search svg { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.eekad-search__progress::after { animation: none; inline-size: 100%; opacity: .5; }
}

/* ---- Results page — the console's shape, laid out for a full window ---- */
.eekad-search-page {
	padding-block: calc(var(--eekad-header-h) + 48px) var(--section-pad);
}
.eekad-search-page__hero {
	max-width: 720px;
	margin-bottom: 28px;
}
.eekad-search-page__query { color: var(--c-lime); }
.eekad-search-page__title {
	margin: 0 0 20px;
	color: var(--c-text-muted);
	font-size: var(--fs-section);
	font-weight: 600;
	line-height: var(--lh-title);
	color: var(--c-text);
}
.eekad-search-page__form {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: var(--glass-bg);
	border: 1px solid var(--glass-edge);
	border-top-color: var(--glass-edge-top);
	transition: border-color .2s;
}
.eekad-search-page__form:focus-within { border-color: var(--c-lime); }
.eekad-search-page__form > svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--c-text-faint);
}
.eekad-search-page__input {
	flex: 1 1 auto;
	min-width: 0;
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--font-sans);
	font-size: 18px;
	color: var(--c-text);
	caret-color: var(--c-lime);
}
.eekad-search-page__input:focus { outline: none; }
.eekad-search-page__input::placeholder { color: var(--c-text-faint); }
.eekad-search-page__input::-webkit-search-cancel-button { display: none; }

.eekad-search-page__count {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--c-text-muted);
}

.eekad-search-page__scopes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}
.eekad-search-page__scope {
	padding: 8px 15px;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
}

/* The rows come from the same partial as the console, so they inherit the
   console's row rules. Only the horizontal inset differs: the console pads
   against a 680px sheet, the page sits in the site container. */
.eekad-search-page__results {
	max-width: 820px;
}
.eekad-search-page__results .eekad-search__row,
.eekad-search-page__results .eekad-search__group-head {
	padding-inline: 0;
}
.eekad-search-page__results .eekad-search__row {
	padding-block: 11px;
}
/* Wash, not a shift: changing the padding on hover reflowed the row and
   made a still list twitch under the pointer. */
.eekad-search-page__results .eekad-search__row:hover {
	background: rgba(255, 255, 255, .05);
	box-shadow: 0 0 0 12px rgba(255, 255, 255, .05);
}
.eekad-search-page__results .eekad-search__row-title {
	font-size: 19px;
	white-space: normal;
}
.eekad-search-page__results .eekad-search__row-sub {
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-size: 14px;
}
/* Three lines of text beside a 52px thumbnail reads better hung from the
   top than floated in the middle of the row. */
.eekad-search-page__results .eekad-search__row {
	align-items: flex-start;
}
.eekad-search-page__results .eekad-search__row-visual {
	margin-top: 2px;
}
.eekad-search-page__results .eekad-search__group + .eekad-search__group {
	margin-top: 34px;
}

.eekad-search-page__empty {
	max-width: 560px;
	padding-block: 24px 8px;
}
.eekad-search-page__empty-title {
	margin: 0 0 8px;
	font-size: 20px;
	color: var(--c-text-muted);
}
.eekad-search-page__empty-hint {
	margin: 0;
	font-size: 15px;
	color: var(--c-text-muted);
}

@media (max-width: 640px) {
	.eekad-search-page__form { flex-wrap: wrap; }
	.eekad-search-page__submit { width: 100%; }
	.eekad-search-page__results .eekad-search__row-title { font-size: 17px; }
}