/* Research & documents, one text per page (2026-10-14): design A "the annotated edition" — the text with its notes,
   glossary words and records in the margin, plates, re-set tables, references, cite, the six doors — plus B's black
   shelf of records and strings diagram and C's figures where a text has them. Built by upgrade/content/texts/build.py;
   behaviour in assets/js/texts.js. White ground, ink, the research powder blue in the head. */
body.tx-new { --ground: #fff; --paper: #fff; background: #fff; }
.tx-site .entry-content, .tx-site .panel__body { max-width: none; }
.tx-page {
	--tx-ink: #111; --tx-mute: #4a4d55; --tx-line: #d5d8e0; --tx-navy: #32365f; --tx-blue: #24408e; --tx-gold: #e8c26a; --tx-ochre: #d4ad52;
	--tx-terra: #b84329; --tx-pale: #f3f6fa; --tx-fs: 19px; --tx-mg: 300px; --tx-gap: 56px; --tx-col: 720px;
	color: var(--tx-ink);
}
.lang-ar .tx-page { --tx-fs: 21px; }
.editorial .entry-content .tx-page :is(h2, h3, h4) { color: inherit; margin: 0; text-transform: none; letter-spacing: 0; }
.editorial .entry-content .tx-page p { max-width: none; margin: 0; }
.tx-page a { color: inherit; }
.tx-page [lang="ar"] { font-family: var(--font-ar); letter-spacing: 0; }
.tx-page [lang="en"], .tx-page [lang="fr"] { font-family: var(--font); }
.tx-page .tx-arw { display: inline-block; }
.lang-ar .tx-page .tx-arw { transform: scaleX(-1); }
.lang-ar .tx-page span[lang][dir="ltr"] { white-space: normal; }
.entry-content .tx-page button { min-height: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; border-radius: 0; }
.tx-page :focus-visible { outline: 2px solid var(--tx-blue); outline-offset: 2px; }
svg.tx-i-pause, .is-playing > svg.tx-i-play { display: none; }
.is-playing > svg.tx-i-pause { display: block; }

/* the AMAR player is driven by the page's own buttons (texts.js) */
.tx-audio { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- the head's tools */
.ed-tools.tx-tools { flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.tx-tools .ed-tools__row--main { flex-wrap: wrap; gap: 8px 10px; }
.tx-tool, .tx-seg, .tx-size { height: 40px; border-radius: 999px; border: 1px solid rgba(28, 36, 51, .35); background: rgba(255, 255, 255, .45); color: var(--sec-fg, #1c2433);
	font: 600 14px/1 var(--font); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; }
.lang-ar .tx-tool, .lang-ar .tx-seg, .lang-ar .tx-size { font-family: var(--font-ar); font-size: 15px; }
.tx-tool { padding: 0 16px; }
.tx-tool:hover { border-color: var(--sec-fg, #1c2433); color: var(--sec-fg, #1c2433); }
.tx-tool--ink { background: var(--sec-fg, #1c2433); border-color: var(--sec-fg, #1c2433); color: #fff; }
.tx-tool--ink:hover { background: #32365f; color: #fff; }
.tx-tool svg { width: 12px; height: 12px; fill: currentColor; }
.tx-seg, .tx-size { padding: 3px; gap: 2px; }
.tx-seg__l { font-size: 12.5px; font-weight: 700; padding: 0 8px; }
.lang-ar .tx-seg__l { font-size: 14px; }
.tx-seg button, .tx-size button { height: 32px; min-width: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.tx-seg button[aria-pressed="true"] { background: var(--sec-fg, #1c2433); color: #fff; }
.tx-size button:hover, .tx-seg button:hover { background: rgba(28, 36, 51, .1); }
.tx-seg button[aria-pressed="true"]:hover { background: var(--sec-fg, #1c2433); }
.ed-strip.is-stuck .tx-seg__l { display: none; }

/* every text starts on the head's vertical line (user 2026-10-14); texts.js reads the line's place into --tx-indent */
.tx-page { padding-inline-start: var(--tx-indent, 0px); }

/* ---------------------------------------------------------------- design C (plain texts): the ink opening, a band per chapter */
.tx-open { padding: 44px 0 40px; margin-bottom: 0; }
.tx-open__g { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 52px; align-items: end; }
.tx-open__g:not(:has(.tx-open__img)) { grid-template-columns: minmax(0, 1fr); }
.tx-open__img { margin: 0; }
.tx-open__img img { width: auto; max-width: 100%; height: auto; max-height: 560px; display: block; margin-inline: auto; }
.editorial .entry-content .tx-open blockquote { color: #fff; border: 0; padding: 0; background: none; font-style: normal; margin: 14px 0 0; font-size: clamp(21px, 2.1vw, 29px); line-height: 1.6; font-weight: 600; }
.tx-open blockquote[lang="ar"] { font-family: 'Noto Naskh Arabic', var(--font-ar); line-height: 1.85; }
.tx-open__by { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 24px !important; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .25); font-size: 15px; color: #d0d0d0; }
.tx-open__by b { color: #fff; }
.tx-open__by .tx-fn a { background: rgba(255, 255, 255, .15); color: #fff; }
.tx-open .tx-author { border-top: 0; padding-top: 6px; color: #d0d0d0; }
.tx-open .tx-author b { color: #fff; display: inline; font-size: 15px; }
.tx-open .tx-author span { color: #bdbdbd; margin-inline-start: 8px; }
.tx-open .tx-work { color: var(--tx-ink); margin-top: 18px; max-width: 420px; }
.editorial .entry-content .tx-open .tx-work h4 { color: var(--tx-ink); }
.tx-open .tx-note { color: #d0d0d0; border-color: rgba(255, 255, 255, .3); margin-top: 10px; }
.tx-open .tx-note__n { color: var(--tx-gold); }
.tx-chs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 18px; margin-top: 32px; border-top: 1px solid rgba(255, 255, 255, .25); }
.tx-chs a { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); text-decoration: none; color: #fff; }
.tx-chs a:hover b { text-decoration: underline; }
.tx-chs b { font-size: 15px; line-height: 1.45; font-weight: 700; }
.tx-sw { width: 12px; height: 12px; border-radius: 50%; display: block; }
.tx-sw--blue { background: #a8c5dc; } .tx-sw--ochre { background: #d4ad52; } .tx-sw--ink { background: #fff; } .tx-sw--navy { background: #6b70a8; } .tx-sw--pale { background: #e9f1f8; }
.tx-ch { --c-bg: #e9f1f8; position: relative; background: var(--c-bg); box-shadow: 0 0 0 100vmax var(--c-bg); clip-path: inset(0 -100vmax); padding: 46px 0 50px; margin: 64px 0 18px; color: var(--tx-ink); scroll-margin-top: 140px; }
.tx-ch--blue { --c-bg: #e9f1f8; } .tx-ch--pale { --c-bg: #f4f1e8; }
.tx-ch--ochre { --c-bg: #d4ad52; color: #1f1d16; }
.tx-ch--ink { --c-bg: #111; color: #fff; }
.tx-ch--navy { --c-bg: #32365f; color: #fff; }
.tx-ch__g { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: center; max-width: calc(var(--tx-col) + var(--tx-gap) + var(--tx-mg)); }
.tx-ch__k { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--tx-blue); }
.lang-ar .tx-ch__k { font-size: 14.5px; letter-spacing: 0; }
.tx-ch--ink .tx-ch__k, .tx-ch--navy .tx-ch__k { color: var(--tx-gold); }
.tx-ch--ochre .tx-ch__k { color: #4b4229; }
.editorial .entry-content .tx-ch .tx-ch__t { font-size: clamp(25px, 2.7vw, 36px); line-height: 1.3; font-weight: 700; margin-top: 6px; color: inherit; }
.editorial .entry-content .tx-ch .tx-ch__q { color: inherit; background: none; font-style: normal; margin: 16px 0 0; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.75; padding-inline-start: 16px; border-inline-start: 3px solid currentColor; }
.tx-ch__q[lang="ar"] { font-family: 'Noto Naskh Arabic', var(--font-ar); line-height: 1.95; }
.tx-ch__q::before { content: "“"; } .tx-ch__q::after { content: "”"; }
.tx-ch__q[lang="ar"]::before { content: "«"; } .tx-ch__q[lang="ar"]::after { content: "»"; }
.tx-ch__img { margin: 0; }
.tx-ch__img img { width: 100%; max-height: 380px; object-fit: contain; display: block; background: rgba(0, 0, 0, .06); }
.tx-ch__img a { display: block; cursor: zoom-in; }
.tx-ch__img figcaption { font-size: 13.5px; margin-top: 8px; opacity: .85; line-height: 1.6; }
.tx-ch__g:not(:has(.tx-ch__img)) { grid-template-columns: minmax(0, var(--tx-col)); }
.tx-ch + .tx-row .tx-main > :first-child { margin-top: .4em; }
.tx-fold.is-folded { display: none; }
.tx-foldbox { position: relative; }
.entry-content .tx-page .tx-unfold { margin-top: 18px; height: 44px; padding: 0 20px; border: 1px solid var(--tx-ink); background: #fff; color: var(--tx-ink); font-size: 15px; font-weight: 700; cursor: pointer; }
.entry-content .tx-page .tx-unfold:hover { background: var(--tx-ink); color: #fff; }

/* ---------------------------------------------------------------- the edition: text column + margin */
.tx-ed { padding-top: 8px; }
.tx-ed:has(> .tx-open:first-child) { padding-top: 0; }
.tx-row { display: grid; grid-template-columns: minmax(0, var(--tx-col)) minmax(0, var(--tx-mg)); column-gap: var(--tx-gap); align-items: start; }
.tx-main { min-width: 0; grid-column: 1; }
.tx-mg { grid-column: 2; display: flex; flex-direction: column; gap: 12px; padding-top: .5em; min-width: 0; font-family: var(--font); }
.lang-ar .tx-mg { font-family: var(--font-ar); }
.tx-row--wide .tx-main { grid-column: 1 / -1; }
.editorial .entry-content .tx-ed .tx-main > :is(p, ul, ol, blockquote) { font-size: var(--tx-fs); line-height: 1.85; margin-top: .9em; }
.tx-ed[lang="ar"] .tx-main > :is(p, ul, ol, blockquote), .tx-ed .tx-main > [lang="ar"]:is(p, ul, ol, blockquote) { font-family: 'Noto Naskh Arabic', var(--font-ar); line-height: 2.05; }
.tx-ed[lang="ar"] .tx-main > [lang="en"], .tx-ed[lang="ar"] .tx-main > [lang="fr"] { font-family: var(--font); font-size: calc(var(--tx-fs) - 2px); line-height: 1.75; }
.tx-ed .tx-main > p.tx-c { text-align: center; }
.editorial .entry-content .tx-ed .tx-main > p.tx-s + p.tx-s { margin-top: .2em; }
.tx-ed .tx-main > p.tx-front { font-size: calc(var(--tx-fs) - 3px); color: var(--tx-mute); margin-top: .3em; }
.tx-ed .tx-main > p.tx-front:first-child { font-weight: 700; color: var(--tx-ink); }
.tx-ed .tx-list { padding-inline-start: 1.4em; }
.tx-ed .tx-list li { margin-top: .3em; }
.editorial .entry-content .tx-ed .tx-h2 { font-size: clamp(24px, 2.4vw, 31px); line-height: 1.35; font-weight: 700; border-top: 3px solid var(--tx-ink); padding-top: 14px; margin-top: 64px; scroll-margin-top: 140px; }
.editorial .entry-content .tx-ed .tx-h3 { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.4; font-weight: 700; margin-top: 36px; }
.tx-ed .tx-row--h + .tx-row .tx-main > :first-child { margin-top: .8em; }
.tx-quote { margin: 1em 0 0; padding: 16px 22px; border-inline-start: 4px solid var(--tx-navy); background: var(--tx-pale); }
.tx-quote p { margin: 0; }
.tx-sig { margin-top: 36px; padding-top: 12px; border-top: 1px solid var(--tx-line); font-size: 16px; color: var(--tx-mute); }
.tx-sig p { margin: 0 !important; font-size: 16px !important; line-height: 1.7 !important; }
.tx-sig p:first-child { color: var(--tx-ink); font-weight: 700; }

/* byline, author, contents */
.tx-row--top { padding-bottom: 10px; }
.tx-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 15px; color: var(--tx-mute); padding-bottom: 14px; border-bottom: 1px solid var(--tx-line); }
.tx-byline b { color: var(--tx-ink); }
.tx-tag { display: inline-block; padding: 2px 10px; background: var(--tx-ink); color: #fff; font-size: 13px; font-weight: 700; }
.tx-desc { margin-top: 14px !important; font-size: 18px; line-height: 1.7; color: var(--tx-ink); }
.tx-author { border-top: 3px solid var(--tx-ink); padding-top: 10px; font-size: 14.5px; line-height: 1.7; }
.tx-author b { display: block; font-size: 16px; }
.tx-author span { color: var(--tx-mute); }
.tx-face { margin: 0; }
.tx-face img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; display: block; filter: grayscale(1); }
.tx-toc { border-top: 1px solid var(--tx-ink); padding-top: 8px; }
.tx-toc p { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-blue); }
.lang-ar .tx-toc p { font-size: 14px; letter-spacing: 0; }
.tx-toc ol { list-style: none; margin: 6px 0 0; padding: 0; counter-reset: c; }
.tx-toc li { counter-increment: c; display: grid; grid-template-columns: 20px minmax(0, 1fr); font-size: 14.5px; line-height: 1.45; padding: 5px 0; border-bottom: 1px solid var(--tx-line); }
.tx-toc li::before { content: counter(c); font: 700 12px/1.9 var(--font); color: var(--tx-mute); }
.tx-toc a { text-decoration: none; }
.tx-toc a:hover, .tx-toc a[aria-current="true"] { color: var(--tx-blue); text-decoration: underline; }
.tx-lead { margin: 22px 0 0; }
.tx-row--top { row-gap: 0; }
.tx-lead img { width: auto; max-width: 100%; height: auto; max-height: 760px; display: block; margin-inline: auto; } /* whole, never cropped (user 2026-10-14) */

/* footnote calls and margin notes */
.tx-fn { line-height: 0; }
.tx-fn a { font: 800 12px/1 var(--font); color: var(--tx-blue); background: #e8eef6; border-radius: 4px; padding: 2px 5px; margin: 0 2px; text-decoration: none; vertical-align: super; }
.tx-fn a:hover, .tx-fn a.is-on { background: var(--tx-blue); color: #fff; }
.tx-note { font-size: 14px; line-height: 1.75; color: #2b2d33; padding-inline-start: 12px; border-inline-start: 2px solid var(--tx-line); transition: background .2s, border-color .2s; }
.tx-note__n { font: 800 13px/1 var(--font); color: var(--tx-blue); margin-inline-end: 6px; float: inline-start; padding-top: 4px; }
.tx-note__t a { color: var(--tx-blue); font-weight: 600; overflow-wrap: anywhere; }
.tx-note.is-on { border-inline-start-color: var(--tx-blue); background: var(--tx-pale); }
.tx-note.is-long:not(.is-open) .tx-note__t { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.entry-content .tx-page .tx-note__more { border: 0; background: none; color: var(--tx-blue); font: inherit; font-weight: 700; padding: 0; cursor: pointer; margin-top: 2px; }
.tx-note.is-open .tx-note__more { display: none; }
.tx-page.notes-end .tx-mg .tx-note { display: none; }

/* glossary words */
.entry-content .tx-page .tx-term { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--tx-ochre); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.entry-content .tx-page .tx-term:hover, .entry-content .tx-page .tx-term.is-on { background: #f6e8c4; }
.entry-content .tx-page :is(.op-q, .op-h, .op-s, .op-c) .tx-term:is(:hover, .is-on) { background: rgba(246, 232, 196, .22); }
.tx-gloss { border: 1px solid var(--tx-ochre); border-top-width: 5px; padding: 12px 14px; font-size: 14px; line-height: 1.75; background: #fff; }
.tx-gloss__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tx-gloss__h b { font-size: 21px; font-family: var(--font-ar); }
.tx-gloss__h span { font-size: 13px; color: var(--tx-mute); }
.tx-gloss__l { font-weight: 700; }
.tx-gloss a { display: inline-block; margin-top: 4px; font-weight: 700; color: #6b5317; text-decoration: none; }
.tx-gloss a:hover { text-decoration: underline; }

/* record chips and cards */
.entry-content .tx-page .tx-rec { font: 700 .8em/1.5 var(--font-ar); color: #fff; background: var(--tx-ink); border: 0; border-radius: 999px; padding: 1px 10px 2px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; vertical-align: 1px; }
.entry-content .tx-page .tx-rec i { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent #fff; }
.entry-content .tx-page .tx-rec:hover, .entry-content .tx-page .tx-rec.is-on { background: var(--tx-blue); }
.tx-rcard { background: var(--tx-ink); color: #fff; padding: 16px; text-align: center; }
.tx-rcard__k { font-size: 12.5px; font-weight: 800; color: var(--tx-gold); text-align: start; }
.tx-rcard__disc { width: 150px; height: 150px; border-radius: 50%; margin: 12px auto; overflow: hidden; display: block; box-shadow: 0 0 0 6px #050505; }
.tx-rcard__disc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tx-rcard__disc--blank, .tx-dot { background: radial-gradient(circle, #6b6b6b 0 15%, #0c0c0c 16% 100%); }
.tx-rcard h4 { font-size: 17px; line-height: 1.45; }
.tx-rcard p { font-size: 13.5px; color: #c9c9c9; line-height: 1.7; }
.tx-rcard a { display: block; font-size: 13px; font-weight: 700; margin-top: 10px; color: #fff; }
.tx-rcard__pl, .tx-focus__pl { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 12px; }
.entry-content .tx-page .tx-play { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: var(--tx-ink); display: grid; place-items: center; cursor: pointer; padding: 0; text-decoration: none; }
.entry-content .tx-page .tx-play svg { width: 14px; height: 14px; fill: currentColor; }
.entry-content .tx-page .tx-play--gold { background: var(--tx-gold); width: 52px; height: 52px; }
.entry-content .tx-page .tx-play.is-loading { opacity: .6; }
.tx-bar { height: 3px; background: rgba(255, 255, 255, .22); position: relative; cursor: pointer; }
.tx-bar i { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 0; background: var(--tx-gold); }
.tx-time { font: 600 12.5px/1 var(--font); color: #bdbdbd; font-variant-numeric: tabular-nums; }

/* the dawr study: verses, the work, the voices */
.editorial .entry-content .tx-ed .tx-main > p.tx-verse { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.2em; margin-top: .35em; padding-inline: 4%; }
.tx-ed .tx-main > p.tx-verse span:last-child { text-align: end; }
.tx-ed .tx-h3 + p.tx-verse, .tx-ed .tx-main > p.tx-verse:first-child { margin-top: .8em; }
.tx-work { background: var(--tx-pale); border-top: 3px solid var(--tx-ink); padding: 14px 16px 16px; font-size: 14px; line-height: 1.6; }
.tx-work .tx-rcard__k { color: var(--tx-blue); }
.tx-work .tx-rcard__disc { width: 120px; height: 120px; box-shadow: 0 0 0 5px #111; }
.tx-work h4 { font-size: 18px; text-align: center; }
.tx-work dl { display: grid; grid-template-columns: 92px minmax(0, 1fr); margin: 10px 0 0; border-top: 1px solid var(--tx-line); }
.tx-work dt { color: var(--tx-mute); padding: 6px 0; border-bottom: 1px solid var(--tx-line); font-weight: 700; }
.tx-work dd { margin: 0; padding: 6px 0; border-bottom: 1px solid var(--tx-line); }
.tx-work .tx-rcard__pl { margin-top: 12px; }
.entry-content .tx-page .tx-work .tx-play { background: var(--tx-ink); color: #fff; }
.tx-work .tx-bar { background: rgba(17, 17, 17, .18); }
.tx-work .tx-bar i { background: var(--tx-ink); }
.tx-work .tx-time { color: var(--tx-mute); }
.tx-rcard--voice .tx-rcard__disc { width: 110px; height: 110px; }
.tx-rcard--voice .tx-rcard__disc img { filter: grayscale(1); }


/* margin portraits (Ḥigāzī), the CD card */
.tx-mplate { margin: 0; }
.tx-mplate img { width: 100%; height: auto; display: block; } /* at their own size: the originals are ≤ 400 px */
.tx-mplate a { display: block; cursor: zoom-in; }
.tx-mplate figcaption { font-size: 13.5px; font-weight: 700; margin-top: 6px; color: var(--tx-ink); }
.tx-rcard__disc--sq { border-radius: 0 !important; box-shadow: none !important; }
.tx-rcard__disc--sq img { object-fit: contain; background: #fff; }
.tx-work__go { display: inline-block; margin-top: 12px; font-weight: 700; color: var(--tx-blue); }
.entry-content .tx-page .tx-play--none { background: none; border: 1px dashed var(--tx-line); }

/* Ḥigāzī's tour, station by station */
.tx-tour ol { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; position: relative; }
.tx-stop { position: relative; background: #fff; padding: 14px 14px 16px; border-top: 4px solid var(--tx-navy); }
.tx-stop i { position: absolute; top: -10px; inset-inline-start: 12px; width: 16px; height: 16px; border-radius: 50%; background: var(--tx-navy); box-shadow: 0 0 0 4px var(--tx-pale); }
.tx-stop__d { font-size: 13px; font-weight: 800; color: var(--tx-blue); }
.editorial .entry-content .tx-stop h4 { font-size: 19px; margin: 2px 0 4px; }
.tx-stop > p { font-size: 14px; line-height: 1.7; }
.tx-stop__plays { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tx-stop__plays span { font-size: 12.5px; font-weight: 700; padding: 2px 8px; background: #e9f1f8; }
.tx-stop.is-no { border-top-style: dashed; border-top-color: var(--tx-mute); }
.tx-stop.is-no i { background: #fff; border: 2px dashed var(--tx-mute); }
.tx-stop.is-no .tx-stop__plays span { text-decoration: line-through; background: #eee; }
.tx-stop.is-ill { border-top-color: var(--tx-terra); }
.tx-stop.is-ill i { background: var(--tx-terra); }

/* the songs of his stage, with the CD */
.tx-songs ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tx-ink); }
.tx-songs li { display: grid; grid-template-columns: 40px minmax(0, 1fr) 130px 90px; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--tx-line); }
.entry-content .tx-page .tx-songs .tx-play { background: var(--tx-ink); color: #fff; }
.entry-content .tx-page .tx-songs .tx-play--cd { background: #fff; color: var(--tx-ink); border: 1px solid var(--tx-ink); }
.tx-songs b { font-size: 16.5px; display: block; }
.tx-songs li div span, .tx-songs__cd { font-size: 13.5px; color: var(--tx-mute); }
.tx-songs .tx-bar { background: var(--tx-line); }
.tx-songs .tx-bar i { background: var(--tx-ink); }
.tx-songs__go { display: inline-block; margin-top: 12px; font-weight: 700; color: var(--tx-blue); }

/* «قدّه الميّاس»: the four sides and the moments of the text */
.tx-sd { position: relative; margin: 34px 4px 4px; }
.tx-sd__line { position: relative; height: 10px; background: linear-gradient(to left, #a8c5dc 0 25%, #d4ad52 25% 50%, #32365f 50% 75%, #b84329 75%); }
.tx-sd__m { position: absolute; top: -30px; height: 40px; border-inline-start: 2px solid var(--tx-ink); }
.tx-sd__m.is-span { border-inline-end: 2px solid var(--tx-ink); background: rgba(17, 17, 17, .08); }
.tx-sd__m b { position: absolute; top: -2px; inset-inline-start: 6px; font: 800 12px/1 var(--font); white-space: nowrap; }
.tx-sd__m em { position: absolute; top: 46px; inset-inline-start: -2px; width: 130px; font-style: normal; font-size: 12.5px; line-height: 1.5; color: var(--tx-mute); }
.tx-sd__ruler { position: relative; height: 18px; margin-top: 64px; border-top: 1px solid var(--tx-ink); }
.tx-sd__ruler span { position: absolute; top: 3px; transform: translateX(50%); font: 600 11.5px/1 var(--font); color: var(--tx-mute); }
.tx-sd__sides { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tx-sd__sides li { background: #fff; padding: 10px 12px; border-top: 4px solid #a8c5dc; font-size: 14px; line-height: 1.65; }
.tx-sd__sides li:nth-child(2) { border-top-color: #d4ad52; } .tx-sd__sides li:nth-child(3) { border-top-color: #32365f; } .tx-sd__sides li:nth-child(4) { border-top-color: #b84329; }
.tx-sd__sides b { display: block; font-size: 15px; }


/* the Manyalawi case file: sixteen documents by year */
.tx-case { margin-top: 40px; }
.editorial .entry-content .tx-case h2 { font-size: clamp(25px, 2.6vw, 34px); line-height: 1.3; font-weight: 700; margin-top: 6px; color: #fff; }
.tx-case .tx-shelf__top > p a { color: var(--tx-gold); font-weight: 700; }
.tx-case__line { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 0; margin-top: 30px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.tx-case__y { border-inline-start: 1px solid rgba(255, 255, 255, .22); padding-inline: 16px; }
.tx-case__yr { font: 800 28px/1 var(--font); color: var(--tx-gold); padding-bottom: 12px; }
.tx-case__y ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tx-doc { background: #1d1d1d; padding: 12px; }
.tx-doc__pages { display: flex; gap: 6px; overflow: hidden; }
.tx-doc__pages a { flex: 0 0 auto; display: block; cursor: zoom-in; }
.tx-doc__pages img { width: 64px; height: 90px; object-fit: cover; object-position: top; display: block; background: #fff; }
.tx-doc__pages a:first-child img { width: 92px; height: 128px; }
.tx-doc__k { font-size: 12.5px; font-weight: 800; color: var(--tx-gold); margin-top: 10px !important; }
.editorial .entry-content .tx-doc h4 { font-size: 17px; margin: 2px 0 0; color: #fff; }
.tx-doc__w { font-size: 13px; color: #bdbdbd; }
.tx-doc > p:last-child { font-size: 14px; line-height: 1.65; color: #e3e3e3; margin-top: 6px !important; }
.tx-lb__nav { display: flex; gap: 8px; padding: 0 18px; }


/* Baghdad: the modes board and two centuries of voices */
.tx-fams { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tx-fam { background: #fff; padding: 12px 14px 14px; border-top: 4px solid var(--tx-navy); }
.tx-fam:nth-child(2) { border-top-color: #d4ad52; } .tx-fam:nth-child(3) { border-top-color: #b84329; } .tx-fam:nth-child(4) { border-top-color: #5f6f35; } .tx-fam:nth-child(5) { border-top-color: #a8c5dc; } .tx-fam:nth-child(6) { border-top-color: var(--tx-mute); border-top-style: dashed; }
.editorial .entry-content .tx-fam h4 { font-size: 19px; }
.tx-fam__c { font-size: 12.5px; color: var(--tx-mute); }
.tx-fam__scale { display: block; width: 100%; height: auto; margin-top: 8px; border: 1px solid var(--tx-line); }
.tx-fam__m, .tx-rh > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.tx-mode { display: inline-flex; flex-direction: column; padding: 4px 8px; background: #e9f1f8; line-height: 1.3; }
.tx-mode b { font-size: 13.5px; }
.tx-mode small { font-size: 11px; color: var(--tx-mute); }
.tx-rh { margin-top: 18px; }
.editorial .entry-content .tx-rh h4 { font-size: 15px; font-weight: 800; }
.tx-lives ol { list-style: none; margin: 0; padding: 0; }
.tx-lives li { display: grid; grid-template-columns: 64px 220px minmax(0, 1fr); gap: 12px; align-items: center; padding: 5px 0; border-bottom: 1px solid #dfe6ee; }
.tx-life__face img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top; display: block; filter: grayscale(1); }
.tx-life__face { display: block; cursor: zoom-in; }
.tx-faces { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 28px 20px; align-items: end; }
.tx-faces li { margin: 0; }
.tx-faces a { display: block; cursor: zoom-in; }
.tx-faces img { display: block; width: 100%; height: 280px; object-fit: contain; object-position: bottom; } /* whole, never cropped */
.tx-faces b { display: block; font-size: 14.5px; line-height: 1.3; margin-top: 10px; }
.tx-faces small { font-size: 12.5px; color: var(--tx-mute); }
.tx-life__n b { font-size: 14.5px; display: block; line-height: 1.3; }
.tx-life__n small { font-size: 12px; color: var(--tx-mute); }
.tx-life__t { position: relative; height: 10px; background: repeating-linear-gradient(to right, transparent 0 calc(25 / 220 * 100% - 1px), #dfe6ee calc(25 / 220 * 100% - 1px) calc(25 / 220 * 100%)); }
.tx-life__t i { position: absolute; top: 0; height: 10px; background: var(--tx-navy); border-radius: 5px; }
.tx-life__t i.is-open { background: linear-gradient(to right, var(--tx-navy) 70%, rgba(50, 54, 95, .15)); }
.tx-life__axis { display: grid; grid-template-columns: 64px 220px minmax(0, 1fr); gap: 12px; margin-top: 6px; }
.tx-life__axis span:first-child { grid-column: 1 / 3; }
.tx-life__axis div { position: relative; height: 18px; border-top: 1px solid var(--tx-ink); }
.tx-life__axis div span { position: absolute; top: 4px; transform: translateX(-50%); font: 600 11.5px/1 var(--font); color: var(--tx-mute); }

/* plates, tables, embeds */
.tx-plate { margin: 24px 0 0; }
.tx-plate img { display: block; max-width: min(100%, var(--w, 100%)); width: auto; height: auto; margin-inline: auto; }
.tx-plate a { display: block; cursor: zoom-in; }
.tx-plate--tall img { max-height: min(82vh, 780px); } /* portraits: whole on the screen */
.tx-plate figcaption, .tx-lead figcaption { font-size: 14.5px; color: var(--tx-mute); margin-top: 8px; line-height: 1.7; text-align: center; }
.tx-tablewrap { overflow-x: auto; margin-top: 26px; }
.tx-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.tx-table caption { caption-side: top; text-align: start; font-size: 15px; font-weight: 700; padding-bottom: 10px; }
.tx-table th { text-align: start; font-size: 13.5px; font-weight: 800; color: var(--tx-mute); border-bottom: 2px solid var(--tx-ink); padding: 8px 10px; vertical-align: bottom; }
.tx-table tr:first-child td strong:only-child { color: var(--tx-mute); }
.tx-table td { border-bottom: 1px solid var(--tx-line); padding: 9px 10px; vertical-align: top; }
.tx-table p { margin: 0 !important; font-size: inherit !important; }
.tx-embed { margin: 24px 0 0; }
.tx-embed iframe { width: 100%; border: 0; display: block; }
.tx-embed--video iframe { aspect-ratio: 16 / 9; height: auto; }
.tx-embed--audio iframe { height: 200px; }
.tx-embed--doc .issuuembed { width: 100% !important; aspect-ratio: 5 / 4; height: auto !important; background: var(--tx-pale); }

/* ---------------------------------------------------------------- full-bleed bands */
.tx-band { position: relative; background: var(--tx-ink); color: #fff; box-shadow: 0 0 0 100vmax var(--tx-ink); clip-path: inset(0 -100vmax); padding: 46px 0 56px; margin: 0 0 40px; }
/* a text that opens with its band of records: the band meets the head (user 2026-10-14: no white strip) */
body:has(.tx-shelf, .tx-open) .site-main > .ed-strip { margin-bottom: 0; }
body:has(.tx-shelf, .tx-open) .site-main > .ed-strip + .panel { margin-top: 0 !important; }
body:has(.tx-shelf, .tx-open) .site-main > .ed-strip + .panel > .panel__body { padding-top: 0; }
.tx-kick { font-size: 13px; font-weight: 800; color: var(--tx-gold); }
.editorial .entry-content .tx-shelf h2 { font-size: clamp(25px, 2.6vw, 34px); line-height: 1.3; font-weight: 700; margin-top: 6px; color: #fff; }
.tx-shelf__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 32px; align-items: end; }
.tx-shelf__top > p { font-size: 16px; color: #d0d0d0; line-height: 1.8; }
.tx-discs { display: flex; gap: 18px; margin-top: 28px; overflow-x: auto; padding: 8px 4px 6px; scrollbar-width: thin; }
.entry-content .tx-page .tx-disc { flex: 0 0 128px; background: none; border: 0; padding: 0; color: #fff; cursor: pointer; text-align: center; font: inherit; }
.entry-content .tx-page .tx-disc img { width: 128px; height: 128px; border-radius: 50%; display: block; object-fit: cover; box-shadow: 0 0 0 3px var(--tx-ink), 0 0 0 4px rgba(255, 255, 255, .18); transition: transform .2s; }
.entry-content .tx-page .tx-disc--face img { filter: grayscale(1); }
.entry-content .tx-page .tx-disc:hover img { transform: translateY(-4px); }
.entry-content .tx-page .tx-disc[aria-pressed="true"] img { box-shadow: 0 0 0 3px var(--tx-ink), 0 0 0 6px var(--tx-gold); filter: none; }
.entry-content .tx-page .tx-disc b { display: block; font-size: 14px; line-height: 1.4; margin-top: 10px; }
.entry-content .tx-page .tx-disc span { display: block; font-size: 12.5px; color: #bdbdbd; }
.entry-content .tx-page .tx-disc[aria-pressed="true"] b { color: var(--tx-gold); }
.tx-focus { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 44px; margin-top: 30px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .2); align-items: start; }
.tx-focus[hidden] { display: none; }
.tx-focus__disc { width: 300px; height: 300px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 10px #050505; }
.tx-focus--voice .tx-focus__disc img { filter: grayscale(1); }
.tx-focus__disc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.editorial .entry-content .tx-focus h3 { font-size: clamp(23px, 2.4vw, 32px); line-height: 1.35; font-weight: 700; margin-top: 6px; color: #fff; }
.tx-focus__by { font-size: 16px; color: #d0d0d0; margin-top: 6px !important; }
.tx-facts { display: grid; grid-template-columns: 130px minmax(0, 1fr); margin: 16px 0 0; border-top: 1px solid rgba(255, 255, 255, .2); }
.tx-facts dt { font-size: 13.5px; color: #bdbdbd; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.tx-facts dd { margin: 0; font-size: 15px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.tx-focus__pl { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; margin-top: 18px; padding: 12px 14px; background: #1d1d1d; }
.tx-focus__cd { margin-top: 16px !important; font-weight: 700; }
.tx-focus__cd a { color: var(--tx-gold); }
.tx-says { margin-top: 18px; padding: 16px 18px; background: #fff; color: var(--tx-ink); }
.tx-says > p { font-size: 12.5px; font-weight: 800; color: var(--tx-blue); }
.tx-says blockquote { margin: 4px 0 0; font-family: 'Noto Naskh Arabic', var(--font-ar); font-size: 19px; line-height: 1.95; }
.entry-content .tx-page .tx-goto { border: 0; background: none; padding: 0; margin-top: 6px; font: inherit; font-size: 14px; font-weight: 700; color: var(--tx-blue); cursor: pointer; }
.tx-pas { margin-top: 16px; }
.tx-pas > p { font-size: 12.5px; font-weight: 800; color: var(--tx-gold); margin-bottom: 8px !important; }
.tx-pas > div { display: flex; gap: 4px; }
.tx-pas span { background: #2a2a2a; padding: 8px 10px; font-size: 13px; line-height: 1.5; min-width: 0; }
.tx-pas b { display: block; font-size: 15px; color: var(--tx-gold); }

/* ---------------------------------------------------------------- figures inside the text (C, and B's strings) */
.tx-fig { margin: 34px 0 6px; padding: 22px 24px; background: var(--tx-pale); border-top: 3px solid var(--tx-ink); font-family: var(--font-ar); }
.tx-fig__h { font-size: 15px; font-weight: 800; color: var(--tx-blue); margin-bottom: 14px; }
.tx-who > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 28px; }
.editorial .entry-content .tx-who h4 { font-size: 15px; font-weight: 800; padding-bottom: 8px; border-bottom: 3px solid var(--tx-ink); }
.tx-who ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.tx-who li { padding: 7px 12px; border: 1px solid var(--tx-ink); font-size: 15px; font-weight: 700; line-height: 1.4; background: #fff; }
.tx-who li span { display: block; font-size: 12.5px; font-weight: 500; color: var(--tx-mute); }
.tx-who li.is-q { background: var(--tx-ink); color: #fff; }
.tx-who li.is-q span { color: #c9c9c9; }
.tx-who__ghost li { border-style: dashed; color: #6b6e75; font-weight: 600; background: none; }
.tx-who__ghost p { font-size: 14px; color: var(--tx-mute); margin-top: 14px !important; line-height: 1.8; }
.tx-ouds { background: #fff; border: 1px solid #cfdcea; border-top: 3px solid var(--tx-ink); }
.tx-oud { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid #e3ebf3; }
.tx-oud b { font-size: 16px; display: block; }
.tx-oud span { font-size: 13px; color: var(--tx-mute); display: block; }
.tx-oud .tx-oud__m { font: 700 13px/1.5 var(--font-ar); color: var(--tx-ink); margin-top: 2px; }
.tx-oud__fig { position: relative; height: 80px; }
.tx-oud__body { position: absolute; top: 4px; height: 72px; border-radius: 50%; background: #c9a36b; border: 2px solid #7a5a2c; }
.tx-oud__neck { position: absolute; top: 31px; height: 16px; background: #5b3f1b; border-radius: 3px; }
.tx-oud__str { position: absolute; inset-inline-start: 0; top: 38px; height: 2px; background: var(--tx-ink); }
.tx-oud--q .tx-oud__str { background: var(--tx-terra); height: 3px; }
.tx-oud__neckmark { position: absolute; top: 28px; width: 2px; height: 22px; background: var(--tx-terra); }
.tx-ruler { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; margin-top: 4px; }
.tx-ruler__l { font-size: 12px; color: var(--tx-mute); }
.tx-ruler div { position: relative; height: 22px; border-top: 1px solid var(--tx-ink); }
.tx-ruler div span { position: absolute; top: 4px; transform: translateX(-50%); font: 600 11.5px/1 var(--font); color: var(--tx-mute); }
[dir="rtl"] .tx-ruler div span { transform: translateX(50%); }
.tx-strings { background: #f6efd9; }
.tx-tunes { display: flex; flex-wrap: wrap; gap: 8px; }
.entry-content .tx-page .tx-tunes button { height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--tx-ink); background: #fff; font: 700 14.5px/1 var(--font-ar); cursor: pointer; color: var(--tx-ink); }
.entry-content .tx-page .tx-tunes button[aria-pressed="true"] { background: var(--tx-ink); color: #fff; }
.tx-tune { margin-top: 16px; background: #fff; border: 1px solid #e3d7b3; padding: 12px 18px 18px; }
.tx-tune[hidden] { display: none; }
.tx-str { display: grid; grid-template-columns: 190px minmax(0, 1fr) 70px; gap: 16px; align-items: center; min-height: 44px; border-bottom: 1px solid #efe6cc; }
.tx-str b { font-size: 15.5px; }
.tx-str b small { display: block; font-size: 12.5px; font-weight: 500; color: var(--tx-mute); }
.tx-str__t { position: relative; height: 2px; background: #c8b67c; }
.tx-str__t i { position: absolute; top: -9px; width: 20px; height: 20px; border-radius: 50%; background: var(--tx-ink); margin-inline-start: -10px; transition: inset-inline-start .35s ease; }
.tx-str.is-new .tx-str__t i { background: var(--tx-terra); box-shadow: 0 0 0 4px rgba(184, 67, 41, .2); }
.tx-str.is-new b { color: var(--tx-terra); }
.tx-str.is-off { opacity: .35; }
.tx-str__w { font: 800 15px/1 var(--font); text-align: left; }
.tx-str--scale, .tx-str--range { border: 0; min-height: 0; }
.tx-str--scale .tx-str__t { background: none; height: 18px; margin-top: 6px; }
.tx-str--scale span { position: absolute; transform: translateX(50%); font: 600 11.5px/1 var(--font); color: var(--tx-mute); }
.tx-str--range .tx-str__t { background: none; height: 40px; }
.tx-str--range i { position: absolute; top: 4px; height: 12px; border: 2px solid var(--tx-terra); border-top: 0; margin: 0; width: auto; background: none; border-radius: 0; }
.tx-str--range em { position: absolute; top: 20px; font-style: normal; font-size: 13px; font-weight: 700; color: var(--tx-terra); white-space: nowrap; }
.tx-tune blockquote { margin: 14px 0 0; font-family: 'Noto Naskh Arabic', var(--font-ar); font-size: 18px; line-height: 1.95; }

/* ---------------------------------------------------------------- end matter */
.tx-endm { margin-top: 72px; }
.tx-end { margin-top: 64px; }
.tx-sh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 24px; align-items: end; border-top: 3px solid var(--tx-ink); padding-top: 14px; }
.editorial .entry-content .tx-sh h2 { font-size: clamp(25px, 2.6vw, 34px); line-height: 1.2; font-weight: 700; }
.tx-sh p { font-size: 15.5px; color: var(--tx-mute); }
.tx-sh p a { font-weight: 700; color: var(--tx-ink); }
.tx-recs { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--tx-ink); }
.tx-recs li { display: grid; grid-template-columns: 40px 52px minmax(0, 1fr) 150px auto; gap: 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--tx-line); }
.entry-content .tx-page .tx-recs .tx-play { background: var(--tx-ink); color: #fff; }
.entry-content .tx-page .tx-recs .tx-play--cd { background: #fff; color: var(--tx-ink); border: 1px solid var(--tx-ink); }
.tx-recs img, .tx-recs .tx-dot { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: block; }
.tx-recs b { font-size: 16px; display: block; }
.tx-recs div span, .tx-recs > li > span { font-size: 14px; color: var(--tx-mute); }
.tx-notes { display: none; }
.tx-page.notes-end .tx-notes { display: block; }
.tx-notes ol { list-style: none; margin: 16px 0 0; padding: 0; }
.tx-notes li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px; gap: 4px; font-size: 15.5px; line-height: 1.8; padding: 8px 0; border-bottom: 1px solid var(--tx-line); scroll-margin-top: 160px; }
.tx-notes li b { font: 800 14px/1.9 var(--font); color: var(--tx-blue); }
.tx-notes li:target { background: var(--tx-pale); }
.tx-notes li a { color: var(--tx-blue); overflow-wrap: anywhere; }
.tx-back { text-decoration: none; }
.tx-plates { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 20px; margin-top: 20px; }
.tx-plate--grid { margin: 0; }
.tx-plate--grid img { width: 100%; max-width: none; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--tx-line); }
.tx-plate--grid figcaption { text-align: start; font-size: 13.5px; }
.tx-letters { margin-top: 36px; }
.tx-plates--pages { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tx-plate--page img { aspect-ratio: 786 / 1100; object-fit: cover; object-position: top; }
.tx-refs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px 44px; margin-top: 18px; }
.editorial .entry-content .tx-refs h3 { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.tx-refs ol { list-style: none; margin: 0; padding: 0; }
.tx-refs li { font-size: 14.5px; line-height: 1.75; padding: 7px 0; border-bottom: 1px solid var(--tx-line); overflow-wrap: anywhere; }
.tx-refs [dir="ltr"] { text-align: left; }
.tx-cite { margin-top: 64px; background: var(--tx-pale); padding: 22px 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.editorial .entry-content .tx-cite h2 { font-size: 14px; font-weight: 800; color: var(--tx-blue); }
.tx-cite p { font-size: 15.5px; line-height: 1.8; margin-top: 4px !important; overflow-wrap: anywhere; }
.entry-content .tx-page .tx-cite button { height: 40px; padding: 0 18px; border: 1px solid var(--tx-ink); background: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.entry-content .tx-page .tx-cite button:hover { background: var(--tx-ink); color: #fff; }
.tx-doors { display: flex; gap: 4px; margin-top: 22px; min-height: 280px; }
.tx-door { flex: 1 1 0; min-width: 0; padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.editorial .entry-content .tx-door h3 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.tx-door a { font-size: 15px; font-weight: 600; text-decoration: none; line-height: 1.45; }
.tx-door a:hover { text-decoration: underline; color: inherit; }
.tx-door .tx-door__go { margin-top: auto; font-size: 14px; font-weight: 800; border-top: 1px solid currentColor; padding-top: 10px; }
.tx-door--p { background: #b84329; color: #fff; }
.tx-door--m { background: #32365f; color: #fff; }
.tx-door--w { background: #ef6530; color: #1f140e; }
.tx-door--l { background: #d4ad52; color: #1f1d16; }
.tx-door--c { background: #5f6f35; color: #fff; }
.tx-door--t { background: #a8c5dc; color: #1c2433; }
.tx-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 22px; }
.tx-more__c { text-decoration: none; display: flex; flex-direction: column; gap: 6px; }
.tx-more__c img, .tx-more__blank { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--tx-navy); }
.tx-more__c b { font-size: 19px; line-height: 1.45; }
.tx-more__c span { font-size: 14px; color: var(--tx-mute); }
.tx-more__c:hover b { text-decoration: underline; }

/* the player's own message (busy, refused…) under the button that asked */
.tx-msg { grid-column: 1 / -1; font-size: 13px; color: var(--tx-gold); margin-top: 6px !important; }

/* the image viewer: the picture, an arrow on each side, a close cross (user 2026-10-14) */
.tx-lb { border: 0; padding: 0; background: rgba(12, 12, 12, .96); color: #fff; width: 100vw; height: 100vh; max-width: none; max-height: none; outline: none; display: none; }
.tx-lb[open] { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; }
.tx-lb::backdrop { background: rgba(10, 10, 10, .92); }
.tx-lb figure { margin: 0; grid-column: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; max-height: 100vh; }
.tx-lb img { display: block; max-width: 100%; max-height: calc(100vh - 110px); width: auto; height: auto; }
.tx-lb figcaption { padding: 12px 0 0; font-size: 15px; line-height: 1.6; text-align: center; color: #e6e6e6; max-width: 70ch; }
.tx-lb button { appearance: none; border: 0; background: none; color: #fff; cursor: pointer; padding: 0; outline: none; box-shadow: none; }
.tx-lb button:focus-visible { outline: 1px solid rgba(255, 255, 255, .6); outline-offset: 4px; border-radius: 50%; }
.tx-lb__a { width: 48px; height: 48px; justify-self: center; opacity: .8; }
.tx-lb__a:hover { opacity: 1; }
.tx-lb__a svg { width: 34px; height: 34px; display: block; margin: auto; }
.tx-lb__a--prev { grid-column: 1; grid-row: 1; }
.tx-lb__a--next { grid-column: 3; grid-row: 1; }
.tx-lb__a--next svg { transform: scaleX(-1); }
[dir="rtl"] .tx-lb__a--prev svg, .lang-ar .tx-lb__a--prev svg { transform: scaleX(-1); }
[dir="rtl"] .tx-lb__a--next svg, .lang-ar .tx-lb__a--next svg { transform: none; }
.tx-lb__x { position: fixed; top: 14px; inset-inline-end: 18px; width: 40px; height: 40px; font-size: 0; opacity: .8; }
.tx-lb__x::before, .tx-lb__x::after { content: ""; position: absolute; top: 19px; left: 8px; width: 24px; height: 2px; background: #fff; transform: rotate(45deg); }
.tx-lb__x::after { transform: rotate(-45deg); }
.tx-lb__x:hover { opacity: 1; }
@media (max-width: 640px) { .tx-lb[open] { grid-template-columns: 40px minmax(0, 1fr) 40px; } .tx-lb__a svg { width: 26px; height: 26px; } }

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1199px) {
	.tx-page { --tx-mg: 260px; --tx-gap: 40px; }
	.tx-focus { grid-template-columns: 220px minmax(0, 1fr); }
	.tx-focus__disc { width: 220px; height: 220px; }
	.tx-doors { flex-wrap: wrap; }
	.tx-door { flex: 1 1 30%; min-height: 200px; }
}
@media (max-width: 900px) {
	.tx-open__g, .tx-ch__g { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.tx-ch { padding: 32px 0 34px; margin-top: 44px; }
	.tx-row { grid-template-columns: minmax(0, 1fr); }
	.tx-mg { grid-column: 1; padding-top: 0; gap: 8px; }
	.tx-mg:empty { display: none; }
	.tx-mg > .tx-note, .tx-mg > .tx-gloss, .tx-mg > .tx-rcard { display: none; margin-top: 10px; }
	.tx-mg > .tx-mplate { display: flex; gap: 12px; align-items: end; margin-top: 12px; }
	.tx-mg > .tx-mplate img { width: 110px; }
	.tx-page .tx-mg > .tx-note.is-on { display: block; }
	.tx-mg > .tx-gloss.is-on, .tx-mg > .tx-rcard.is-on, .tx-mg > .tx-rcard--voice { display: block; }
	.tx-mg > .tx-rcard--voice, .tx-work { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; align-items: center; text-align: start; margin-top: 12px; }
	.tx-mg > .tx-rcard--voice .tx-rcard__k, .tx-work .tx-rcard__k, .tx-work dl, .tx-rcard--voice .tx-rcard__pl, .tx-work .tx-rcard__pl { grid-column: 1 / -1; }
	.tx-rcard--voice .tx-rcard__disc, .tx-work .tx-rcard__disc { width: 76px; height: 76px; margin: 6px 0; grid-row: span 2; }
	.tx-rcard--voice h4, .tx-work h4 { text-align: start; }
	.editorial .entry-content .tx-ed .tx-main > p.tx-verse { grid-template-columns: minmax(0, 1fr); padding-inline: 0; row-gap: 0; }
	.tx-ed .tx-main > p.tx-verse span:last-child { text-align: start; padding-inline-start: 1.5em; }
	.tx-row--top .tx-mg { margin-top: 18px; }
	.tx-face img { width: 84px; height: 84px; }
	.tx-notes { display: block; }
	.tx-shelf__top, .tx-focus, .tx-sh, .tx-who > div { grid-template-columns: minmax(0, 1fr); }
	.tx-focus__disc { width: 200px; height: 200px; margin: 0 auto; }
	.tx-recs li { grid-template-columns: 40px 44px minmax(0, 1fr); row-gap: 2px; }
	.tx-recs li > span, .tx-recs li > .tx-goto { grid-column: 3; }
	.tx-more { grid-template-columns: minmax(0, 1fr); }
	.tx-cite { grid-template-columns: minmax(0, 1fr); }
	.tx-oud, .tx-ruler { grid-template-columns: 120px minmax(0, 1fr); }
	.tx-str { grid-template-columns: 120px minmax(0, 1fr) 54px; gap: 10px; }
}
@media (min-width: 641px) and (max-width: 900px) {
	/* the photo and its player stay on one row on tablets (user 2026-10-14) */
	.tx-row--lead { grid-template-columns: minmax(0, 1fr) 250px; column-gap: 24px; }
	.tx-row--lead > .tx-mg { grid-column: 2; }
	.tx-row--lead .tx-mg > :is(.tx-work, .tx-rcard) { display: block; text-align: center; margin-top: 0; }
	.tx-row--lead .tx-mg :is(.tx-work, .tx-rcard) .tx-rcard__disc { width: 110px; height: 110px; margin: 10px auto; }
	.tx-row--lead .tx-mg :is(.tx-work, .tx-rcard) h4 { text-align: center; }
	.tx-focus { grid-template-columns: 180px minmax(0, 1fr); gap: 24px; }
	.tx-focus__disc { width: 180px; height: 180px; margin: 0; }
}
@media (max-width: 640px) {
	.tx-lives li, .tx-life__axis { grid-template-columns: 36px 130px minmax(0, 1fr); gap: 8px; }
	.tx-life__face img { width: 36px; height: 36px; }
	.tx-faces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
	.tx-faces img { height: 200px; }
	.tx-songs li { grid-template-columns: 40px minmax(0, 1fr); }
	.tx-songs li > :nth-child(3), .tx-songs li > :nth-child(4) { grid-column: 2; }
	.tx-sd__sides { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.tx-sd__m em { display: none; }
	.tx-page, .lang-ar .tx-page { --tx-fs: 18px; }
	.lang-ar .tx-page { --tx-fs: 19px; }
	.tx-tools .ed-tools__row--main { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.tx-tools .ed-tools__row--main::-webkit-scrollbar { display: none; }
	.tx-size { display: none; }
	.tx-band { padding: 30px 0 36px; }
	.entry-content .tx-page .tx-disc { flex-basis: 96px; }
	.entry-content .tx-page .tx-disc img { width: 96px; height: 96px; }
	.tx-fig { padding: 16px 14px; margin-inline: -4px; }
	.tx-oud, .tx-ruler { grid-template-columns: minmax(0, 1fr); }
	.tx-oud__fig { height: 70px; }
	.tx-ruler__l { display: none; }
	.tx-str { grid-template-columns: 96px minmax(0, 1fr) 46px; }
	.tx-str b { font-size: 14px; }
	.tx-doors { flex-direction: column; min-height: 0; }
	.tx-door { flex: none; min-height: 0; }
	.tx-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.tx-pas > div { flex-direction: column; }
	.tx-pas span { flex: none !important; }
}
@media print {
	.tx-tools, .tx-shelf, .tx-doorsec, #more, .entry-content .tx-page .tx-cite button, .tx-mg > .tx-gloss, .tx-mg > .tx-rcard { display: none !important; }
	.tx-notes { display: block !important; }
}

/* ---------------------------------------------------------------- drawn tops (content/texts/openings.py, user 2026-10-15) */
body:has([data-op]) .site-main > .ed-strip { margin-bottom: 0 !important; }
body:has([data-op]) .site-main > .ed-strip + .panel { margin-top: 0 !important; }
body:has([data-op]) .site-main > .ed-strip + .panel > .panel__body { padding-top: 0; }
.tx-ed:has(> [data-op]:first-child) { padding-top: 0; }
[data-op] { position: relative; color: #fff; clip-path: inset(0 -100vmax); margin: 0 0 48px; }
[data-op] .tx-byline { color: rgba(255, 255, 255, .78); border-bottom: 0; border-top: 1px solid rgba(255, 255, 255, .25); padding: 14px 0 0; margin-top: 22px; }
[data-op] .tx-byline b { color: #fff; }
[data-op] .tx-tag { background: #fff; color: var(--tx-ink); }
.editorial .entry-content [data-op] blockquote { margin: 0; padding: 0; border: 0; background: none; color: #fff; font-style: normal; }
.editorial .entry-content [data-op] p.op-k { font: 700 14px/1.4 var(--font-ar); letter-spacing: 0; color: var(--tx-gold); margin-bottom: 14px; }
[data-op] img { display: block; height: auto; }
/* al-Qaṣabgī: the record — black, his photograph with the ʿūd, ʿAbd al-Wahhāb's words, the Odeon card */
.tx-page .tx-open.op-q { margin-bottom: 0; }
.op-q, .tx-page .tx-open.op-q { padding-block: 44px 50px; }
.op-q { background: #0d0d0d; box-shadow: 0 0 0 100vmax #0d0d0d; padding: 44px 0 50px; }
.op-q__g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 3fr); gap: 44px; align-items: center; }
.op-q__ph { margin: 0; }
.op-q__ph img { width: 100%; max-height: 500px; object-fit: contain; }
.editorial .entry-content .op-q__q p { font: 600 clamp(26px, 2.4vw, 36px)/1.6 'Noto Naskh Arabic', var(--font-ar); color: #fff; }
.op-q__q footer { margin-top: 12px; font-size: 15px; color: #c9c9c9; }
.op-q__rec .tx-rcard { box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }
/* Ḥigāzī: the playbill — deep red, a gold frame, his title as the headline */
.op-h, .tx-page .tx-open.op-h { padding-block: 40px 46px; }
.tx-page .tx-open.op-h { margin-bottom: 0; }
.op-h { background: #6e1a1a; box-shadow: 0 0 0 100vmax #6e1a1a; padding: 40px 0 46px; }
.op-h__bill { max-width: 760px; margin: 0 auto; text-align: center; padding: 34px 40px 36px; border: 4px double #d9ad57; outline: 1px solid rgba(217, 173, 87, .45); outline-offset: 8px; }
.editorial .entry-content .op-h p.op-h__top { font: 700 14px/1.4 var(--font-ar); color: #e9c97f; letter-spacing: 0; }
.editorial .entry-content .op-h h2.op-h__h { font: 700 clamp(30px, 3.4vw, 48px)/1.35 'Noto Naskh Arabic', var(--font-ar); color: #f6e3b4; margin: 14px 0 22px; padding: 14px 0; border-top: 1px solid rgba(217, 173, 87, .6); border-bottom: 1px solid rgba(217, 173, 87, .6); }
.op-h__ph { margin: 0 auto; width: fit-content; }
.op-h__ph img { max-height: 380px; width: auto; border-radius: 50% / 46%; box-shadow: 0 0 0 4px #d9ad57, 0 0 0 10px rgba(217, 173, 87, .25); }
.editorial .entry-content .op-h p.op-h__s { font: 500 19px/1.8 var(--font-ar); color: #fbefd3; margin: 26px auto 0; max-width: 560px; }
.op-h .tx-byline { justify-content: center; }
.op-h__cd { max-width: 420px; margin: 22px auto 0; text-align: start; }
/* Bilād al-Shām: the photograph — the three musicians large, an olive band */
.op-s, .tx-page .tx-open.op-s { padding-block: 40px 46px; }
.tx-page .tx-open.op-s { margin-bottom: 0; }
.op-s { background: #3f4a24; box-shadow: 0 0 0 100vmax #3f4a24; padding: 40px 0 46px; }
.op-s__g { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 52px; align-items: center; }
.op-s__ph { margin: 0; }
.op-s__ph img { width: 100%; max-height: 560px; object-fit: contain; box-shadow: 0 0 0 8px rgba(255, 255, 255, .08); }
.editorial .entry-content .op-s p.op-k { color: #d9e1a7; }
.editorial .entry-content .op-s__q p { font: 600 clamp(25px, 2.3vw, 34px)/1.7 'Noto Naskh Arabic', var(--font-ar); color: #fff; }
.editorial .entry-content .op-s p.op-s__c { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.op-s__c span { padding: 4px 14px; border: 1px solid rgba(217, 225, 167, .7); border-radius: 999px; font-size: 15px; color: #eef3c9; }
@media (max-width: 1199px) {
	.op-q__g { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.op-q__rec { grid-column: 1 / -1; max-width: 420px; }
}
@media (max-width: 900px) {
	.op-q__g, .op-s__g { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.op-q__ph img, .op-s__ph img { max-height: 420px; }
	.op-h__bill { padding: 24px 18px 26px; }
}
/* the Manyalawi case: the case file — the first letter large on the ink of the case file below, a typed stamp */
.op-c, .tx-page .tx-open.op-c { padding-block: 48px 40px; }
.op-c { background: var(--tx-ink); box-shadow: 0 0 0 100vmax var(--tx-ink); padding: 48px 0 40px; margin-bottom: 0; }
.op-c + * .tx-case, .op-c ~ .tx-row--wide .tx-case { margin-top: 0; }
.op-c__g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.op-c__ph { margin: 0; position: relative; padding: 0 0 26px 26px; }
.lang-ar .op-c__ph { padding: 0 26px 26px 0; }
.op-c__ph img { width: 100%; max-height: 560px; object-fit: contain; background: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.op-c__ph > a { position: relative; z-index: 1; display: block; cursor: zoom-in; }
.op-c__back { position: absolute; inset: 26px 0 0 26px; transform: rotate(3deg); opacity: .55; }
.lang-ar .op-c__back { inset: 26px 26px 0 0; transform: rotate(-3deg); }
.op-c__back img { height: 100%; width: 100%; object-fit: cover; object-position: top; }
.op-c__ph figcaption { position: relative; z-index: 1; margin-top: 12px; font: 13px/1.4 'Courier New', monospace; color: #c9c9c9; }
.lang-ar .op-c__ph figcaption { font-family: var(--font-ar); }
.editorial .entry-content .op-c p.op-c__stamp { display: inline-block; font: 700 22px/1 'Courier New', monospace; letter-spacing: .18em; text-transform: uppercase; color: #e05a47; border: 3px solid #e05a47; padding: 8px 14px 7px; transform: rotate(-3deg); }
.lang-ar .op-c p.op-c__stamp { font-family: var(--font-ar); letter-spacing: 0; }
.editorial .entry-content .op-c p.op-c__who { margin-top: 22px; font-size: 15px; color: #c9c9c9; display: flex; flex-direction: column; gap: 4px; }
.op-c__who b { font-size: clamp(22px, 2vw, 30px); line-height: 1.25; color: #fff; }
.op-c__row { display: block; margin-top: 20px; }
.editorial .entry-content .op-c p.op-c__intro { font: 17.5px/1.75 'Courier New', monospace; color: #ececec; }
.lang-ar .editorial .entry-content .op-c p.op-c__intro, .lang-ar .op-c p.op-c__intro { font-family: var(--font-ar); font-size: 19px; line-height: 1.9; }
.op-c__row .tx-mg { margin-top: 10px; color: var(--tx-ink); }
.editorial .entry-content .op-c p.op-c__go { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 24px; }
.op-c__go a { color: #fff; font-weight: 700; font-size: 15px; }
.op-c__go a.op-c__open { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--tx-gold); color: var(--tx-ink); text-decoration: none; }
.op-c__go a.op-c__open:hover { background: #fff; }
@media (max-width: 900px) {
	.op-c__g { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.op-c__ph img { max-height: 420px; }
}
/* no white strip under the head on any text page that opens on a band (user 2026-10-15: "go through all the posts");
   the head's own rules are more specific, so these win with !important */
body:has(.tx-shelf, .tx-open, .am-open, .bg-hero, [data-op]) .site-main > .ed-strip { margin-bottom: 0 !important; }
body:has(.tx-shelf, .tx-open, .am-open, .bg-hero, [data-op]) .site-main > .ed-strip + .panel { margin-top: 0 !important; }
body:has(.tx-shelf, .tx-open, .am-open, .bg-hero, [data-op]) .site-main > .ed-strip + .panel > .panel__body { padding-top: 0 !important; }
/* the case-file top runs straight into the case file (no white line between the two inks) */
.op-c + .tx-row { margin-top: 0 !important; }
.op-c + .tx-row .tx-case { margin-top: 0 !important; }
.op-c__ph { padding-bottom: 44px; }
.op-c__ph figcaption { margin-top: 22px; }
.tx-open.op-c { margin-bottom: 0 !important; }

/* responsive QA 2026-11-05 (قدّه الميّاس timeline diagram): labels sit above the marker lines; captions on two rows from 641px
   (they printed over each other); phones keep no room for the hidden captions */
.tx-sd__m b { z-index: 1; background: var(--tx-pale); padding-inline-end: 3px; }
@media (min-width: 641px) { .tx-sd__m:nth-child(even) em { top: 88px; } .tx-sd__ruler { margin-top: 100px; } }
@media (max-width: 640px) { .tx-sd__ruler { margin-top: 26px; } }
.lang-ar .tx-arw { display: inline-block; transform: scaleX(-1); } /* the cite box link arrow points the reading way */
/* the last moment's caption hangs inward from its tick (it left the box: sideways scroll at 641-760px) */
@media (min-width: 641px) { .tx-sd__m:last-child em { inset-inline-start: auto; inset-inline-end: -2px; width: 110px; text-align: end; } }
@media (min-width: 641px) and (max-width: 900px) { .tx-more { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .tx-more__c b { font-size: 16px; } } /* Keep reading: three cards a row on portrait tablets */

/* responsive QA 2026-11-05, polish */
@media (pointer: coarse) { .tx-door a:not(.tx-door__go) { padding-block: 3px; margin-block: -3px; } }