Add articles list and detail screens

Enriched the 4 articles in data.js with id, doctorId, hero color,
emoji, date, lede, and structured body blocks (paragraphs, headings,
bullet lists, tone-variant callouts).

New screens:
- ArticlesScreen — tag-filtered list with hero-card layout
- ArticleDetailScreen — hero block, meta row, lede, body renderer
  (p/h/ul/callout), author card linking to doctor profile, CTA to
  book the author, and "Related" footer

Home card and feed sections now link to detail and list screens.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/screens/screens-home.jsx

@@ -118,14 +118,15 @@ export function HomeCardsScreen({ nav }) {
         <SectionHeader title="Статьи врачей" action="Все" onAction={() => nav.push('articles')} />
         <div style={{ display: 'flex', gap: 12, overflowX: 'auto', padding: '0 20px 8px' }} className="noscroll">
           {articles.map((a, i) => (
-            <button key={i} className="press card" style={{
+            <button key={a.id} onClick={() => nav.push('article:' + a.id)} className="press card" style={{
               flexShrink: 0, width: 220, padding: 0, overflow: 'hidden', textAlign: 'left',
             }}>
               <div style={{
-                height: 90, background: ['#F5EDDF','#E3F4F2','#FDF8E6','#FCF1F0'][i % 4],
-                display: 'flex', alignItems: 'flex-end', padding: 12,
+                height: 90, background: a.hero || ['#F5EDDF','#E3F4F2','#FDF8E6','#FCF1F0'][i % 4],
+                display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', padding: 12,
               }}>
                 <span className="chip chip-warm" style={{ background: 'rgba(255,255,255,0.85)' }}>{a.tag}</span>
+                <span style={{ fontSize: 28, lineHeight: 1 }}>{a.emoji}</span>
               </div>
               <div style={{ padding: 12 }}>
                 <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--c-fg-1)', lineHeight: 1.3, marginBottom: 6, minHeight: 34 }}>{a.title}</div>
@@ -273,12 +274,12 @@ export function HomeFeedScreen({ nav }) {
       </div>
 
       <div style={{ padding: '18px 20px 8px' }}>
-        <SectionHeader title="Полезно прочитать" pad="0 0 0 0" />
+        <SectionHeader title="Полезно прочитать" action="Все" onAction={() => nav.push('articles')} pad="0 0 0 0" />
         <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-          {articles.slice(0,3).map((a,i)=>(
-            <button key={i} className="press card" style={{ display: 'flex', gap: 12, alignItems: 'center', padding: 14, textAlign: 'left' }}>
-              <div style={{ width: 56, height: 56, borderRadius: 12, background: ['#F5EDDF','#E3F4F2','#FDF8E6'][i%3], flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24 }}>
-                {['📖','👂','🤱'][i%3]}
+          {articles.slice(0,3).map((a)=>(
+            <button key={a.id} onClick={() => nav.push('article:' + a.id)} className="press card" style={{ display: 'flex', gap: 12, alignItems: 'center', padding: 14, textAlign: 'left' }}>
+              <div style={{ width: 56, height: 56, borderRadius: 12, background: a.hero, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28 }}>
+                {a.emoji}
               </div>
               <div style={{ flex: 1 }}>
                 <div style={{ fontSize: 11, color: 'var(--c-primary-dark)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: .5, marginBottom: 3 }}>{a.tag}</div>