/* Coloured page head (inc/page-head.php, assets/js/page-head.js). The colour of each section is its mega-menu colour
   (zone A); text follows the colour: white on terracotta, olive and navy, dark ink on powder blue, ochre and orange.
   Layers: .ed-cap (fixed, behind the floating bar, every page) · .ed-head (band: breadcrumb + title) · .ed-strip (sticky
   under the bar: small title once the big one has scrolled away, and the page's "on this page" links). */

:root { --cap-h: 76px; --ab-h: 0px; }
@media (min-width: 1024px) and (max-width: 1199px) { :root { --cap-h: 62px; } }
@media (max-width: 1023px) { :root { --cap-h: 66px; } }
@media (max-width: 640px) { :root { --cap-h: 54px; } }
.admin-bar { --ab-h: 32px; }
@media (max-width: 782px) { .admin-bar { --ab-h: 46px; } }

body.ed-head-on { --sec-bg: #2a2d50; --sec-fg: #fff; --sec-muted: #c3c6de; --sec-line: rgba(255, 255, 255, .18); --sec-accent: #e8c26a; }
body.sec-artists { --sec-bg: #b84329; --sec-fg: #fff; --sec-muted: #fff0ea; --sec-line: rgba(255, 255, 255, .28); --sec-accent: #ffe3a6; }
body.sec-research { --sec-bg: #a8c5dc; --sec-fg: #1c2433; --sec-muted: #34425c; --sec-line: rgba(28, 36, 51, .22); --sec-accent: #32365f; }
body.sec-podcast { --sec-bg: #d4ad52; --sec-fg: #1f1d16; --sec-muted: #4b4229; --sec-line: rgba(31, 29, 22, .22); --sec-accent: #32365f; }
body.sec-events { --sec-bg: #5f6f35; --sec-fg: #fff; --sec-muted: #eef2e2; --sec-line: rgba(255, 255, 255, .26); --sec-accent: #ece08f; }
body.sec-publications { --sec-bg: #ef6530; --sec-fg: #1f140e; --sec-muted: #3d2314; --sec-line: rgba(31, 20, 14, .24); --sec-accent: #32365f; }
/* about and pages outside the sections: the logo navy (the bar is grey) */
body.sec-about, body.sec-site { --sec-bg: #32365f; --sec-fg: #fff; --sec-muted: #c3c6de; --sec-line: rgba(255, 255, 255, .18); --sec-accent: #e8c26a; }

/* behind the floating bar, on every page */
.ed-cap { position: fixed; z-index: 98; inset-inline: 0; top: var(--ab-h); height: var(--cap-h); background: var(--sec-bg); pointer-events: none; }

/* the head band: starts at the top of the page, under the bar */
.ed-head-on .site-main:has(> .ed-head) { padding-block-start: 0; }
.ed-head {
	position: relative; color: var(--sec-fg); background: var(--sec-bg);
	box-shadow: 0 0 0 100vmax var(--sec-bg); clip-path: inset(0 -100vmax);
	padding-block: calc(var(--cap-h) + 30px) 26px;
}
.ed-head .breadcrumbs { padding: 0; margin: 0 0 12px; background: transparent; color: var(--sec-muted); font-size: 12.5px; letter-spacing: .08em; }
.ed-head .breadcrumbs a, .ed-head .breadcrumbs a:hover, .ed-head .breadcrumbs span { color: var(--sec-muted); }
.ed-head .breadcrumbs a:hover { color: var(--sec-fg); text-decoration: underline; }
.ed-head .breadcrumbs li + li::before { color: var(--sec-muted); }
.ed-head__title {
	margin: 0; color: var(--sec-fg); font-family: var(--font); font-weight: 500; text-transform: none;
	font-size: clamp(32px, 4.2vw, 58px); line-height: 1.05; letter-spacing: -.04em; max-width: 26ch; text-wrap: balance; overflow-wrap: break-word;
	text-transform: uppercase;
}
.lang-ar .ed-head__title { text-transform: none; font-family: var(--font-ar); font-weight: 600; letter-spacing: 0; line-height: 1.35; font-size: clamp(30px, 3.8vw, 52px); }
/* the theme's own breadcrumb row that follows: shown in the band already */
.ed-head-on .ed-strip + .breadcrumbs { display: none; }

/* the sticky strip (user brief 2026-10-04)
   At rest: the "on this page" links form the bottom row of the band.
   Scrolled: a title line appears just under the navy bar (bigger, starting at the logo emblem like the mega menu), and
   the links sit on the line below, close together, within the mega menu's width (emblem to EN/AR). The title line hangs
   above the strip (absolute), so nothing in the page moves when it appears; --ph-s / --ph-e come from page-head.js. */
:root { --strip-t: 58px; }
@media (max-width: 1023px) { :root { --strip-t: 42px; } } /* with links: they follow on the next line (user 2026-10-04) */
/* no links below: the title line is the bottom of the coloured head, so it keeps more colour under it */
.ed-strip:not(.has-nav) { --strip-t: 80px; }
@media (max-width: 1023px) { .ed-strip:not(.has-nav) { --strip-t: 62px; } }
.ed-strip {
	position: sticky; z-index: 50; top: calc(var(--cap-h) + var(--ab-h) + var(--strip-t)); color: var(--sec-fg);
	margin-top: 0 !important; margin-bottom: 28px;
}
.ed-strip__in, .ed-strip__title-row { background: var(--sec-bg); box-shadow: 0 0 0 100vmax var(--sec-bg); clip-path: inset(0 -100vmax); }
.ed-strip__in { display: flex; align-items: center; min-height: 52px; border-top: 1px solid var(--sec-line); }
.ed-strip__title-row {
	position: absolute; inset-inline: 0; bottom: 100%; height: var(--strip-t); display: flex; align-items: flex-start; padding-top: 14px;
	visibility: hidden; /* shown at once when stuck: a fading background let the page show through behind the bar */
}
.ed-strip.is-stuck .ed-strip__title-row { visibility: visible; }
.ed-strip__title-row .ed-strip__title { opacity: 0; transition: opacity .2s ease; }
.ed-strip.is-stuck .ed-strip__title-row .ed-strip__title { opacity: 1; }
.ed-strip__title {
	margin: 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--sec-fg);
	font-size: clamp(26px, 2.7vw, 38px); font-weight: 500; line-height: 1.1; letter-spacing: -.035em; text-transform: uppercase;
}
.lang-ar .ed-strip__title { text-transform: none; letter-spacing: 0; font-weight: 600; line-height: 1.25; font-size: clamp(24px, 2.5vw, 34px); }
@media (max-width: 1023px) { .ed-strip__title-row { padding-top: 10px; } .ed-strip__title { font-size: 24px; } .lang-ar .ed-strip__title { font-size: 23px; } }
.ed-strip.is-stuck .ed-strip__in { border-top-color: transparent; }
.ed-strip__nav { flex: 1 1 auto; min-width: 0; }
@media (min-width: 1024px) {
	.ed-strip__title-row { padding-inline: var(--ph-s, 0) var(--ph-e, 0); }
	.ed-strip.is-stuck .ed-strip__in { padding-inline: var(--ph-s, 0) var(--ph-e, 0); }
	.ed-strip.is-stuck .ev-nav, .ed-strip.is-stuck .ab-nav { justify-content: flex-start; gap: 0 32px; }
}
/* the page's "on this page" links, moved here from the content */
.ed-strip .ev-nav, .ed-strip .ab-nav {
	position: static; top: auto; z-index: auto; display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 0 24px;
	margin: 0; padding: 0; border: 0; background: transparent; overflow-x: auto; scrollbar-width: none;
}
.ed-strip .ev-nav::-webkit-scrollbar { display: none; }
.ed-strip .ev-nav a { position: relative; flex: 0 0 auto; padding: 15px 0; color: var(--sec-fg); font-size: 14px; text-decoration: none; white-space: nowrap; }
.ed-strip .ev-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.ed-strip .ev-nav a[aria-current="true"] { font-weight: 600; }
.ed-strip .ev-nav a[aria-current="true"]::after { content: ""; position: absolute; inset-inline: 0; bottom: 8px; height: 2px; background: var(--sec-accent); }
.lang-ar .ed-strip .ev-nav a { font-size: 15.5px; }

/* pages without "on this page" links: no row of links, only the title line once scrolled */
.ed-strip:not(.has-nav) { height: 0; margin-bottom: 0; }
.ed-strip:not(.has-nav) .ed-strip__in { display: none; }
.ed-head-on .site-main:has(> .ed-strip:not(.has-nav)) > .ed-strip + * { margin-top: 28px; }

/* anchors land below the cap and strip */
html:has(body.ed-head-on) { scroll-padding-top: calc(var(--cap-h) + var(--ab-h) + var(--strip-t) + 64px); }
.ed-head-on .ab-page .ev-section, .ed-head-on .ev-section, .ed-head-on .ab-person, .ed-head-on .rs-card, .ed-head-on .pb-card, .ed-head-on .el-row, .ed-head-on .am-era, .ed-head-on .am-card {
	scroll-margin-top: 0; /* the page's scroll-padding already clears the head; both together landed headings ~200px too low */
}

@media (max-width: 640px) {
	.ed-head { padding-block: calc(var(--cap-h) + 22px) 18px; }
	.ed-head__title { font-size: 30px; }
	.lang-ar .ed-head__title { font-size: 28px; }
	.ed-strip__in { min-height: 46px; }
	.ed-strip .ev-nav { justify-content: flex-start; gap: 0 20px; }
	.ed-strip .ev-nav a { padding: 13px 0; }
}
@media (prefers-reduced-motion: reduce) { .ed-strip__title, .ed-strip__in { transition: none !important; } }

/* the section pages' own intro repeated the page title just below the head: page-head.js hides that copy */
.ed-head-on .ed-dup-title { display: none; }

/* the one small link back to the section (single posts), in place of a breadcrumb */
.ed-head__up { margin: 0 0 12px; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.lang-ar .ed-head__up { letter-spacing: 0; text-transform: none; font-size: 14px; }
.ed-head__up a { color: var(--sec-muted); text-decoration: none; }
.ed-head__up a:hover, .ed-head__up a:focus-visible { color: var(--sec-fg); text-decoration: underline; text-underline-offset: 4px; }

/* the slogan under the title (home page) */
.ed-head__sub { margin: 12px 0 0; color: var(--sec-muted); font-size: clamp(22px, 2.7vw, 38px); font-weight: 500; line-height: 1.15; letter-spacing: -.03em; text-transform: uppercase; }
.lang-ar .ed-head__sub { text-transform: none; letter-spacing: 0; line-height: 1.4; font-size: clamp(22px, 2.6vw, 36px); }
/* home page: the dark grey of the logo's emblem (as shown in greyscale), user request 2026-10-04 */
body.home.ed-head-on { --sec-bg: #32365f; --sec-fg: #fff; --sec-muted: #c9cce3; --sec-line: rgba(255, 255, 255, .2); --sec-accent: #e8c26a; } /* navy (user, 2026-10-04) */

/* scrolled, with links: the links sit right under the title, like a second line */
.ed-strip.has-nav.is-stuck .ed-strip__in { min-height: 0; }
.ed-strip.has-nav.is-stuck .ev-nav a { padding: 4px 0 14px; }
.ed-strip.has-nav.is-stuck .ev-nav a[aria-current="true"]::after { bottom: 8px; }

/* ================================================================ the bar (user brief 2026-10-04)
   Grey like the logo's emblem, so emblem and bar read as one piece. No underline and no colour for the active item
   (the page title says where you are); hover is quiet: a lighter grey (user decisions 2026-10-04). */
.ed-head-on.mega-style-mix .site-header { --navy: #393939; --navy-deep: #2e2e2e; --orange: transparent; }
@media (min-width: 1024px) {
	.ed-head-on .site-nav .menu > li > a, .ed-head-on .site-nav .menu > li > .submenu-toggle {
		border-top-color: transparent !important; border-bottom-color: transparent !important; transition: background-color .15s ease, color .15s ease;
	}
	/* hover / open mega menu: quiet, a slightly lighter grey behind the item (user 2026-10-04: no colour on hover) */
	.ed-head-on .site-nav .menu > li > a:hover, .ed-head-on .site-nav .menu > li > .submenu-toggle:hover,
	.ed-head-on .site-nav .menu > li.has-mega.is-open > a, .ed-head-on .site-nav .menu > li.has-mega.is-open > .submenu-toggle { background-color: #474747; }
}
/* the header row's top and bottom edge lines (added 2026-10-04) were removed at the user's request on 2026-11-05 */

/* podcast episodes: the title is in the head now, so the player card keeps only the episode details */
.ed-head-on .podcast-episode .episode-hero__title { display: none; }
.ed-head-on .podcast-episode .episode-hero { border-top: 0; padding-top: 0; } /* the coloured head already opens the page */

/* the glossary: its title is in the head now; a name in the other script underneath keeps that script's type */
.ed-head-on .glossary-hero__title, .ed-head-on .glossary-term__title { display: none; }
.ed-head__sub [lang="ar"] { font-family: var(--font-ar); text-transform: none; letter-spacing: 0; line-height: 1.4; }
.lang-ar .ed-head__sub [lang="en"] { font-family: var(--font); text-transform: none; letter-spacing: -.01em; }
.ed-head-on .glossary-home .glossary-hero { border-top: 0; }

/* the timeline: the head keeps the page width (the timeline itself is full width) and sits right on the timeline; its
   role filter becomes the strip's row of links */
.site-main--timeline > .ed-head, .site-main--timeline > .ed-strip { width: min(var(--wide), 100% - 2 * var(--edge)); margin-inline: auto; }
.site-main--timeline > .ed-strip { margin-bottom: 0; }
.ed-strip .timeline-filter { flex: auto; background: transparent; border: 0; }
.ed-strip .timeline-filter ul { padding: 0; gap: 0 22px; }
.ed-strip .timeline-filter a {
	position: relative; min-height: 0; padding: 15px 0; border: 0; border-radius: 0; background: transparent;
	color: var(--sec-fg); font-size: 14px; font-weight: 500; gap: 6px;
}
.ed-strip .timeline-filter a:hover { border: 0; color: var(--sec-fg); text-decoration: underline; text-underline-offset: 5px; }
.ed-strip .timeline-filter a[aria-current="true"] { background: transparent; color: var(--sec-fg); font-weight: 600; }
.ed-strip .timeline-filter a[aria-current="true"]::after { content: ""; position: absolute; inset-inline: 0; bottom: 8px; height: 2px; background: var(--sec-accent); }
.ed-strip .timeline-filter a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.ed-strip.has-nav.is-stuck .timeline-filter a { padding: 4px 0 14px; }
.lang-ar .ed-strip .timeline-filter a { font-size: 15.5px; }
@media (min-width: 1024px) { .ed-strip.is-stuck .timeline-filter ul { gap: 0 28px; } }

/* the Biennale reader: its chapter title is in the head now */
.ed-head-on .bn-reader__header h1 { display: none; }
/* search results: one search bar only, the one in the header (kept open with the words searched); the form in the
   page is hidden, not removed (user 2026-10-05) */
.ed-head-on.search .site-main .search-form { display: none; }
.ed-head-on.search .site-main .panel--search { padding-top: 0; }
/* phones and tablets: the open search bar drops below the header, so the results title moves down to stay visible */
@media (max-width: 1023px) {
	.ed-head-on.search:has(.navbar.is-searching) .ed-head { padding-top: calc(var(--cap-h) + 22px + 76px); }
}
/* the Radio tab's label block in the bar's grey (user 2026-10-05); its hover stays the logo orange (megamenu.css) */
body.ed-head-on .radio-tab { --tab-block: #393939; }

/* ================================================================ tools in the head (preview ?amar_htools=1)
   User brief 2026-10-05: a short description under every title, always visible (smaller once scrolled); the page's
   tools (search, filters, view switches) inside the coloured head: in full on load, compact and close together once
   scrolled, where a "Filters" button folds away the secondary part ([data-head-more]); open by default.
   The kit below (.ed-tools, .ed-field, .ed-select, .ed-ibtn, .ed-count, .ed-chips, .ed-chip) is shared by every page
   that puts tools in the head. */
body.ed-htools { --sec-tool: rgba(255, 255, 255, .14); --sec-tool-line: rgba(255, 255, 255, .38); --tool-ink: #1f1d16; }
body.ed-htools.sec-research, body.ed-htools.sec-podcast, body.ed-htools.sec-publications { --sec-tool: rgba(255, 255, 255, .4); --sec-tool-line: rgba(31, 29, 22, .3); }
.ed-htools .ed-strip { pointer-events: none; } /* the space kept under a stuck strip stays clickable */
.ed-htools .ed-strip > * { pointer-events: auto; }

/* the description */
/* one line wherever it fits (user 2026-10-12: "make all subtitles one line"); it wraps only when the head is too narrow */
.ed-head__desc { margin: 14px 0 0; max-width: none; color: var(--sec-fg); font-size: clamp(15.5px, 1.3vw, 18.5px); line-height: 1.45; font-weight: 400; text-wrap: pretty; }
.lang-ar .ed-head__desc { font-family: var(--font-ar); font-size: clamp(16.5px, 1.4vw, 19.5px); line-height: 1.7; }
.ed-htools .ed-strip.has-desc { --strip-t: 82px; }
.ed-htools .ed-strip.has-desc:not(.has-nav):not(.has-tools) { --strip-t: 104px; }
@media (max-width: 1023px) {
	.ed-htools .ed-strip.has-desc { --strip-t: 62px; }
	.ed-htools .ed-strip.has-desc:not(.has-nav):not(.has-tools) { --strip-t: 80px; }
}
.ed-strip__titles { display: grid; gap: 5px; min-width: 0; flex: 1 1 auto; }
.ed-strip__desc {
	margin: 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--sec-fg);
	font-size: 13.5px; line-height: 1.35; opacity: 0; transition: opacity .2s ease;
}
.lang-ar .ed-strip__desc { font-family: var(--font-ar); font-size: 14.5px; line-height: 1.5; }
.ed-strip.is-stuck .ed-strip__desc { opacity: .92; }
@media (max-width: 1023px) { .ed-strip__titles { gap: 2px; } .ed-strip__desc { font-size: 12.5px; } .lang-ar .ed-strip__desc { font-size: 13.5px; } }

/* links row: [aria-current="page"] counts like the one-pagers' [aria-current="true"] */
.ed-htools .ed-strip .ev-nav a[aria-current="page"] { font-weight: 600; }
.ed-htools .ed-strip .ev-nav a[aria-current="page"]::after { content: ""; position: absolute; inset-inline: 0; bottom: 8px; height: 2px; background: var(--sec-accent); }
.ed-htools .ed-strip.has-nav.is-stuck .ev-nav a[aria-current="page"]::after { bottom: 8px; }

/* the tools row */
.ed-strip__tools { display: none; }
.ed-strip.has-tools { height: auto; margin-bottom: 28px; }
.ed-strip.has-tools .ed-strip__tools {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 12px; padding-block: 14px 18px;
	background: var(--sec-bg); box-shadow: 0 0 0 100vmax var(--sec-bg); clip-path: inset(0 -100vmax); border-top: 1px solid var(--sec-line);
}
.ed-strip.has-tools:not(.has-nav) .ed-strip__tools { border-top: 0; padding-top: 4px; }
.ed-strip.has-tools.is-stuck .ed-strip__tools { padding-block: 8px 12px; }
.ed-strip.has-tools.is-stuck:not(.has-nav) .ed-strip__tools { padding-top: 2px; }
@media (min-width: 1024px) { .ed-strip.is-stuck .ed-strip__tools { padding-inline: var(--ph-s, 0) var(--ph-e, 0); } }
.ed-strip__tools-in { min-width: 0; }
.ed-strip.is-stuck.tools-closed [data-head-more] { display: none !important; }

/* the Filters button: only once scrolled, and only when the page has something to fold away */
.ed-tools-toggle {
	display: none; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--sec-tool-line);
	background: var(--sec-tool); color: var(--sec-fg); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.lang-ar .ed-tools-toggle { font-size: 14px; }
.ed-strip.is-stuck.has-more .ed-tools-toggle { display: inline-flex; }
.ed-tools-toggle[aria-expanded="true"] { background: var(--sec-fg); border-color: var(--sec-fg); color: var(--sec-bg); }
.ed-tools-toggle:hover { border-color: var(--sec-fg); }
.ed-tools-toggle:focus-visible { outline: 2px solid var(--sec-fg); outline-offset: 2px; }
.ed-tools-toggle__i { width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.ed-tools-toggle[aria-expanded="true"] .ed-tools-toggle__i { transform: translateY(2px) rotate(225deg); }

/* the kit */
.ed-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; min-width: 0; }
.ed-tools__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.ed-tools__row--main { flex: 1 1 380px; }
.ed-tools__row--full { flex: 1 1 100%; }
.ed-field { flex: 1 1 260px; min-width: 0; max-width: 560px; margin: 0; }
.ed-field input {
	width: 100%; height: 42px; margin: 0; border: 0; border-radius: 999px; background: #fff; color: var(--tool-ink); padding: 0 18px;
	font: inherit; font-size: 15px; box-shadow: inset 0 0 0 1px var(--sec-tool-line);
}
.ed-field input::placeholder { color: #66625a; }
.ed-field input:focus-visible { outline: 2px solid var(--sec-fg); outline-offset: 2px; }
.ed-select { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--sec-fg); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.lang-ar .ed-select { font-size: 13.5px; letter-spacing: 0; text-transform: none; }
.ed-select select {
	height: 42px; margin: 0; border: 0; border-radius: 999px; background-color: #fff; color: var(--tool-ink); padding-block: 0; padding-inline: 16px 10px;
	font: inherit; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; box-shadow: inset 0 0 0 1px var(--sec-tool-line); cursor: pointer;
}
.ed-select select:focus-visible { outline: 2px solid var(--sec-fg); outline-offset: 2px; }
.ed-ibtn {
	display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid var(--sec-tool-line);
	background: var(--sec-tool); color: var(--sec-fg); cursor: pointer;
}
.ed-ibtn svg { width: 20px; height: 20px; fill: currentColor; }
.ed-ibtn:hover { border-color: var(--sec-fg); }
.ed-count { color: var(--sec-fg); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; opacity: .9; }
.ed-chips { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-block: 1px; }
.ed-chips::-webkit-scrollbar { display: none; }
.ed-chip {
	--c: var(--tool-ink); flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 34px; margin: 0; padding: 0 14px;
	border-radius: 999px; border: 1px solid var(--sec-tool-line); background: var(--sec-tool); color: var(--sec-fg);
	font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
}
.lang-ar .ed-chip { font-size: 14.5px; }
.ed-chip small { font-size: 12px; font-weight: 500; opacity: .72; font-variant-numeric: tabular-nums; }
/* olive head: a lighter chip fill and full-strength counts keep white text at 4.5:1 (audit 2026-10-16) */
body.sec-events .ed-chip { background: rgba(255, 255, 255, .07); }
body.sec-events .ed-chip small { opacity: 1; }
.ed-chip:hover { border-color: var(--sec-fg); }
.ed-chip[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: #fff; }
.ed-chip[aria-pressed="true"] small { opacity: .82; }
.ed-chip:focus-visible { outline: 2px solid var(--sec-fg); outline-offset: 2px; }

/* compact once scrolled: smaller, closer, select labels dropped (each select keeps its aria-label) */
.ed-strip.is-stuck .ed-tools { gap: 8px 10px; }
.ed-strip.is-stuck .ed-field input, .ed-strip.is-stuck .ed-select select { height: 36px; font-size: 14px; }
.ed-strip.is-stuck .ed-ibtn { width: 36px; height: 36px; }
.ed-strip.is-stuck .ed-select > span { display: none; }
.ed-strip.is-stuck .ed-chip { height: 30px; padding: 0 12px; font-size: 13px; }
@media (max-width: 640px) {
	.ed-tools__row--main { flex-basis: 100%; }
	.ed-select > span { display: none; }
	.ed-field input, .ed-select select { height: 40px; }
	.ed-strip.has-tools .ed-strip__tools { padding-block: 10px 14px; }
}
/* chips: all of them on load; one line that scrolls sideways once stuck, fading at the end */
.ed-strip.is-stuck .ed-chips { flex-wrap: nowrap; -webkit-mask-image: linear-gradient(to var(--fade-to, right), #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to var(--fade-to, right), #000 calc(100% - 40px), transparent); padding-inline-end: 32px; }
[dir="rtl"] .ed-strip.is-stuck .ed-chips { --fade-to: left; }
@media (max-width: 640px) { .ed-chips { flex-wrap: nowrap; } }
@media (max-width: 640px) {
	.ed-tools__row:not(.ed-tools__row--main):not(.ed-chips) { flex-wrap: nowrap; width: 100%; }
	.ed-select { flex: 1 1 0; min-width: 0; }
	.ed-select select { width: 100%; min-width: 0; }
	.ed-strip.is-stuck .ed-count { display: none; }
}

/* ================================================================ the links as a column under the logo's words
   (user brief 2026-10-05, tools preview, desktop): the page's links stand one above the other in the empty space under
   "Foundation for Arab Music Archiving & Research", aligned towards the emblem like those words; the title, description
   and tools move over to start where the emblem starts (--ph-s). page-head.js sets .has-rail, --rail-top (rest: the top
   of the head's first line) and --rail-h. */
.ed-htools .ed-head:has(+ .ed-strip.has-rail) .ed-head__in { padding-inline: var(--ph-s, 0) var(--ph-e, 0); }
.ed-strip.has-rail .ed-strip__in {
	/* exactly the block of the logo's words (--rail-s, --rail-w from page-head.js) */
	position: absolute; z-index: 2; inset-inline-start: var(--rail-s, 0px); top: var(--rail-top, 0px); width: var(--rail-w, 100px);
	display: block; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; clip-path: none;
}
.ed-strip.has-rail.is-stuck .ed-strip__in { top: calc(14px - var(--strip-t)); padding: 0; }
.ed-strip.has-rail .ed-strip__tools {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 12px; border-top: 0;
	padding-inline: var(--ph-s, 0) var(--ph-e, 0); background: var(--sec-bg); box-shadow: 0 0 0 100vmax var(--sec-bg); clip-path: inset(0 -100vmax);
	/* never less than once stuck, so the page does not move when the head sticks */
	min-height: max(0px, calc(var(--rail-h, 0px) + var(--rail-top, 0px) + 22px), calc(var(--rail-h, 0px) - var(--strip-t) + 28px));
}
.ed-strip.has-rail:not(.has-tools) .ed-strip__tools { padding-block: 0; }
.ed-strip.has-rail.is-stuck .ed-strip__tools { min-height: max(0px, calc(var(--rail-h, 0px) - var(--strip-t) + 28px)); }
.ed-strip.has-rail:not(.has-tools) .ed-strip__tools-in, .ed-strip.has-rail:not(.has-tools) .ed-tools-toggle { display: none; }
.ed-strip.has-rail { --strip-t: 82px; }
.ed-strip.has-rail:not(.has-desc) { --strip-t: 66px; }
.ed-strip.has-rail .ev-nav, .ed-strip.has-rail .ab-nav {
	flex-direction: column; flex-wrap: nowrap; align-items: flex-end; justify-content: flex-start; gap: 7px; overflow: visible;
}
/* stronger (user 2026-10-05): the weight and capitals of the logo's words, full colour; the current one underlined */
.ed-strip.has-rail .ev-nav a, .ed-strip.has-rail.is-stuck .ev-nav a, .ed-strip.has-rail .ab-nav a {
	flex: 0 0 auto; max-width: 100%; min-height: 0; padding: 1px 0 3px; white-space: nowrap; text-align: end; opacity: 1;
	font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; color: var(--sec-fg);
}
.lang-ar .ed-strip.has-rail .ev-nav a, .lang-ar .ed-strip.has-rail .ab-nav a { font-family: var(--font-ar); font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1.4; }
.ed-strip.has-rail .ev-nav a::after, .ed-strip.has-rail .ev-nav a[aria-current]::after, .ed-strip.has-rail .ab-nav a::after { display: none; }
.ed-strip.has-rail .ev-nav a:hover, .ed-strip.has-rail .ab-nav a:hover { text-decoration: underline 2px; text-underline-offset: 5px; }
.ed-strip.has-rail .ev-nav a[aria-current="true"], .ed-strip.has-rail .ev-nav a[aria-current="page"], .ed-strip.has-rail .ab-nav a[aria-current="true"] {
	text-decoration: underline 3px var(--sec-accent); text-underline-offset: 6px;
}
/* titles, descriptions and tools start at the emblem on every page (tools preview, desktop) */
@media (min-width: 1024px) {
	.ed-htools .ed-head__in { padding-inline: var(--ph-s, 0) var(--ph-e, 0); }
	.ed-htools .ed-strip.has-tools .ed-strip__tools, .ed-htools .ed-strip.has-nav:not(.has-rail) .ed-strip__in { padding-inline: var(--ph-s, 0) var(--ph-e, 0); }
}
/* a link that leaves for another page stands apart at the bottom, with ↗ (the Listening room's Radio) */
.ed-strip .ev-nav a.is-away { order: 10; }
.ed-strip.has-rail .ev-nav a.is-away { margin-top: 12px; }
.ed-away { font-weight: 400; }

/* 1024–1279: the column is narrow; slightly smaller type, and a name may take two lines */
@media (max-width: 1279px) {
	.ed-strip.has-rail .ev-nav a, .ed-strip.has-rail.is-stuck .ev-nav a, .ed-strip.has-rail .ab-nav a { font-size: 12px; letter-spacing: .03em; white-space: normal; text-wrap: balance; }
	.lang-ar .ed-strip.has-rail .ev-nav a, .lang-ar .ed-strip.has-rail .ab-nav a { font-size: 14px; }
	.ed-strip.has-rail .ev-nav, .ed-strip.has-rail .ab-nav { gap: 6px; }
}

/* once stuck the column tightens, so pages with many links keep a short head (--rail-hs = its stuck height) */
.ed-strip.has-rail.is-stuck .ev-nav, .ed-strip.has-rail.is-stuck .ab-nav { gap: 3px; }
.ed-strip.has-rail.is-stuck .ev-nav a, .ed-strip.has-rail.is-stuck .ab-nav a { font-size: 12px; padding: 0 0 2px; letter-spacing: .04em; }
.lang-ar .ed-strip.has-rail.is-stuck .ev-nav a, .lang-ar .ed-strip.has-rail.is-stuck .ab-nav a { font-size: 13.5px; line-height: 1.3; }
.ed-strip.has-rail.is-stuck .ed-strip__tools { min-height: max(0px, calc(var(--rail-hs, var(--rail-h, 0px)) - var(--strip-t) + 28px)); }
.ed-strip.has-rail .ed-strip__tools { min-height: max(0px, calc(var(--rail-h, 0px) + var(--rail-top, 0px) + 22px), calc(var(--rail-hs, var(--rail-h, 0px)) - var(--strip-t) + 28px)); }
/* no light seam where the head band meets the tools row (sub-pixel gap): the row's colour reaches 2px up under the band */
.ed-htools .ed-strip.has-rail .ed-strip__tools, .ed-htools .ed-strip.has-tools .ed-strip__tools { clip-path: inset(-2px -100vmax 0 -100vmax); box-shadow: 0 0 0 100vmax var(--sec-bg), 0 -2px 0 0 var(--sec-bg); }

/* ================================================================ docked tools (tools preview, page-head.js DOCK)
   A page's own tools join the head once they scroll up under it: they hang under the strip in .ed-strip__dock (absolute,
   so the page never moves), compact, in the section colour; the part marked [data-head-more] folds behind Filters. */
.ed-strip__dock { display: none; }
.ed-strip.has-docked .ed-strip__dock {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 12px; position: absolute; inset-inline: 0;
	top: calc(100% - var(--strip-pad, 0px)); padding-block: 6px 12px; color: var(--sec-fg); pointer-events: auto;
	background: var(--sec-bg); box-shadow: 0 0 0 100vmax var(--sec-bg), 0 -2px 0 0 var(--sec-bg); clip-path: inset(-2px -100vmax 0 -100vmax);
}
@media (min-width: 1024px) { .ed-strip.has-docked .ed-strip__dock { padding-inline: var(--ph-s, 0) var(--ph-e, 0); } }
/* With the links column and no tools of its own, the head keeps an empty row so it reaches below the links: docked
   tools take that row, right under the title and description (user 2026-10-11); the links column (absolute, z-index 2)
   stays above them. */
.ed-strip.has-rail.has-docked:not(.has-tools) .ed-strip__dock { top: 0; z-index: 1; } /* above the empty row, which would take the clicks */
/* buttons and filters sit at the BOTTOM of the head, next to the results (user rule 2026-10-12, every page but home) */
body:not(.home) .ed-strip.has-rail .ed-strip__tools { align-items: end; align-content: end; }
/* …and they stand at the bottom of that row, next to the results, whatever the height of the links column (user rule
   2026-10-12: buttons and filters in a head are always bottom-aligned). */
body:not(.home) .ed-strip.has-rail.has-docked:not(.has-tools) .ed-strip__dock { min-height: calc(100% - var(--strip-pad, 0px)); align-items: end; align-content: end; }
body.ed-htools .ed-strip__dock-in button.is-empty { opacity: .45; }
.ed-strip__dock-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.ed-strip__dock .ed-tools-toggle { display: none; }
.ed-strip.is-stuck.dock-more .ed-strip__dock .ed-tools-toggle { display: inline-flex; }
.ed-dock-ph { pointer-events: none; }

/* the shared compact look of docked tools */
body.ed-htools .ed-strip__dock-in > * {
	position: relative !important; top: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
	background: transparent !important; box-shadow: none !important; max-width: none; min-height: 0; width: auto;
}
body.ed-htools .ed-strip__dock-in :is(input[type="search"], input[type="text"], input[type="number"]) {
	height: 36px; min-height: 0; margin: 0; border: 0; border-radius: 999px; background: #fff; color: var(--tool-ink); padding: 0 16px;
	font: inherit; font-size: 14px; box-shadow: inset 0 0 0 1px var(--sec-tool-line); min-width: 0; width: 100%;
}
body.ed-htools .ed-strip__dock-in select {
	height: 36px; min-height: 0; margin: 0; border: 0; border-radius: 999px; background-color: #fff; color: var(--tool-ink); padding-block: 0; padding-inline: 14px 8px;
	font: inherit; font-size: 14px; box-shadow: inset 0 0 0 1px var(--sec-tool-line); max-width: 100%; width: auto;
}
body.ed-htools .ed-strip__dock-in button:not(.ed-tools-toggle) {
	display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 32px; min-height: 0; margin: 0; padding: 0 12px;
	border: 1px solid var(--sec-tool-line); border-radius: 999px; background: var(--sec-tool); color: var(--sec-fg); box-shadow: none;
	font: inherit; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer;
}
body.ed-htools .ed-strip__dock-in button:not(.ed-tools-toggle) :is(span, small, b) { color: inherit; }
body.ed-htools .ed-strip__dock-in button:not(.ed-tools-toggle):hover { border-color: var(--sec-fg); }
body.ed-htools .ed-strip__dock-in button:not(.ed-tools-toggle):is([aria-pressed="true"], [aria-selected="true"]) { background: var(--sec-fg); border-color: var(--sec-fg); color: var(--sec-bg); }
body.ed-htools .ed-strip__dock-in :is(input, select, button):focus-visible { outline: 2px solid var(--sec-fg); outline-offset: 2px; }
body.ed-htools .ed-strip__dock-in a { color: var(--sec-fg); }
body.ed-htools .ed-strip__dock-in :is([role="group"], [role="tablist"], .chip-row) { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
body.ed-htools .ed-strip__dock-in :is([role="group"], [role="tablist"], .chip-row)::-webkit-scrollbar { display: none; }
/* a label in front of a field is said by the field itself once docked */
body.ed-htools .ed-strip__dock-in :is(.rc-field:not(.rc-field--reel) > label, .bn-type-filter > span) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* page by page */
body.ed-htools .ed-strip__dock-in .fb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
body.ed-htools .ed-strip__dock-in .fb-search { flex: 1 1 260px; max-width: 460px; }
body.ed-htools .ed-strip__dock-in .fb-chips { flex: 0 1 auto; }
body.ed-htools .ed-strip__dock-in .fb-years { display: flex; flex: 1 1 100%; gap: 4px 16px; overflow-x: auto; scrollbar-width: none; font-size: 13px; order: 3; }
body.ed-htools .ed-strip__dock-in .fb-years a { flex: 0 0 auto; color: var(--sec-fg); text-decoration: none; white-space: nowrap; }
body.ed-htools .ed-strip__dock-in .fb-years a.is-on { font-weight: 700; text-decoration: underline 2px var(--sec-accent); text-underline-offset: 5px; }
body.ed-htools .ed-strip__dock-in .fb-count { margin: 0; font-size: 13px; color: var(--sec-fg); }
body.ed-htools .ed-strip__dock-in .rc-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
body.ed-htools .ed-strip__dock-in .rc-field { margin: 0; }
body.ed-htools .ed-strip__dock-in .rc-field--search { flex: 1 1 260px; max-width: 420px; }
body.ed-htools .ed-strip__dock-in .rc-field--reel input { width: 90px; }
body.ed-htools .ed-strip__dock-in .rc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; padding: 0; border: 0; }
body.ed-htools .ed-strip__dock-in .rc-actions button.rc-link { border: 0; background: none; padding: 0 4px; text-decoration: underline; font-weight: 500; }
body.ed-htools .ed-strip__dock-in .glossary-modes { display: flex; gap: 6px; border: 0 !important; }
body.ed-htools .ed-strip__dock-in :is(.glossary-explorer__tools, .record-tools) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
body.ed-htools .ed-strip__dock-in :is(.glossary-search, .record-tools input[type="search"]) { flex: 1 1 260px; max-width: 420px; }
body.ed-htools .ed-strip__dock-in .glossary-suggest { z-index: 60; }
body.ed-htools .ed-strip__dock-in .podcast-browser__tools { display: flex; align-items: center; gap: 10px; }
body.ed-htools .ed-strip__dock-in .podcast-browser__search { width: min(420px, 60vw); }
body.ed-htools .ed-strip__dock-in .pm-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
body.ed-htools .ed-strip__dock-in .pm-filters > div { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; font-size: 12.5px; }
body.ed-htools .ed-strip__dock-in .bn-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
body.ed-htools .ed-strip__dock-in .amh-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
body.ed-htools .ed-strip__dock-in .amh-tools > * { min-width: 0; max-width: 100%; } /* the chip row scrolls sideways, never widens the page */
body.ed-htools .ed-strip__dock-in .amh-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
body.ed-htools .ed-strip__dock-in .amh-row label { display: flex; flex: 0 1 auto; min-width: 0; }
body.ed-htools .ed-strip__dock-in .amh-row label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.ed-htools .ed-strip__dock-in .amh-row select { max-width: 200px; }
body.ed-htools .ed-strip__dock-in .amh-q { flex: 1 1 200px; max-width: 360px; }
/* Artists & Music (chapters): the piece buttons; the A–Z search and letters share one row */
body.ed-htools .ed-strip__dock-in .amc-piece__pick button { padding: 6px 12px; font-size: 13px; white-space: nowrap; }
body.ed-htools .ed-strip__dock-in:has(> .amc-az__q) { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 16px; }
body.ed-htools .ed-strip__dock-in .amc-az__q input { width: 220px; }
body.ed-htools .ed-strip__dock-in .amc-az__letters { display: flex; flex-wrap: nowrap; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; margin: 0; }
body.ed-htools .ed-strip__dock-in .amc-az__letters::-webkit-scrollbar { display: none; }
body.ed-htools .ed-strip__dock-in .amc-az__letters a { flex: 0 0 auto; min-width: 28px; padding: 4px 6px; text-align: center; font-weight: 700; text-decoration: none; }
body.ed-htools .ed-strip__dock-in .amc-az__letters a:hover { background: var(--sec-fg); color: var(--sec-bg); }
body.ed-htools .ed-strip__dock-in .amh-count { display: none; }

/* the page's own sticky boxes sit under the head, wherever it ends (--head-b, page-head.js) */
.ed-htools .episode-aside { top: calc(var(--head-b, 156px) + 16px); }
.ed-htools .bn-reader__tools { top: calc(var(--head-b, 156px) + 16px); max-height: calc(100vh - var(--head-b, 156px) - 32px); }
.ed-htools .ev-page--companies .cx-facets { top: calc(var(--head-b, 156px) + 16px); max-height: calc(100vh - var(--head-b, 156px) - 32px); }
.ed-htools .aos-rec__media { top: calc(var(--head-b, 156px) + 16px); }
.ed-htools .fb-tools { position: static; } /* docks into the head instead */

/* chip rows inside docked tools scroll sideways instead of widening the page */
body.ed-htools .ed-strip__dock-in :is(.fb-tools, .glossary-explorer__tools, .record-tools, .bn-controls, .pm-filters) > :is([role="group"], .chip-row) { flex: 1 1 100%; min-width: 0; max-width: 100%; }
body.ed-htools .ed-strip__dock-in > :is([role="group"], .chip-row) { max-width: 100%; }
body.ed-htools .ed-strip__dock-in .bn-type-filter { font-size: 0; }
body.ed-htools .ed-strip__dock-in .bn-type-filter select { font-size: 14px; }
body.ed-htools .ed-strip__dock-in .rc-field:not(.rc-field--search):not(.rc-field--reel) select { width: 190px; }
/* docked blocks never wider than their column (the Biennale's day chips ran under the Filters button on phones) */
body.ed-htools .ed-strip__dock-in > * { min-width: 0; max-width: 100%; }
/* the scrolled title and description keep their own spacing whatever the page's paragraphs do (the Biennale's did not) */
body.ed-htools .ed-strip .ed-strip__titles > p { margin: 0 !important; padding: 0 !important; }
/* Arabic titles are taller: a little more room for the scrolled title and its description */
@media (min-width: 1024px) { body.lang-ar.ed-htools .ed-strip.has-desc:is(.has-nav, .has-tools, .has-rail) { --strip-t: 94px; } }
body.ed-htools .ed-strip__dock-in .fb-count { order: 2; margin-inline-start: auto; }
body.ed-htools .ed-strip__dock-in .rc-field--reel { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 8px; }
body.ed-htools .ed-strip__dock-in .rc-field--reel input { width: 80px !important; }
body.ed-htools .ed-strip__dock-in .rc-field--reel > label { margin: 0; color: var(--sec-fg); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
/* Arabic: the full names in the column, on two lines when they need it (user 2026-10-05) */
.lang-ar .ed-strip.has-rail .ev-nav a, .lang-ar .ed-strip.has-rail .ab-nav a, .lang-ar .ed-strip.has-rail.is-stuck .ev-nav a { white-space: normal; text-wrap: balance; }

/* ================================================================ the thin line (user 2026-10-05)
   Between the links column and the title side, on the logo's own split (words block | emblem tile, --ph-line from
   page-head.js), from the bottom of the bar down through all the colour of the head: band, title row once stuck,
   tools row and docked tools. Desktop, pages with the links column. */
body.ed-htools { --sec-rule: color-mix(in srgb, var(--sec-fg) 40%, transparent); }
@media (min-width: 1024px) {
	.ed-htools .ed-head:has(+ .ed-strip.has-rail)::after,
	.ed-strip.has-rail .ed-strip__title-row::after,
	.ed-strip.has-rail .ed-strip__tools::after,
	.ed-strip.has-rail .ed-strip__dock::after {
		content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; inset-inline-start: var(--ph-line, 0px); width: 1px;
		background: var(--sec-rule); pointer-events: none;
	}
	.ed-htools .ed-head:has(+ .ed-strip.has-rail)::after { top: calc(var(--cap-h) + var(--ab-h)); }
	.ed-strip.has-rail .ed-strip__tools { position: relative; }
}
@media (min-width: 1024px) {
	/* the links keep 12px off the line (the logo's words touch its emblem tile; text against a rule does not read well) */
	.ed-htools .ed-strip.has-rail .ed-strip__in { width: calc(var(--rail-w, 100px) - 12px); }
	/* no break where the band meets the rows under it: their part of the line starts 2px higher (inside their clip) */
	.ed-strip.has-rail .ed-strip__tools::after, .ed-strip.has-rail .ed-strip__dock::after { top: -2px; }
}
@media (min-width: 1024px) {
	/* the line keeps clear of the bar and of the end of the colour (user 2026-10-05: do not connect): 15px on load,
	   10px once scrolled */
	.ed-htools .ed-head:has(+ .ed-strip.has-rail)::after { top: calc(var(--cap-h) + var(--ab-h) + 15px); }
	.ed-strip.has-rail .ed-strip__tools::after { bottom: 15px; }
	.ed-strip.has-rail .ed-strip__title-row::after { top: 10px; }
	.ed-strip.has-rail.is-stuck .ed-strip__tools::after { bottom: 10px; }
	.ed-strip.has-rail.is-stuck.has-docked .ed-strip__tools::after { bottom: 0; } /* the docked tools hang below: the line goes on into them */
	.ed-strip.has-rail .ed-strip__dock::after { bottom: 10px; }
}
/* 1024–1279: the logo's words block is too narrow for some names (45px in Arabic): the column may reach into the page
   margin there; the line and the 12px before it stay where they are */
@media (min-width: 1024px) and (max-width: 1279px) {
	.ed-htools .ed-strip.has-rail .ed-strip__in {
		--rail-out: max(0px, calc(var(--edge, 24px) - 8px));
		inset-inline-start: calc(var(--rail-s, 0px) - var(--rail-out)); width: calc(var(--rail-w, 100px) - 12px + var(--rail-out));
	}
}

/* ================================================================ compact head on desktop (user 2026-10-05)
   Smaller titles and descriptions, less colour under them, a tighter scrolled row: more of the page in view. Pages with
   the links column stay as tall as the column. Phones and tablets keep their sizes. */
@media (min-width: 1024px) {
	.ed-head { padding-block: calc(var(--cap-h) + 22px) 16px; }
	.ed-head__title { font-size: clamp(30px, 3.1vw, 44px); }
	.lang-ar .ed-head__title { font-size: clamp(28px, 2.9vw, 40px); }
	.ed-head__up { margin-bottom: 8px; }
	.ed-head__sub { margin-top: 8px; font-size: clamp(20px, 2.1vw, 30px); }
	.lang-ar .ed-head__sub { font-size: clamp(20px, 2vw, 28px); }
	.ed-head__desc { margin-top: 8px; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.4; }
	.lang-ar .ed-head__desc { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; }
	/* scrolled */
	.ed-strip__title-row { padding-top: 10px; }
	.ed-strip__titles { gap: 3px; }
	.ed-strip__title { font-size: clamp(22px, 2.1vw, 30px); }
	.lang-ar .ed-strip__title { font-size: clamp(21px, 2vw, 28px); }
	.ed-strip__desc { font-size: 13px; }
	.lang-ar .ed-strip__desc { font-size: 14px; line-height: 1.45; }
	:root { --strip-t: 48px; }
	.ed-strip:not(.has-nav) { --strip-t: 62px; }
	.ed-htools .ed-strip.has-desc { --strip-t: 66px; }
	.ed-htools .ed-strip.has-desc:not(.has-nav):not(.has-tools) { --strip-t: 76px; }
	.ed-strip.has-rail { --strip-t: 66px; }
	.ed-strip.has-rail:not(.has-desc) { --strip-t: 50px; }
	body.lang-ar.ed-htools .ed-strip.has-desc:is(.has-nav, .has-tools, .has-rail) { --strip-t: 76px; }
	.ed-strip.has-rail.is-stuck .ed-strip__in { top: calc(10px - var(--strip-t)); }
	.ed-strip.has-tools .ed-strip__tools { padding-block: 10px 14px; }
}

/* ================================================================ links column: no underline (user 2026-10-05)
   A short tick comes off the thin line towards the link: in the accent colour for the current one, faint on hover. */
@media (min-width: 1024px) {
	body.ed-htools .ed-strip.has-rail :is(.ev-nav, .ab-nav) a { position: relative; text-decoration: none !important; }
	body.ed-htools .ed-strip.has-rail :is(.ev-nav, .ab-nav) a::after {
		content: ""; display: block; position: absolute; top: 50%; bottom: auto; inset-inline-start: auto; inset-inline-end: -12px;
		width: 8px; height: 2px; margin-top: -1px; background: var(--sec-fg); opacity: 0; transform: scaleX(0); transform-origin: right center;
		transition: opacity .15s ease, transform .15s ease;
	}
	[dir="rtl"] body.ed-htools .ed-strip.has-rail :is(.ev-nav, .ab-nav) a::after { transform-origin: left center; }
	body.ed-htools .ed-strip.has-rail :is(.ev-nav, .ab-nav) a:is(:hover, :focus-visible)::after { opacity: .55; transform: scaleX(1); }
	body.ed-htools .ed-strip.has-rail :is(.ev-nav, .ab-nav) a:is([aria-current="true"], [aria-current="page"])::after { background: var(--sec-accent); opacity: 1; transform: scaleX(1); }
	body.ed-htools .ed-strip.has-rail :is(.ev-nav, .ab-nav) a:focus-visible { outline: 2px solid var(--sec-fg); outline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) { body.ed-htools .ed-strip.has-rail :is(.ev-nav, .ab-nav) a::after { transition: none; } }
/* compact: less spare colour under the links column (16px on load, 12px scrolled) */
@media (min-width: 1024px) {
	.ed-strip.has-rail .ed-strip__tools { min-height: max(0px, calc(var(--rail-h, 0px) + var(--rail-top, 0px) + 16px), calc(var(--rail-hs, var(--rail-h, 0px)) - var(--strip-t) + 22px)); }
	.ed-strip.has-rail.is-stuck .ed-strip__tools { min-height: max(0px, calc(var(--rail-hs, var(--rail-h, 0px)) - var(--strip-t) + 22px)); }
}

/* ================================================================ the Timeline (user 2026-10-05)
   The page is one window tall and never scrolls, so its head starts in its compact, scrolled form (small title, the
   description on one line, a slim role filter) and the timeline gets the room. No empty band above the timeline. */
body.page-template-page_full_timeline .ed-head { padding-block: calc(var(--cap-h) + var(--ab-h) + 10px) 0; }
body.page-template-page_full_timeline .ed-head__up { display: none; }
body.page-template-page_full_timeline .ed-head__title { max-width: none; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.1; letter-spacing: -.035em; }
body.page-template-page_full_timeline.lang-ar .ed-head__title { font-size: clamp(21px, 2vw, 28px); line-height: 1.25; letter-spacing: 0; }
body.page-template-page_full_timeline .ed-head__desc { max-width: none; margin-top: 3px; font-size: 13px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.page-template-page_full_timeline.lang-ar .ed-head__desc { font-size: 14px; line-height: 1.45; }
body.page-template-page_full_timeline .ed-strip.has-tools .ed-strip__tools { padding-block: 0; }
body.page-template-page_full_timeline .ed-strip .timeline-filter a { padding: 8px 0 10px; }
body.page-template-page_full_timeline .ed-strip .timeline-filter a[aria-current="true"]::after { bottom: 4px; }
body.page-template-page_full_timeline .site-main--timeline > .ed-strip { margin-bottom: 0; }
body.page-template-page_full_timeline .site-main--timeline > .ed-strip + .timeline { margin-top: 0 !important; } /* beats the 28px gap that pages without links get */
/* the Timeline never scrolls: its strip stays in place (sticky nudged it 2–3px over the timeline's top edge) */
body.page-template-page_full_timeline .site-main--timeline > .ed-strip { position: relative; top: auto; }

/* ================================================================ the Radio page (/listen/, user 2026-10-05)
   Like the Timeline: one window tall, so its head starts in its compact, scrolled form and the jukebox (which sizes
   itself to the room left under the head, amar-radio jukebox.js) gets the space; no empty band above it. */
body.amar-jukebox-page .ed-head { padding-block: calc(var(--cap-h) + var(--ab-h) + 10px) 12px; }
body.amar-jukebox-page .ed-head__up { display: none; }
body.amar-jukebox-page .ed-head__title { max-width: none; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.1; letter-spacing: -.035em; }
body.amar-jukebox-page.lang-ar .ed-head__title { font-size: clamp(21px, 2vw, 28px); line-height: 1.25; letter-spacing: 0; }
body.amar-jukebox-page .ed-head__desc { max-width: none; margin-top: 3px; font-size: 13px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.amar-jukebox-page.lang-ar .ed-head__desc { font-size: 14px; line-height: 1.45; }
body.amar-jukebox-page .site-main > .ed-strip { position: relative; top: auto; }
body.amar-jukebox-page .site-main > .ed-strip + * { margin-top: 0 !important; } /* beats the 28px gap that pages without links get */
body.amar-jukebox-page .site-main > .ed-strip + .panel > .panel__body { padding-top: 0; }
/* the two lines above the jukebox are gone (user 2026-10-05): the station line repeated the head's description; the
   programme line now shows in the head's description instead (page-head.js) */
body.amar-jukebox-page .ajb__note, body.amar-jukebox-page .ajb__desc { display: none; }

/* ================================================================ the Glossary home (user 2026-10-05)
   Compact head from the start (small title with its Arabic name beside it, the description on one line), and the block
   under it keeps only what the head does not say: the counts and the team's preview note, side by side in one slim row.
   Its podcast line and intro paragraph repeated the head. The term map comes up by about 300px. */
body.post-type-archive-glossary .ed-head { padding-block: calc(var(--cap-h) + var(--ab-h) + 10px) 12px; }
body.post-type-archive-glossary .ed-head__up { display: none; }
body.post-type-archive-glossary .ed-head__in { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; }
body.post-type-archive-glossary .ed-head__title { max-width: none; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.1; letter-spacing: -.035em; }
body.post-type-archive-glossary.lang-ar .ed-head__title { font-size: clamp(21px, 2vw, 28px); line-height: 1.25; letter-spacing: 0; }
body.post-type-archive-glossary .ed-head__sub { margin: 0; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.2; }
body.post-type-archive-glossary .ed-head__desc { flex: 1 0 100%; max-width: none; margin-top: 3px; font-size: 13px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.post-type-archive-glossary.lang-ar .ed-head__desc { font-size: 14px; line-height: 1.45; }
body.post-type-archive-glossary .glossary-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 32px; margin-top: 14px !important; padding: 0 0 14px; border: 0; border-bottom: 1px solid var(--line); }
body.post-type-archive-glossary .glossary-hero :is(.eyebrow, .glossary-hero__lede, .glossary-hero__title) { display: none; }
body.post-type-archive-glossary .glossary-hero__text { flex: 0 0 auto; }
body.post-type-archive-glossary .glossary-hero .stat-row { margin: 0; padding: 0; border: 0; gap: 4px 22px; }
body.post-type-archive-glossary .glossary-hero .stat-row strong { font-size: 22px; }
body.post-type-archive-glossary .glossary-draft-note { flex: 1 1 360px; margin: 0; padding: 8px 14px; font-size: 13px; }
body.post-type-archive-glossary .glossary-explorer { margin-top: 0 !important; padding-top: 16px; }

/* ================================================================ the Listening room (user 2026-10-05)
   Compact head from the start (small title, the description on one line), the toolbar already in its compact,
   scrolled look, the four counts in one slim row, and 12px instead of 78px between the head and the room. The links
   column still sets the head's least height on desktop. */
body:has(#amar-lr) .ed-head { padding-block: calc(var(--cap-h) + var(--ab-h) + 10px) 10px; }
body:has(#amar-lr) .ed-head__up { display: none; }
body:has(#amar-lr) .ed-head__title { max-width: none; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.1; letter-spacing: -.035em; }
body:has(#amar-lr).lang-ar .ed-head__title { font-size: clamp(21px, 2vw, 28px); line-height: 1.25; letter-spacing: 0; }
body:has(#amar-lr) .ed-head__desc { max-width: none; margin-top: 3px; font-size: 13px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body:has(#amar-lr).lang-ar .ed-head__desc { font-size: 14px; line-height: 1.45; }
/* the toolbar: compact from the start */
body:has(#amar-lr) .ed-strip.has-tools .ed-strip__tools { padding-block: 4px 12px; }
body:has(#amar-lr) .ed-strip .ed-tools { gap: 8px 10px; }
body:has(#amar-lr) .ed-strip :is(.ed-field input, .ed-select select) { height: 36px; font-size: 14px; }
body:has(#amar-lr) .ed-strip .ed-ibtn { width: 36px; height: 36px; }
body:has(#amar-lr) .ed-strip .ed-select > span { display: none; }
body:has(#amar-lr) .ed-strip .ed-chip { height: 30px; padding: 0 12px; font-size: 13px; }
body:has(#amar-lr) .ed-strip .ed-chips { flex-wrap: nowrap; -webkit-mask-image: linear-gradient(to var(--fade-to, right), #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to var(--fade-to, right), #000 calc(100% - 40px), transparent); padding-inline-end: 32px; }
[dir="rtl"] body:has(#amar-lr) .ed-strip .ed-chips { --fade-to: left; }
/* less room between the head and the room */
body:has(#amar-lr) .site-main > .ed-strip { margin-bottom: 0; }
body:has(#amar-lr) .site-main > .ed-strip + .panel { margin-top: 12px !important; }
body:has(#amar-lr) .site-main > .ed-strip + .panel > .panel__body { padding-top: 0; }
/* the four counts in one slim row */
body:has(#amar-lr) #amar-lr .stats { border-top-width: 1px; }
body:has(#amar-lr) #amar-lr .stat { display: flex; align-items: baseline; gap: 8px; padding: 8px var(--edge) 9px; }
body:has(#amar-lr) #amar-lr .stat b { font-size: 22px; }
body:has(#amar-lr) #amar-lr .stat span { font-size: 11.5px; }

/* ================================================================ AMAR on Facebook (user 2026-10-05)
   Compact head from the start; the intro keeps the paragraph on the series and the link to Facebook (its other lines
   repeated the head or the figures, and "Browse the posts" pointed at what now follows); the six photos in one row;
   the figures in one slim row; less room before "Every post". The search and filters come up by about 500px. */
body:has(.fb-page) .ed-head { padding-block: calc(var(--cap-h) + var(--ab-h) + 10px) 10px; }
body:has(.fb-page) .ed-head__up { display: none; }
body:has(.fb-page) .ed-head__title { max-width: none; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.1; letter-spacing: -.035em; }
body:has(.fb-page).lang-ar .ed-head__title { font-size: clamp(21px, 2vw, 28px); line-height: 1.25; letter-spacing: 0; }
body:has(.fb-page) .ed-head__desc { max-width: none; margin-top: 3px; font-size: 13px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body:has(.fb-page).lang-ar .ed-head__desc { font-size: 14px; line-height: 1.45; }
body:has(.fb-page) .site-main > .ed-strip { margin-bottom: 0; }
body:has(.fb-page) .site-main > .ed-strip + .panel { margin-top: 12px !important; }
body:has(.fb-page) .site-main > .ed-strip + .panel > .panel__body { padding-top: 0; }
/* the intro */
body:has(.fb-page) .fb-hero :is(.ed-kicker, .ev-hero__by, .ev-actions .ed-button) { display: none; }
body:has(.fb-page) .fb-hero .ev-hero__copy > p:not([class]) ~ p:not([class]) { display: none; }
body:has(.fb-page) .fb-hero :is(.ev-hero__copy, .ev-hero__side) { padding-block: 14px 16px; }
body:has(.fb-page) .fb-hero .ev-actions { margin-top: 10px; }
body:has(.fb-page) .fb-mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
/* the figures */
body:has(.fb-page) .pm-figures { padding-block: 10px; }
body:has(.fb-page) .pm-figures .ev-stats li { display: flex; align-items: baseline; gap: 8px; padding-block: 4px; }
body:has(.fb-page) .pm-figures .ev-stats strong { font-size: clamp(22px, 2vw, 28px); }
body:has(.fb-page) .pm-figures .ev-stats span { margin: 0; }
/* the posts */
body:has(.fb-page) .fb-archive { padding-top: 22px; }

/* ================================================================ Magnetic tapes (user 2026-10-05)
   Compact head from the start; the version switcher slimmer (kept: the team still chooses); the reels photo as a slim
   band; the intro keeps its paragraph, the AFAC credit and the link to the collection (its first line repeated the head
   and "Search the catalogue" pointed at what now follows); the three figures in one slim row; less room before the
   catalogue. The search and filters come up by about 700px. */
body:has(.rc-app) .ed-head { padding-block: calc(var(--cap-h) + var(--ab-h) + 10px) 10px; }
body:has(.rc-app) .ed-head__up { display: none; }
body:has(.rc-app) .ed-head__title { max-width: none; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.1; letter-spacing: -.035em; }
body:has(.rc-app).lang-ar .ed-head__title { font-size: clamp(21px, 2vw, 28px); line-height: 1.25; letter-spacing: 0; }
body:has(.rc-app) .ed-head__desc { max-width: none; margin-top: 3px; font-size: 13px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body:has(.rc-app).lang-ar .ed-head__desc { font-size: 14px; line-height: 1.45; }
body:has(.rc-app) .site-main > .ed-strip { margin-bottom: 0; }
body:has(.rc-app) .site-main > .ed-strip + * { margin-top: 12px !important; }
body:has(.rc-app) .rc-switch { margin-bottom: 8px; padding-block: 6px; }
body:has(.rc-app) .rc-hero { margin-top: 0 !important; }
body:has(.rc-app) .rc-hero img { aspect-ratio: auto; height: 150px; }
@media (max-width: 640px) { body:has(.rc-app) .rc-hero img { height: 110px; } }
body:has(.rc-app) .rc-intro { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 0 !important; padding: 14px 0 18px; }
body:has(.rc-app) .rc-intro :is(.rc-kicker, .rc-jump) { display: none; }
body:has(.rc-app) .rc-stats { order: -1; display: flex; flex-wrap: wrap; gap: 4px 28px; border: 0; }
body:has(.rc-app) .rc-stats li { display: flex; align-items: baseline; gap: 8px; padding: 0; border: 0; }
body:has(.rc-app) .rc-stats strong { display: inline; font-size: clamp(22px, 2vw, 28px); }
body:has(.rc-app) .rc-stats span { display: inline; margin: 0; }
body:has(.rc-app) .rc-intro__text { display: contents; }
body:has(.rc-app) .rc-credit { margin-top: 6px; }
body:has(.rc-app) .rc-app { margin-top: 0 !important; padding-top: 16px; }

/* ================================================================ Record companies (user 2026-10-05)
   Compact head from the start (the links column stays); the opening keeps its two paragraphs, its buttons and the facts;
   its kicker, its own title and its subtitle repeated the head; the disc picture smaller; less room before it. */
body:has(.ev-page--companies) .ed-head { padding-block: calc(var(--cap-h) + var(--ab-h) + 10px) 10px; }
body:has(.ev-page--companies) .ed-head__up { display: none; }
body:has(.ev-page--companies) .ed-head__title { max-width: none; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.1; letter-spacing: -.035em; }
body:has(.ev-page--companies).lang-ar .ed-head__title { font-size: clamp(21px, 2vw, 28px); line-height: 1.25; letter-spacing: 0; }
body:has(.ev-page--companies) .ed-head__desc { max-width: none; margin-top: 3px; font-size: 13px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body:has(.ev-page--companies).lang-ar .ed-head__desc { font-size: 14px; line-height: 1.45; }
body:has(.ev-page--companies) .site-main > .ed-strip { margin-bottom: 0; }
body:has(.ev-page--companies) .site-main > .ed-strip + .panel { margin-top: 12px !important; }
body:has(.ev-page--companies) .site-main > .ed-strip + .panel > .panel__body { padding-top: 0; }
body:has(.ev-page--companies) .ev-page--companies > .ev-hero .ev-hero__copy > :is(.ed-kicker, h2, .ev-hero__by) { display: none; }
body:has(.ev-page--companies) .ev-page--companies > .ev-hero :is(.ev-hero__copy, .ev-hero__side) { padding-top: 16px; }
body:has(.ev-page--companies) .ev-page--companies > .ev-hero .ev-hero__copy { padding-bottom: 20px; }
body:has(.ev-page--companies) .ev-page--companies > .ev-hero .ev-hero__side figure { text-align: center; }
body:has(.ev-page--companies) .ev-page--companies > .ev-hero .ev-hero__side figure img { width: auto !important; height: auto !important; max-width: 100%; max-height: 300px; aspect-ratio: auto; object-fit: contain; margin-inline: auto; } /* keeps the disc round */
body:has(.ev-page--companies) .ev-page--companies > .ev-hero .ev-hero__side figure .co-hero { display: block; width: min(300px, 100%); aspect-ratio: 1; margin-inline: auto; padding: 0; line-height: 0; } /* the round black button hugs the disc */
body:has(.ev-page--companies) .ev-page--companies > .ev-hero .ev-facts { padding-block: 16px; }
body:has(.ev-page--companies) .ev-page--companies > .ev-hero .ev-archive-line { padding-block: 12px; }

/* ================================================================ Press (user 2026-10-05)
   Compact head from the start (the links column stays); the opening keeps its first paragraph, the Read / Watch /
   Listen buttons and the video (its kicker, its own title, its subtitle and the reading note repeated the head); the
   figures in one slim row; less room before it. */
body:has(.pm-hero) .ed-head { padding-block: calc(var(--cap-h) + var(--ab-h) + 10px) 10px; }
body:has(.pm-hero) .ed-head__up { display: none; }
body:has(.pm-hero) .ed-head__title { max-width: none; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.1; letter-spacing: -.035em; }
body:has(.pm-hero).lang-ar .ed-head__title { font-size: clamp(21px, 2vw, 28px); line-height: 1.25; letter-spacing: 0; }
body:has(.pm-hero) .ed-head__desc { max-width: none; margin-top: 3px; font-size: 13px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body:has(.pm-hero).lang-ar .ed-head__desc { font-size: 14px; line-height: 1.45; }
body:has(.pm-hero) .site-main > .ed-strip { margin-bottom: 0; }
body:has(.pm-hero) .site-main > .ed-strip + .panel { margin-top: 12px !important; }
body:has(.pm-hero) .site-main > .ed-strip + .panel > .panel__body { padding-top: 0; }
body:has(.pm-hero) .pm-hero .ev-hero__copy > :is(.ed-kicker, h2, .ev-hero__by) { display: none; }
body:has(.pm-hero) .pm-hero .ev-hero__copy > p:not([class]) ~ p:not([class]) { display: none; }
body:has(.pm-hero) .pm-hero :is(.ev-hero__copy, .ev-hero__side) { padding-block: 14px 18px; }
body:has(.pm-hero) .pm-hero .ev-actions { margin-top: 10px; }
body:has(.pm-hero) .pm-figures { padding-block: 10px; }
body:has(.pm-hero) .pm-figures .ev-stats li { display: flex; align-items: baseline; gap: 8px; padding-block: 4px; }
body:has(.pm-hero) .pm-figures .ev-stats strong { font-size: clamp(22px, 2vw, 28px); }
body:has(.pm-hero) .pm-figures .ev-stats span { margin: 0; }

/* ================================================================ scrolled head: the subtitle beside the title (user 2026-10-13)
   A general rule for every page, desktop and landscape tablets (≥1024): once scrolled, the title and its subtitle share
   one line, so the title row is one line high (--strip-t; !important because many pages tuned their own value for the
   old two-line row); the filters come right up under the title; the links column tightens so it does not hold the head
   open on its own. The page still never moves (page-head.js compensate()). */
@media (min-width: 1024px) {
	body.ed-htools .ed-strip { --strip-t: 50px !important; }
	body.ed-htools.lang-ar .ed-strip { --strip-t: 56px !important; }
	body.ed-htools .ed-strip__title-row { padding-top: 9px; }
	body.ed-htools .ed-strip.is-stuck .ed-strip__titles { display: flex; align-items: center; gap: 0 18px; }
	body.ed-htools .ed-strip.is-stuck .ed-strip__title { flex: 0 1 auto; max-width: 62%; }
	/* a long subtitle takes a second line beside the title rather than being cut */
	body.ed-htools .ed-strip.is-stuck .ed-strip__desc { flex: 1 1 0; min-width: 8em; white-space: normal; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-wrap: balance; }
	body.ed-htools.lang-ar .ed-strip.is-stuck .ed-strip__desc { line-height: 1.4; }
	/* the filters stand on the foot of the head, scrolled or not (user 2026-10-13: "aligned to the bottom of the header") */
	body.ed-htools .ed-strip.has-tools.is-stuck .ed-strip__tools { padding-top: 2px; padding-bottom: 12px; align-items: end; align-content: end; }
	body.ed-htools .ed-strip.has-tools.is-stuck .ed-strip__tools > * { align-self: end; }
	/* the links column, once scrolled: one tight list, 12px of colour under it */
	body.ed-htools .ed-strip.has-rail.is-stuck :is(.ev-nav, .ab-nav) { gap: 1px; }
	body.ed-htools .ed-strip.has-rail.is-stuck :is(.ev-nav, .ab-nav) a { padding: 0; line-height: 1.2; }
	body.ed-htools.lang-ar .ed-strip.has-rail.is-stuck :is(.ev-nav, .ab-nav) { gap: 2px; }
	body.ed-htools.lang-ar .ed-strip.has-rail.is-stuck :is(.ev-nav, .ab-nav) a { line-height: 1.25; }
	body.ed-htools .ed-strip.has-rail.is-stuck .ed-strip__in { top: calc(9px - var(--strip-t)); }
	body.ed-htools .ed-strip.has-rail.is-stuck .ed-strip__tools { min-height: max(0px, calc(var(--rail-hs, var(--rail-h, 0px)) - var(--strip-t) + 12px)); }
}

/* ================================================================ responsive QA 2026-11-05 (upgrade/responsive-2026-11-05) */
/* phones held sideways: the docked head keeps to one row under the bar (it covered 37-90% of a 390px-tall screen) */
@media (max-width: 1023px) and (max-height: 500px) {
	/* with links or tools: those rows mark the place, so the docked title line goes */
	.ed-strip:is(.has-nav, .has-tools), body.ed-htools .ed-strip:is(.has-nav, .has-tools) { --strip-t: 0px !important; }
	.ed-strip:is(.has-nav, .has-tools) .ed-strip__title-row { display: none; }
	.ed-strip.has-nav.is-stuck .ed-strip__in { min-height: 44px; }
	.ed-strip.has-nav.is-stuck :is(.ev-nav, .ab-nav) a { padding-block: 11px; }
	.ed-strip.has-docked .ed-strip__dock { padding-block: 2px 8px; }
	/* title only: one docked line, the description beside the title */
	body.ed-htools .ed-strip:not(.has-nav):not(.has-tools) { --strip-t: 44px !important; }
	body.ed-htools.lang-ar .ed-strip:not(.has-nav):not(.has-tools) { --strip-t: 48px !important; }
	body.ed-htools .ed-strip:not(.has-nav):not(.has-tools) .ed-strip__title-row { padding-top: 8px; }
	body.ed-htools .ed-strip.is-stuck .ed-strip__titles { display: flex; align-items: baseline; gap: 0 14px; }
	body.ed-htools .ed-strip.is-stuck .ed-strip__title { flex: 0 1 auto; max-width: 60%; font-size: 20px; }
	body.ed-htools .ed-strip.is-stuck .ed-strip__desc { flex: 1 1 0; min-width: 6em; }
	html:has(body.ed-head-on) { scroll-padding-top: calc(var(--cap-h) + var(--ab-h) + 64px); }
}
/* Arabic docked title: room for the dots under the letters (the one-line clip cut them: عبد الحي read عىد الحى) */
body.lang-ar .ed-strip .ed-strip__title-row p.ed-strip__title { padding-block: .3em !important; margin-block: -.3em !important; }
/* touch screens: fields at 16px so iOS Safari does not zoom the page when one is tapped */
@media (pointer: coarse) {
	.ed-field input, .ed-select select,
	.ed-strip.is-stuck .ed-field input, .ed-strip.is-stuck .ed-select select,
	body:has(#amar-lr) .ed-strip :is(.ed-field input, .ed-select select),
	body.ed-htools .ed-strip__dock-in :is(input[type='search'], input[type='text'], input[type='number'], select),
	body.ed-htools .ed-strip__dock-in .bn-type-filter select,
	.editorial .bn-type-filter select,
	.editorial .podcast-browser__search, body .pd .pd-eps .podcast-browser__search { font-size: 16px; }
	.ed-field input { text-overflow: ellipsis; }
}
/* phones: a links row cut at the screen edge fades there while more links wait (page-head.js navMore) */
@media (max-width: 640px) {
	.ed-strip .ev-nav.is-more, .ed-strip .ab-nav.is-more { -webkit-mask-image: linear-gradient(to var(--fade-to, right), #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to var(--fade-to, right), #000 calc(100% - 32px), transparent); }
	[dir='rtl'] .ed-strip .ev-nav.is-more, [dir='rtl'] .ed-strip .ab-nav.is-more { --fade-to: left; }
	/* compact heads: the description in full on phones (it was cut with an ellipsis) */
	body:has(.rc-app) .ed-head__desc, body:has(.ev-page--companies) .ed-head__desc { white-space: normal; overflow: visible; text-overflow: clip; }
}
/* the timeline's role filter always overflows under 700px: fade its far end */
@media (max-width: 700px) {
	.ed-strip .timeline-filter ul { padding-inline-end: 28px; -webkit-mask-image: linear-gradient(to var(--fade-to, right), #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to var(--fade-to, right), #000 calc(100% - 36px), transparent); }
	[dir='rtl'] .ed-strip .timeline-filter ul { --fade-to: left; }
	/* docked podcast tools stay on one row (the sort button wrapped to its own row) */
	body.ed-htools .ed-strip__dock-in .podcast-browser__tools { flex-wrap: nowrap; }
	body.ed-htools .ed-strip__dock-in .podcast-browser__search { flex: 1 1 0; min-width: 0; }
}
/* All episodes: the head already names the page; the list's own heading stays for screen readers only */
.ed-htools .podcast-home > .podcast-browser-panel > .podcast-browser > .podcast-browser__head > .section-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Biennale programme, docked under 1024px: the controls stay a wrapping row (biennale.css stacks them in a column at
   rest; in the dock that column wrapped the format filter into a second column past the screen edge, so iPads scrolled sideways) */
body.ed-htools .ed-strip__dock-in .bn-controls { flex-direction: row; }
/* touch tablets >= 1024px with head tools keep the links column: finger spacing for up to 7 links (page-head.js turns the
   column off on touch screens without tools) */
@media (min-width: 1024px) and (not ((hover: hover) and (pointer: fine))) {
	body.ed-htools .ed-strip.has-rail.has-tools.is-stuck :is(.ev-nav, .ab-nav):not(:has(> a:nth-child(8))) { gap: 4px; }
	body.ed-htools .ed-strip.has-rail.has-tools.is-stuck :is(.ev-nav, .ab-nav):not(:has(> a:nth-child(8))) > a { padding-block: 3px; }
}
/* Artists A-Z docked on phones: the search and the letters share the width (the letters vanished); letter rows fade at their end */
@media (max-width: 640px) {
	body.ed-htools .ed-strip__dock-in:has(> .amc-az__q) { grid-template-columns: minmax(0, 1fr); }
	body.ed-htools .ed-strip__dock-in .amc-az__q { flex-wrap: nowrap; }
	body.ed-htools .ed-strip__dock-in .amc-az__show { flex: none; }
	body.ed-htools .ed-strip__dock-in .amc-az__q label { flex: 1 1 0; min-width: 0; }
	body.ed-htools .ed-strip__dock-in .amc-az__q input { width: 100%; }
}
body.ed-htools .ed-strip__dock-in :is(.amc-az__letters, .amc-piece__pick) { padding-inline-end: 24px !important; -webkit-mask-image: linear-gradient(to var(--fade-to, right), #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to var(--fade-to, right), #000 calc(100% - 32px), transparent); }
[dir='rtl'] body.ed-htools .ed-strip__dock-in :is(.amc-az__letters, .amc-piece__pick) { --fade-to: left; }
@media (min-width: 1024px) {
	body.ed-htools .ed-strip.is-stuck .ed-strip__title { padding-inline-end: .12em !important; } /* the docked title's last letter is not shaved */
	body.ed-htools.lang-ar .ed-strip.has-rail.is-stuck :is(.ev-nav, .ab-nav) { gap: 5px; } /* Arabic two-line names read as one link each */
	body.ed-htools.lang-ar .ed-strip.has-rail.is-stuck :is(.ev-nav, .ab-nav) a { line-height: 1.15; }
}
@media (max-width: 1023px) and (max-height: 500px) {
	.ed-head-on.search .navbar.is-searching .site-search { padding-block: 6px; }
	.ed-head-on.search .site-search .search-form__field { padding-block: 6px; }
	.ed-head-on.search:has(.navbar.is-searching) .ed-head { padding-top: calc(var(--cap-h) + 22px + 56px); }
}

/* responsive QA 2026-11-05, polish */
@media (min-width: 641px) and (max-width: 1023px) {
	.ed-strip .ev-nav:not(:has(> a:nth-child(4))) { justify-content: flex-start; gap: 0 32px; }
	body:not(.home) .ed-strip.has-tools.is-stuck .ed-strip__tools { align-items: end; }
}
@media (min-width: 901px) and (max-width: 1279px) { .ed-htools .episode-aside { max-height: calc(100vh - var(--head-b, 156px) - 32px); overflow-y: auto; scrollbar-width: thin; } }
@media (max-width: 640px) {
	.ed-strip:not(.is-stuck) .ed-chips:not(.pd-tools .ed-chips) { -webkit-mask-image: linear-gradient(to var(--fade-to, right), #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to var(--fade-to, right), #000 calc(100% - 40px), transparent); padding-inline-end: 32px; }
	[dir="rtl"] .ed-strip .ed-chips { --fade-to: left; }
}
.ed-strip.is-stuck .ed-strip__title-row { clip-path: inset(-10px -100vmax 0 -100vmax); }