/* CD pages — design "B · The record catalogue" (chosen 2026-10-12) with A's black booklet section.
   White ground, black ink, catalogue blue; one colour per disc (from the data). template-parts/cd-page.php, assets/js/cd.js. */

body.cd-new { --ground: #fff; --paper: #fff; background: #fff; }
.cd-page {
	--cd-ink: #111111; --cd-blue: #24408e; --cd-blue-l: #a9bcf0; --cd-mute: #33353a; --cd-soft: #4a4d55; --cd-line: #d5d8e0;
	color: var(--cd-ink);
}
.cd-page h2, .cd-page h3 { color: inherit; }
.cd-page a { color: inherit; }
.cd-band { box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); background: var(--band); }

/* little things */
.cd-sw { display: inline-block; flex: none; width: 10px; height: 10px; background: var(--c); }
.cd-sw--l { width: 26px; height: 26px; }
.cd-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; letter-spacing: 0; }
.cd-kicker { margin: 0; color: var(--cd-blue); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.lang-ar .cd-kicker { font-size: 15px; letter-spacing: 0; }
.cd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 28px 0 0; }
.cd-btn {
	display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; background: var(--cd-ink); color: #fff !important;
	font-size: 16px; font-weight: 800; text-decoration: none;
}
.cd-btn:hover, .cd-btn:focus-visible { background: var(--cd-blue); }
.cd-btn:focus-visible, .cd-link:focus-visible, .cd-page button:focus-visible { outline: 3px solid var(--cd-blue); outline-offset: 3px; }
.cd-link { color: var(--cd-blue) !important; font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.cd-link:hover { text-decoration-thickness: 2px; }

/* the head's tools */
.cd-tools__order {
	display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 999px; background: var(--sec-fg, #1f140e);
	color: var(--sec-bg, #ef6530) !important; font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap;
}
.cd-tools__order:hover { background: #000; }
.ed-strip.is-stuck .cd-tools__order { height: 36px; }
.cd-tools .ed-chip .cd-sw { width: 9px; height: 9px; }
/* no search, no count in the head (user 2026-10-13): Order ends the discs row; the companies take the next line */
.ed-tools.cd-tools { flex-wrap: wrap; }
.cd-tools .ed-tools__row--main { flex: 0 0 auto; order: 1; margin-inline-start: auto; }
.cd-tools .ed-tools__row[aria-label] { order: 0; flex: 0 1 auto; min-width: 0; }
.cd-tools .ed-tools__row[aria-label] ~ .ed-tools__row[aria-label] { order: 2; flex: 1 1 100%; }
.cd-tools .ed-field { max-width: 420px; }
.cd-tools .cd-tools__order { margin-inline-start: auto; }
.cd-tools .ed-chip[aria-pressed="true"] .cd-sw { box-shadow: 0 0 0 1px #fff; }

/* section heads */
.cd-sh { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 14px 40px; border-top: 3px solid var(--cd-ink); padding-top: 16px; }
.cd-sh h2 { margin: 0; font-size: clamp(34px, 4vw, 56px); line-height: 1; font-weight: 700; letter-spacing: -.04em; text-transform: uppercase; }
.lang-ar .cd-sh h2 { letter-spacing: 0; line-height: 1.3; text-transform: none; }
.cd-sh p { margin: 0; max-width: 54ch; color: var(--cd-mute); font-size: 16px; }

/* ---------- the box and its contents ---------- */
.cd-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; margin-top: 52px; }
.cd-frame { border: 12px solid var(--cd-ink); background: var(--cd-ink); }
.cd-frame img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.cd-facts { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 0; border-bottom: 2px solid var(--cd-ink); }
.cd-facts > div { padding: 14px 16px 14px 0; }
.cd-facts > div + div { padding-inline: 16px 0; border-inline-start: 1px solid var(--cd-ink); }
.cd-facts dt { color: var(--cd-blue); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lang-ar .cd-facts dt { font-size: 14px; letter-spacing: 0; }
.cd-facts dd { margin: 4px 0 0; font-size: 15px; font-weight: 600; line-height: 1.45; }
.cd-facts__price dd { font-size: 28px; line-height: 1.1; font-weight: 800; }
.cd-hero__title { text-transform: none; margin: 8px 0 0; font-size: clamp(52px, 6.7vw, 96px); line-height: 1.02; font-weight: 700; letter-spacing: -.04em; }
.cd-hero__title:lang(ar) { font-family: var(--font-ar); line-height: 1.2; letter-spacing: 0; }
.cd-hero__title:lang(en) { font-family: var(--font); }
/* the other language's lines start where the page's lines start */
html:not([dir="rtl"]) .cd-hero__title, html:not([dir="rtl"]) .cd-toc__o, html:not([dir="rtl"]) .cd-pick__ar { text-align: left; }
html[dir="rtl"] .cd-hero__title, html[dir="rtl"] .cd-toc__o { text-align: right; }
.cd-hero__sub { margin: 6px 0 0; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }
.lang-ar .cd-hero__sub { letter-spacing: 0; }
.cd-hero__intro p { max-width: 62ch; margin: 14px 0 0; color: var(--cd-mute); font-size: 17px; line-height: 1.6; }
.lang-ar .cd-hero__intro p { font-size: 18px; line-height: 1.85; }

.cd-toc { list-style: none; margin: 28px 0 0; padding: 0; border-top: 3px solid var(--cd-ink); }
.cd-toc a {
	display: grid; grid-template-columns: 26px max-content minmax(0, 1fr) auto 96px 18px; gap: 16px; align-items: center;
	min-height: 64px; padding: 10px 4px; border-bottom: 1px solid var(--cd-ink); text-decoration: none;
}
.cd-toc a:hover { background: #f1f3f9; }
.cd-toc__n { font-size: 22px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.lang-ar .cd-toc__n { font-size: 20px; letter-spacing: 0; }
.cd-toc__t { min-width: 0; }
.cd-toc__t > span { display: block; font-size: 17px; font-weight: 700; line-height: 1.3; }
.cd-toc__t > .cd-toc__o { font-size: 15px; font-weight: 500; color: var(--cd-mute); }
.cd-toc__o:lang(ar) { font-family: var(--font-ar); text-align: start; }
.cd-toc__c { font-size: 14px; font-weight: 700; white-space: nowrap; }
.cd-toc__y { color: var(--cd-mute); font-size: 14px; font-variant-numeric: tabular-nums; text-align: end; }
.cd-toc__a { color: var(--cd-blue); font-weight: 800; }

/* ---------- the excerpts, on catalogue blue ---------- */
.cd-listen { --band: var(--cd-blue); margin-top: 72px; padding-block: 40px; color: #fff; }
.cd-listen { box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); background: var(--band); }
.cd-listen__in { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
.cd-listen__head h2 { margin: 0; font-size: 32px; line-height: 1; font-weight: 700; letter-spacing: -.03em; text-transform: uppercase; }
.lang-ar .cd-listen__head h2 { letter-spacing: 0; text-transform: none; line-height: 1.3; }
.cd-listen__head p { margin: 10px 0 0; color: #dfe6fb; font-size: 15px; }
.cd-listen .amar-player {
	--ap-ink: #fff; --ap-paper: var(--cd-blue); --ap-line: rgba(255, 255, 255, .55); --ap-hair: rgba(255, 255, 255, .3);
	--ap-muted: #dfe6fb; --ap-focus: #fff; margin: 0; color: #fff;
}
.cd-listen .amar-player.amar-player button.amar-player__track:hover { background: rgba(255, 255, 255, .12); }
.cd-listen .amar-player .amar-player__dot::after { background: #8ea2d8; }
.cd-listen .amar-player .amar-player__buy { display: none; }
.cd-listen .amar-player .amar-player__msg { color: var(--cd-ink); }
.cd-listen .amar-player .amar-player__side, .cd-listen .amar-player .amar-player__head { color: #ffd2bf; }

/* ---------- the recordings, year by year ---------- */
.cd-years { margin-top: 88px; }
.cd-years__how { margin: 12px 0 0; color: var(--cd-mute); font-size: 15px; }
.cd-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; font-size: 13px; font-weight: 700; }
.cd-legend li { display: inline-flex; align-items: center; gap: 8px; }
.cd-legend .cd-sw { width: 14px; height: 14px; }
.cd-years__grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 40px; align-items: end; margin-top: 28px; }
.cd-chart-wrap { min-width: 0; overflow-x: auto; padding-bottom: 6px; direction: ltr; } /* time runs left to right on both pages */
.cd-chart { min-width: 720px; }
.cd-chart__bars, .cd-chart__ticks, .cd-chart__events { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 4px; }
.cd-chart__bars { align-items: end; min-height: 300px; border-bottom: 2px solid var(--cd-ink); }
.cd-chart__col { display: flex; flex-direction: column-reverse; gap: 3px; padding-bottom: 3px; }
.cd-page .cd-sq {
	display: block; width: 100%; height: var(--sq, 17px); margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--c);
	cursor: pointer; transition: transform .12s ease, opacity .2s ease;
}
.cd-page .cd-sq:hover { transform: scale(1.25); }
.cd-page .cd-sq[aria-pressed="true"] { outline: 3px solid var(--cd-ink); outline-offset: 2px; position: relative; z-index: 1; }
.cd-page .cd-sq.is-off { opacity: .14; }
.cd-chart__ticks { margin-top: 8px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cd-chart__ticks span { text-align: center; white-space: nowrap; overflow: visible; }
.cd-chart__ticks .is-nd { padding-inline-start: 6px; text-align: start; }
.cd-chart__col--nd { border-inline-start: 1px dashed var(--cd-line); padding-inline-start: 4px; }
.cd-chart__events { margin: 16px 0 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.35; }
.cd-chart__events li { border-top: 3px solid var(--c); padding: 6px 4px 8px 0; }
.cd-chart__events strong { display: block; font-size: 12px; font-variant-numeric: tabular-nums; }
.cd-chart__events [dir="rtl"] { display: block; text-align: right; font-family: var(--font-ar); font-size: 13px; }
.cd-pick { position: relative; border: 2px solid var(--cd-ink); padding: 20px 22px 26px; }
.cd-pick p { margin: 0; }
.cd-pick__where { color: var(--cd-blue); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.lang-ar .cd-pick__where { font-size: 14px; letter-spacing: 0; }
.cd-pick__ar { margin-top: 10px !important; font-family: var(--font-ar); font-size: 28px; line-height: 1.4; font-weight: 700; text-align: start; }
.cd-pick__la { margin-top: 4px !important; font-size: 19px; line-height: 1.25; font-weight: 700; }
.cd-pick__en { font-size: 15px; font-style: italic; color: var(--cd-mute); }
.cd-pick__by { margin-top: 12px !important; font-size: 15px; }
.cd-pick__meta { margin-top: 2px !important; color: var(--cd-mute); font-size: 14px; }
.cd-pick__go { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 14px !important; font-size: 14px; font-weight: 700; }
.cd-pick__go a { color: var(--cd-blue); text-underline-offset: 3px; }
.cd-page .cd-pick__play, .cd-page .cd-ent__play {
	display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: 0; padding: 0 12px; border: 1.5px solid var(--cd-blue);
	border-radius: 999px; background: #fff; color: var(--cd-blue); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
}
.cd-page .cd-pick__play:hover, .cd-page .cd-ent__play:hover { background: var(--cd-blue); color: #fff; }
.cd-pick__play[hidden], .cd-ent__play[hidden] { display: none !important; }
.cd-pick__bar { position: absolute; inset-inline: -2px; bottom: -2px; height: 6px; background: var(--c); }

/* ---------- the catalogue ---------- */
.cd-cat { margin-top: 72px; }
.cd-cat__status { font-weight: 700; color: var(--cd-ink) !important; }
.cd-cat__cols { column-count: 3; column-gap: 36px; margin-top: 8px; }
.cd-cat__disc[hidden] { display: none; }
.cd-cat__dh { break-after: avoid; margin: 22px 0 4px; padding: 8px 10px; background: var(--bg); color: var(--fg) !important; font-size: 14px; line-height: 1.3; font-weight: 800; }
.cd-cat__disc:first-child .cd-cat__dh { margin-top: 14px; }
.cd-cat__list { margin: 0; padding: 0; list-style: none; }
.cd-ent {
	display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 2px 10px; padding: 10px 6px; border-bottom: 1px solid var(--cd-line);
	break-inside: avoid; scroll-margin-top: 220px;
}
.cd-ent:hover { background: #f4f6fb; }
.cd-ent:target, .cd-ent.is-hit { background: #e8edf9; box-shadow: inset 3px 0 0 var(--cd-blue); }
[dir="rtl"] .cd-ent:target, [dir="rtl"] .cd-ent.is-hit { box-shadow: inset -3px 0 0 var(--cd-blue); }
.cd-ent__code { color: var(--cd-blue); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cd-ent__body { min-width: 0; }
.cd-ent__body p { margin: 0; }
.cd-ent__t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cd-ent__main { font-size: 15px; font-weight: 700; line-height: 1.3; }
.lang-ar .cd-ent__main { font-size: 17px; line-height: 1.5; }
.cd-ent__ar { flex: none; max-width: 55%; font-family: var(--font-ar); font-size: 15px; font-weight: 600; line-height: 1.5; text-align: right; }
.cd-ent__en { font-size: 13.5px; font-style: italic; color: var(--cd-mute); }
.cd-ent__by { margin-top: 2px !important; font-size: 13.5px; }
.lang-ar .cd-ent__by { font-size: 15px; }
.cd-ent__more { font-size: 12.5px; color: var(--cd-mute); }
.cd-ent__meta { font-size: 12.5px; color: var(--cd-soft); }
.lang-ar .cd-ent__meta { font-size: 13.5px; }
.cd-ent__meta .cd-mono { font-size: 11.5px; }
.cd-ent__play { margin-top: 6px !important; }
.cd-cat__none { margin: 24px 0 0; font-size: 16px; font-weight: 700; }

/* ---------- the people ---------- */
.cd-people { margin-top: 88px; }
.cd-people__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.cd-person { margin: 0; }
.cd-person__img { overflow: hidden; aspect-ratio: 9 / 13; border: 1px solid var(--cd-ink); background: #f4f4f2; }
.cd-person__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s ease; }
.cd-person:hover .cd-person__img img { transform: scale(1.02); }
.cd-person figcaption { margin-top: 12px; }
.cd-person__name { display: block; font-size: 19px; font-weight: 700; line-height: 1.25; }
.cd-person__dates { font-weight: 500; color: var(--cd-soft); white-space: nowrap; }
.cd-person__line { display: block; margin-top: 4px; font-size: 14px; color: var(--cd-mute); }
.cd-person__cap { display: block; margin-top: 4px; font-size: 12.5px; color: var(--cd-soft); }
.cd-feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: center; margin: 32px 0 0; }
.cd-feature img { display: block; width: 100%; height: auto; border: 1px solid var(--cd-ink); }
.cd-feature .cd-person__name { font-size: 22px; }
.cd-feature .cd-person__line { font-size: 15px; }

/* ---------- the booklet, on black ---------- */
.cd-booklet { --band: #111111; margin-top: 96px; padding-block: 96px 100px; color: #fff; box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); background: var(--band); }
.cd-booklet__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.cd-booklet .cd-kicker { color: var(--cd-blue-l); }
.cd-booklet h2 { margin: 10px 0 0; font-size: clamp(36px, 4vw, 56px); line-height: 1; font-weight: 700; letter-spacing: -.04em; text-transform: uppercase; }
.lang-ar .cd-booklet h2 { letter-spacing: 0; line-height: 1.3; text-transform: none; }
.cd-booklet__lead { margin: 18px 0 0; color: #d6d6d2; font-size: 17px; }
.cd-chapters { margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .22); }
.cd-chapters li { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.cd-chapters__t { display: block; font-size: 17px; font-weight: 700; line-height: 1.35; }
.cd-chapters__a { display: block; margin-top: 2px; color: #c4c4bf; font-size: 14px; }
.cd-booklet__covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cd-booklet__covers--1 { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
.cd-booklet__covers figure { margin: 0; }
.cd-booklet__covers img { display: block; width: 100%; height: auto; box-shadow: 0 30px 70px rgba(0, 0, 0, .6); }
.cd-booklet__covers figcaption { margin-top: 10px; color: #a6a6a1; font-size: 13px; }
.cd-dl { margin-top: 40px; border: 1px solid rgba(255, 255, 255, .22); }
.cd-booklet__covers + .cd-dl { margin-top: 40px; }
.cd-booklet__side > .cd-dl:first-child { margin-top: 0; }
.cd-dl__head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.cd-dl__head svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--cd-blue-l); stroke-width: 2; }
.cd-dl__head h3 { margin: 0; font-size: 18px; font-weight: 700; }
.cd-dl__head p { margin: 2px 0 0; color: #c4c4bf; font-size: 14px; }
.cd-dl ul { margin: 0; padding: 0; list-style: none; }
.cd-dl a { display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; gap: 16px; align-items: center; min-height: 52px; padding: 8px 22px; border-bottom: 1px solid rgba(255, 255, 255, .1); text-decoration: none; }
.cd-dl li:last-child a { border-bottom: 0; }
.cd-dl a:hover { background: rgba(255, 255, 255, .07); }
.cd-dl__n { font-size: 15px; font-weight: 700; }
.cd-dl__m { color: #a6a6a1; font-size: 13px; font-variant-numeric: tabular-nums; }
.cd-dl a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Grouped downloads retain the booklet section's ruled list and catalogue-blue accent. */
.cd-downloads { margin-top: 40px; scroll-margin-top: 160px; }
.cd-dl--group { margin-top: 24px; }
.cd-dl--group:first-child { margin-top: 0; }
.cd-dl--group .cd-dl__head { align-items: flex-start; }
.cd-dl--group .cd-dl__head svg { margin-top: 3px; }
.cd-dl--group a { min-height: 64px; }
.cd-dl__text, .cd-dl__n, .cd-dl__detail { display: block; }
.cd-dl__text { min-width: 0; }
.cd-dl__detail { margin-top: 3px; color: #c4c4bf; font-size: 13px; font-weight: 400; line-height: 1.6; }
.cd-dl--group .cd-dl__m { white-space: nowrap; }
/* the QR code printed in the box (2026): it brings owners to these downloads */
.cd-dl--qr { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 22px; align-items: center; margin-top: 24px; padding: 20px 22px; }
.cd-dl .cd-dl__qr { display: block; min-height: 0; padding: 8px; border: 0; background: #fff; }
.cd-dl .cd-dl__qr:hover { background: #fff; }
.cd-dl__qr img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.cd-dl__qrtext h3 { margin: 0; font-size: 18px; font-weight: 700; }
.cd-dl__qrtext p { margin: 6px 0 0; color: #c4c4bf; font-size: 14px; line-height: 1.6; }
.cd-dl__qrtext .cd-dl__addr { margin-top: 8px; overflow-wrap: normal; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.lang-ar .cd-dl__qrtext .cd-dl__addr { text-align: right; }
@media (max-width: 760px) { .cd-dl--qr { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 16px; } .cd-dl__qrtext .cd-dl__addr { font-size: 13px; white-space: nowrap; } }
.cd-dl a:focus-visible { outline: 3px solid var(--cd-blue-l); outline-offset: -3px; background: rgba(255, 255, 255, .07); }
@media (max-width: 600px) {
	.cd-dl--group .cd-dl__head { padding: 16px; }
	.cd-dl--group a { grid-template-columns: minmax(0, 1fr) 18px; gap: 4px 12px; padding: 14px 16px; }
	.cd-dl--group .cd-dl__m { grid-column: 1; grid-row: 2; justify-self: start; }
	.cd-dl--group a > svg { grid-column: 2; grid-row: 1 / 3; }
}

/* ---------- the order form, on the section orange ---------- */
.cd-order { --band: var(--sec-bg, #ef6530); margin-top: 96px; padding-block: 72px 80px; box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); background: var(--band); }
.cd-booklet + .cd-order { margin-top: 0; }
.cd-order__form {
	display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; align-items: center; padding: 44px 48px;
	background: #fff; border: 3px solid var(--cd-ink); outline: 1px solid var(--cd-ink); outline-offset: -12px;
}
.cd-order h2 { margin: 8px 0 0; font-size: clamp(34px, 4vw, 56px); line-height: 1; font-weight: 700; letter-spacing: -.04em; text-transform: uppercase; }
.lang-ar .cd-order h2 { letter-spacing: 0; line-height: 1.3; text-transform: none; }
.cd-order__dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); margin: 22px 0 0; border-top: 1px solid var(--cd-ink); font-size: 16px; }
.cd-order__dl dt, .cd-order__dl dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--cd-ink); }
.cd-order__dl dt { font-weight: 800; }
.cd-order__price { font-weight: 800; }
.cd-order__note, .cd-order__rel { margin: 18px 0 0; color: var(--cd-mute); font-size: 14px; }
.cd-order__rel a { color: var(--cd-blue); font-weight: 700; text-underline-offset: 3px; }
.cd-order__cover { display: block; width: 260px; height: 260px; object-fit: cover; border: 1px solid var(--cd-ink); }

/* ---------- the other box sets ---------- */
.cd-more { margin-top: 80px; }
.cd-more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 30px 0 0; padding: 0; list-style: none; }
.cd-more__grid a { display: block; text-decoration: none; }
.cd-more__img { display: block; overflow: hidden; border: 1px solid var(--cd-ink); }
.cd-more__img img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .5s ease; }
.cd-more__grid a:hover img { transform: scale(1.02); }
.cd-more__t { display: block; margin-top: 12px; font-size: 19px; font-weight: 700; line-height: 1.25; }
.cd-more__grid a:hover .cd-more__t { text-decoration: underline; text-underline-offset: 3px; }
.cd-more__m { display: block; margin-top: 4px; color: var(--cd-mute); font-size: 14px; }

/* ---------- narrower screens ---------- */
@media (max-width: 1100px) {
	.cd-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.cd-hero__box { max-width: 560px; }
	.cd-listen__in, .cd-years__grid, .cd-booklet__grid { grid-template-columns: minmax(0, 1fr); }
	.cd-years__grid { align-items: start; }
	.cd-cat__cols { column-count: 2; }
	.cd-people__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.cd-hero { margin-top: 28px; }
	.cd-frame { border-width: 8px; }
	.cd-toc a { grid-template-columns: 22px max-content minmax(0, 1fr) 18px; gap: 10px; }
	.cd-toc__c, .cd-toc__y { display: none; }
	.cd-listen { margin-top: 48px; padding-block: 28px; }
	.cd-years, .cd-people, .cd-cat { margin-top: 56px; }
	.cd-chart { min-width: 640px; }
	.cd-cat__cols { column-count: 1; }
	.cd-people__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.cd-person__name { font-size: 16px; }
	.cd-feature { grid-template-columns: minmax(0, 1fr); }
	.cd-booklet { margin-top: 64px; padding-block: 56px 60px; }
	.cd-order { margin-top: 64px; padding-block: 28px 32px; }
	.cd-order__form { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; outline-offset: -9px; }
	.cd-order__cover { display: none; }
	.cd-order__dl { grid-template-columns: 96px minmax(0, 1fr); font-size: 15px; }
	.cd-more__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.cd-more__grid a { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 14px; align-items: center; }
	.cd-more__img { grid-row: span 2; }
	.cd-more__t { margin-top: 0; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.cd-page .cd-sq, .cd-person__img img, .cd-more__img img { transition: none; }
}

/* recordings not yet in AMAR's collection (the 2026 Ṣāliḥ ‘Abd al-Ḥayy discography): the entry stays, lighter, with a tag */
.cd-ent--missing .cd-ent__main, .cd-ent--missing .cd-ent__ar { color: var(--cd-soft); }
.cd-ent__miss {
	display: inline-block; margin: 6px 0 0; padding: 2px 8px; border: 1px dashed var(--cd-soft); color: var(--cd-soft);
	font-size: 12.5px; font-weight: 700; line-height: 1.4;
}
.lang-ar .cd-ent__miss { font-size: 13.5px; }

/* the leporello, on the booklet's black: each side a long strip that scrolls sideways */
.cd-lepo { margin-top: 64px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .25); }
.cd-lepo__head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 12px 40px; align-items: end; margin-bottom: 24px; }
.cd-lepo__head h3 { margin: 0; color: #fff; font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; line-height: 1.1; }
.cd-lepo__head p { margin: 0; color: #d9d9d9; font-size: 16px; line-height: 1.6; }
.cd-lepo__strip { overflow-x: auto; margin-top: 16px; scrollbar-width: thin; scrollbar-color: #666 transparent; }
.cd-lepo__strip:focus-visible { outline: 3px solid var(--cd-blue-l); outline-offset: 4px; }
.cd-page .cd-lepo__strip img { display: block; width: auto; max-width: none; height: clamp(180px, 22vw, 300px); }
@media (max-width: 760px) {
	.cd-lepo { margin-top: 40px; padding-top: 28px; }
	.cd-lepo__head { grid-template-columns: minmax(0, 1fr); }
	.cd-page .cd-lepo__strip img { height: 170px; }
}

/* responsive QA 2026-11-05 */
@media (min-width: 641px) and (max-width: 1279px), (min-width: 1280px) and (not ((hover: hover) and (pointer: fine))) { .ed-strip.is-stuck .cd-tools > .ed-tools__row--main + .ed-tools__row[aria-label] { flex: 1 1 0; } } /* tablets and touch screens; mouse desktops unchanged */
.cd-chart { padding-inline-end: 14px; }
@media (min-width: 761px) { .cd-chart { min-width: 0; } }
.cd-hero__title:lang(ar) { padding-bottom: .16em; }
.editorial.lang-ar .cd-hero__title:lang(en) { line-height: 1.02; letter-spacing: -.04em; }
.cd-ent__meta .cd-mono, .cd-pick__meta .cd-mono { display: inline-block; max-width: 100%; }