Fonts, one rule: the interface is always Naskh (menus, forms, paths, footer, moderation); the reading font only for the literature (verses, prose, titles, contents, intros, excerpts, the editor). The radif line no longer overlaps the buttons above it

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/pages/[...path].astro

@@ -113,7 +113,7 @@ import TagsBox from '../components/TagsBox.astro';
 
   {page.type === 'poet' && (
     <>
-      <h1 data-readable>{page.poet.name}</h1>
+      <h1 class="lit" data-readable>{page.poet.name}</h1>
       <div class="center"><button type="button" class="save" data-save={JSON.stringify({ kind: 'poet', poetId })} aria-pressed={String(!!saved.poet)} title="یہ شاعر محفوظ کریں">{label(saved.poet)}</button><button type="button" class="icon-btn small" data-reading-toggle title="مطالعے کا انداز: صرف متن" aria-label="مطالعے کا انداز"><Icon name="dict" size={17} /></button>{arrange && <> <form method="post" action={`/mod/order/${page.category.id}`} class="inline-form"><button class="mod-edit-btn"><Icon name="arrange" size={17} /> ترتیب دیں</button></form>
         <a class="icon-btn small" href={`/mod/order/${page.category.id}`} title="ترتیب کا تاریخچہ" aria-label="ترتیب کا تاریخچہ"><Icon name="history" size={17} /></a></>}{tagCan && <> <form method="post" action={`/mod/tags/${tagTarget}`} class="inline-form"><button class="mod-edit-btn"><Icon name="tag" size={17} /> ٹیگ</button></form></>}</div>
       <p class="muted">{years(page.poet)}</p>
@@ -122,7 +122,7 @@ import TagsBox from '../components/TagsBox.astro';
   )}
   {page.type === 'category' && (
     <>
-      <h1 data-readable>{page.category.title}</h1>
+      <h1 class="lit" data-readable>{page.category.title}</h1>
       <div class="center"><button type="button" class="save" data-save={JSON.stringify({ kind: 'category', categoryId: page.category.id })} aria-pressed={String(!!saved.category)} title="یہ کتاب یا باب محفوظ کریں">{label(saved.category)}</button><button type="button" class="icon-btn small" data-reading-toggle title="مطالعے کا انداز: صرف متن" aria-label="مطالعے کا انداز"><Icon name="dict" size={17} /></button>{arrange && <> <form method="post" action={`/mod/order/${page.category.id}`} class="inline-form"><button class="mod-edit-btn"><Icon name="arrange" size={17} /> ترتیب دیں</button></form>
         <a class="icon-btn small" href={`/mod/order/${page.category.id}`} title="ترتیب کا تاریخچہ" aria-label="ترتیب کا تاریخچہ"><Icon name="history" size={17} /></a></>}{tagCan && <> <form method="post" action={`/mod/tags/${tagTarget}`} class="inline-form"><button class="mod-edit-btn"><Icon name="tag" size={17} /> ٹیگ</button></form></>}</div>
     </>
@@ -147,7 +147,7 @@ import TagsBox from '../components/TagsBox.astro';
   {page.type === 'poem' && (
     <>
       <article class="work" data-readable>
-      <h1><Seg s={show(page.poem.title)} /></h1>
+      <h1 class="lit"><Seg s={show(page.poem.title)} /></h1>
       <p class="byline">{page.poet.nickname}</p>
       {re && (
         <p class="hl-note muted">

web/src/pages/ebook/[id].astro

@@ -23,7 +23,7 @@ import Icon from '../../components/Icon.astro';
 <Base title={`${b.title} · ${b.poet}`} author={b.poet} ogType="book" description={`${b.title}: ${b.poet}${b.coauthors.length ? '، ' + b.coauthors.map((c: any) => c.name).join('، ') : ''} کی کتاب، ${KIND[b.kind]} میں`}
   jsonld={{ '@context': 'https://schema.org', '@type': 'Book', name: b.title, inLanguage: 'ur', author: [b.poet, ...b.coauthors.map((c: any) => c.name)].map((name) => ({ '@type': 'Person', name })) }}>
   <nav class="crumbs"><a href={b.poet_url}>{b.poet}</a> » <a href={`${b.poet_url}/ebooks?kind=${b.kind}`}>ای بکس</a></nav>
-  <h1>{b.title}</h1>
+  <h1 class="lit">{b.title}</h1>
   {!b.published && <p class="form-error center">یہ کتاب ابھی جائزے میں ہے؛ صرف موڈریٹر دیکھ سکتے ہیں۔</p>}
   <p class="center muted">
     {KIND[b.kind]}{mb && <> · {mb}</>}{b.source && <> · ماخذ: {b.source}</>}{b.licence && <> · {b.licence}</>}

web/src/styles/global.css

@@ -67,7 +67,11 @@
 :root:not(.nastaliq) body { font-weight: var(--naskh-weight, 400); }
 /* text size from the display settings: everything is in rem, so the whole page scales (90%-150%) */
 html { font-size: var(--text-size, 100%); }
-body { margin: 0; background: var(--surface-page); color: var(--text); font-family: var(--font); line-height: 1.9; }
+body { margin: 0; background: var(--surface-page); color: var(--text); font-family: var(--font-ui); line-height: 1.9; }
+/* The rule: the interface (menus, buttons, forms, paths, footers, admin and moderation) is always Naskh, compact and
+   calm; the reading font (Naskh or Nastaliq, the reader's choice) is only for the literature: verses and prose, work,
+   book and poet titles, contents lists, intros, excerpts, the editor and its preview. */
+.lit, .poem, .preview, .snippet, .intro, .toc, .lib-couplet, .ebook-text, .dv-editor, .masthead-text, .radif-head { font-family: var(--font); }
 :where(a) { color: var(--link); text-decoration: none; }
 :where(a):hover { color: var(--active); }
 .wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }
@@ -185,7 +189,7 @@ h1::after { content: ''; display: block; width: 140px; height: 2px; background:
 .couplet p { margin: 0; width: fit-content; max-width: 100%; justify-self: end; text-align: center; }
 .couplet[data-mark]::before { content: attr(data-mark); grid-column: 1 / -1; justify-self: center; font-size: .72rem; line-height: 1.6; color: var(--brand); border: 1px solid var(--line); border-radius: 999px; padding: 0 10px; margin-bottom: 2px; }
 .takhallus { color: var(--brand); }
-.radif { text-align: center; margin-top: -6px; }
+.radif { text-align: center; margin-top: 8px; }
 .radif-head { text-align: center; font-size: 1.05rem; color: var(--brand); margin: 22px 0 4px; }
 .couplet p + p { justify-self: start; }
 .couplet::after { content: '✤'; grid-column: 1 / -1; text-align: center; color: var(--brand); font-size: .72rem; opacity: .75; line-height: 1.2; }