feat(design): добавлен характер — hero, цветные миры, карточки с акцентами

- Hero на главной: большой заголовок в градиенте, мистический тэглайн,
  мета-плашка «N миров / N публикаций / N лет онлайн»
- Декоративный фон: звёздная россыпь + радиальные градиенты акцента
  (CSS-only, без картинок)
- Карточки постов с цветовой полосой по категории + hover-эффект
- Цветные теги категорий с glow-точкой
- «Миры и проекты» вместо «Форумы»: 8 карточек с тэгом, названием,
  описанием каждой вселенной и цветовой кодировкой
- Single post: буквица в первом абзаце, центрированный заголовок
  в градиенте, тег категории сверху
- BrandMark SVG (две зеркальные арки) + липкая шапка с blur
- Cormorant Garamond вместо Lora — больше серифной выразительности
- CATEGORY_COLORS в consts.ts (расширяемая палитра)
- Mobile-адаптация (clamp заголовки, перенос меты, уменьшенные паддинги)

src/components/BrandMark.astro

@@ -0,0 +1,16 @@
+---
+// Декоративный логотип: две зеркальные арки — «иные отражения».
+const { size = 32 } = Astro.props;
+---
+<svg class="brand-mark" width={size} height={size} viewBox="0 0 64 64" fill="none" aria-hidden="true">
+  <defs>
+    <linearGradient id="bm-grad" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#b794ff" />
+      <stop offset="1" stop-color="#6c4ed4" />
+    </linearGradient>
+  </defs>
+  <circle cx="32" cy="32" r="29" stroke="url(#bm-grad)" stroke-width="1.5" opacity="0.45" />
+  <path d="M16 40 Q32 18 48 40" stroke="url(#bm-grad)" stroke-width="2" stroke-linecap="round" fill="none" />
+  <path d="M16 28 Q32 50 48 28" stroke="url(#bm-grad)" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.6" />
+  <circle cx="32" cy="34" r="2" fill="#b794ff" />
+</svg>

src/consts.ts

@@ -3,6 +3,9 @@ export const SITE_DESCRIPTION = 'Ролевой проект по совреме
 export const SITE_URL = 'https://anotherreflections.ru';
 export const SITE_AUTHOR = 'Иные Отражения';
 export const SITE_LANG = 'ru-RU';
+export const SITE_FOUNDED = 2006;
+
+export const HERO_TAGLINE = 'Открываем двери в миры, где границы реальности тают, а свет встречается с тенью';
 
 /**
  * RSS-фид отдаёт только посты с pubDate >= этой даты.
@@ -10,27 +13,100 @@ export const SITE_LANG = 'ru-RU';
  * архив 2009–2015 не залился в форумы одной волной, отрезаем по cutover.
  * Изменить дату → перезапустить build.
  */
-export const RSS_CUTOFF = new Date("2026-05-20T00:00:00+03:00");
+export const RSS_CUTOFF = new Date('2026-05-20T00:00:00+03:00');
 
 /** Сколько постов в RSS-фиде максимум (после фильтра cutoff). */
 export const RSS_LIMIT = 30;
 
-/** Внешние ссылки на форумы и связанные проекты. */
-export const FORUMS = [
-  { name: 'Главный форум', url: 'https://forum.anotherreflections.ru/' },
-  { name: 'Сумерки Дозоров', url: 'https://sumerki.anotherreflections.ru/' },
-  { name: 'Ренессанс', url: 'https://renessans.anotherreflections.ru/' },
-  { name: 'Амбер', url: 'https://amber.anotherreflections.ru/' },
-  { name: 'Киндрет', url: 'https://kindret.anotherreflections.ru/' },
-  { name: 'Warhammer 40k', url: 'https://warhammer40k.anotherreflections.ru/' },
-  { name: 'Над бездной', url: 'https://bezdna.anotherreflections.ru/' },
-  { name: 'Глубина', url: 'https://deep.anotherreflections.ru/' },
+/**
+ * Цвета категорий — для тэгов в ленте и подсветки карточек.
+ * Если slug отсутствует в этом мапе, используется --accent по умолчанию.
+ */
+export const CATEGORY_COLORS: Record<string, string> = {
+  'obshhie-novosti': 'var(--c-news)',
+  'tech_news': 'var(--c-tech)',
+  'reklama': 'var(--c-ads)',
+  'nashi-druzya': 'var(--c-friends)',
+  'rolgames': 'var(--c-roleplay)',
+  'nad-bezdnoj': 'var(--c-bezdna)',
+  'glubina': 'var(--c-glubina)',
+  'fan-art': 'var(--c-fanart)',
+  'sumerki-dozorov': 'var(--c-sumerki)',
+  'klub-lukyanenko': 'var(--c-lukyanenko)',
+};
+
+/** Миры (старые «Форумы и проекты») — карточки на главной с тематикой и цветом. */
+export type World = {
+  name: string;
+  tag: string;
+  desc: string;
+  url: string;
+  color: string;
+};
+
+export const WORLDS: World[] = [
+  {
+    name: 'Сумерки Дозоров',
+    tag: 'Дозоры · С. Лукьяненко',
+    desc: 'Главная игровая вселенная проекта. Иные, Свет и Тьма, Договор.',
+    url: 'https://sumerki.anotherreflections.ru/',
+    color: 'var(--c-sumerki)',
+  },
+  {
+    name: 'Амбер',
+    tag: 'Янтарное Королевство · Р. Желязны',
+    desc: 'Истинный мир, его Отражения и принцы крови с непростой семейной историей.',
+    url: 'https://amber.anotherreflections.ru/',
+    color: 'var(--c-amber)',
+  },
+  {
+    name: 'Киндрет',
+    tag: 'Кровные братья · А. Пехов',
+    desc: 'Современная Москва глазами вампирских домов и их теневой политики.',
+    url: 'https://kindret.anotherreflections.ru/',
+    color: 'var(--c-kindret)',
+  },
+  {
+    name: 'Ренессанс',
+    tag: 'Историческая фантастика',
+    desc: 'Эпоха возрождения с фантастическими допущениями.',
+    url: 'https://renessans.anotherreflections.ru/',
+    color: 'var(--c-roleplay)',
+  },
+  {
+    name: 'Над бездной',
+    tag: 'Тёмная мистика',
+    desc: 'Тонкая грань между обыденным и потусторонним. IPB 4.x.',
+    url: 'https://bezdna.anotherreflections.ru/',
+    color: 'var(--c-bezdna)',
+  },
+  {
+    name: 'Глубина',
+    tag: 'Дозоры · Глубина',
+    desc: 'Параллельный пласт реальности из мира Дозоров. IPB 4.x.',
+    url: 'https://deep.anotherreflections.ru/',
+    color: 'var(--c-glubina)',
+  },
+  {
+    name: 'Warhammer 40k',
+    tag: 'Сорок первое тысячелетие',
+    desc: 'Только война. Игровое сообщество по вселенной Games Workshop.',
+    url: 'https://warhammer40k.anotherreflections.ru/',
+    color: 'var(--c-roleplay)',
+  },
+  {
+    name: 'Главный форум',
+    tag: 'Общая площадка',
+    desc: 'Архивный форум проекта со всеми мирами в одном месте.',
+    url: 'https://forum.anotherreflections.ru/',
+    color: 'var(--c-news)',
+  },
 ];
 
 /** Главное меню. */
 export const MAIN_NAV = [
-  { label: 'Главная', href: '/' },
+  { label: 'Новости', href: '/' },
   { label: 'О нас', href: '/o-nas/' },
-  { label: 'Наши друзья', href: '/nashi-druzya/' },
-  { label: 'Форумы', href: '#forums' },
+  { label: 'Миры', href: '/#worlds' },
+  { label: 'Друзья', href: '/nashi-druzya/' },
 ];

src/layouts/BaseLayout.astro

@@ -1,6 +1,7 @@
 ---
 import '../styles/global.css';
 import { SITE_TITLE, SITE_DESCRIPTION, SITE_URL, SITE_LANG, MAIN_NAV } from '../consts';
+import BrandMark from '../components/BrandMark.astro';
 
 interface Props {
   title?: string;
@@ -21,6 +22,7 @@ const year = new Date().getFullYear();
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>{pageTitle}</title>
     <meta name="description" content={pageDesc} />
+    <meta name="theme-color" content="#07090f" />
     <link rel="canonical" href={canonical} />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 
@@ -35,14 +37,16 @@ const year = new Date().getFullYear();
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Lora:wght@500;600;700&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Cormorant+Garamond:wght@500;600;700&display=swap" rel="stylesheet" />
   </head>
   <body>
     <header class="site-header">
       <div class="site-header-inner">
-        <div>
-          <h1 class="site-title"><a href="/">{SITE_TITLE}</a></h1>
-          <span class="site-tagline">{SITE_DESCRIPTION}</span>
+        <div class="site-brand">
+          <a href="/" style="display:inline-flex;align-items:center;gap:.7rem;border-bottom:none;">
+            <BrandMark size={32} />
+            <h1 class="site-title"><span>{SITE_TITLE}</span></h1>
+          </a>
         </div>
         <nav>
           <ul class="site-nav">
@@ -59,7 +63,9 @@ const year = new Date().getFullYear();
     </main>
 
     <footer class="site-footer">
-      <p>© 2006–{year} {SITE_TITLE} · <a href="/feed.xml">RSS</a> · <a href="/sitemap-index.xml">Sitemap</a></p>
+      <span class="footer-ornament"></span>
+      <p>© 2006–{year} · {SITE_TITLE}</p>
+      <p><a href="/feed.xml">RSS</a> · <a href="/sitemap-index.xml">Sitemap</a></p>
     </footer>
   </body>
 </html>

src/pages/[slug].astro

@@ -1,6 +1,7 @@
 ---
 import { getCollection, render } from 'astro:content';
 import BaseLayout from '../layouts/BaseLayout.astro';
+import { CATEGORY_COLORS } from '../consts';
 
 export async function getStaticPaths() {
   const posts = await getCollection('posts');
@@ -17,24 +18,26 @@ const { Content } = await render(entry);
 const fmtDate = (d: Date) =>
   d.toLocaleDateString('ru-RU', { year: 'numeric', month: 'long', day: 'numeric' });
 ---
-<BaseLayout title={entry.data.title} description={kind === 'post' ? entry.data.description : undefined} ogType={kind === 'post' ? 'article' : 'website'}>
+<BaseLayout
+  title={entry.data.title}
+  description={kind === 'post' ? entry.data.description : undefined}
+  ogType={kind === 'post' ? 'article' : 'website'}
+>
   <article class="post">
     <header>
+      {kind === 'post' && entry.data.categories.length > 0 && (
+        <a
+          href={`/category/${entry.data.categorySlugs[0]}/`}
+          class="cat-tag"
+          style={`--cat-color: ${CATEGORY_COLORS[entry.data.categorySlugs[0]] ?? 'var(--accent)'}`}
+        >
+          {entry.data.categories[0]}
+        </a>
+      )}
       <h1>{entry.data.title}</h1>
       {kind === 'post' && (
         <div class="post-meta">
           <time datetime={entry.data.pubDate.toISOString()}>{fmtDate(entry.data.pubDate)}</time>
-          {entry.data.categories.length > 0 && (
-            <>
-              {' · '}
-              {entry.data.categories.map((cat, i) => (
-                <>
-                  {i > 0 && ', '}
-                  <a href={`/category/${entry.data.categorySlugs[i]}/`}>{cat}</a>
-                </>
-              ))}
-            </>
-          )}
         </div>
       )}
     </header>
@@ -45,7 +48,7 @@ const fmtDate = (d: Date) =>
 
   {kind === 'post' && (
     <nav class="pagination">
-      <a href="/">← Все новости</a>
+      <a href="/">← Вернуться в хронику</a>
     </nav>
   )}
 </BaseLayout>

src/pages/category/[slug].astro

@@ -1,6 +1,7 @@
 ---
 import { getCollection } from 'astro:content';
 import BaseLayout from '../../layouts/BaseLayout.astro';
+import { CATEGORY_COLORS } from '../../consts';
 
 export async function getStaticPaths() {
   const posts = await getCollection('posts');
@@ -21,28 +22,34 @@ export async function getStaticPaths() {
 }
 
 const { name, posts } = Astro.props;
+const catColor = CATEGORY_COLORS[Astro.params.slug as string] ?? 'var(--accent)';
 const sorted = posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
 
 const fmtDate = (d: Date) =>
   d.toLocaleDateString('ru-RU', { year: 'numeric', month: 'long', day: 'numeric' });
 ---
 <BaseLayout title={`Категория: ${name}`}>
+  <section class="hero" style={`padding: 3rem 1rem 2rem; --cat-color: ${catColor};`}>
+    <span class="hero-eyebrow" style={`color: ${catColor}; border-color: ${catColor};`}>Категория</span>
+    <h1 style={`background: linear-gradient(180deg, #ffffff 0%, ${catColor} 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;`}>{name}</h1>
+    <p class="hero-tagline">{sorted.length} {sorted.length === 1 ? 'публикация' : sorted.length < 5 ? 'публикации' : 'публикаций'} · <a href={`/category/${Astro.params.slug}/feed.xml`}>RSS этой категории</a></p>
+  </section>
+
   <section>
-    <h1>{name}</h1>
-    <p class="post-meta">
-      {sorted.length} постов ·
-      <a href={`/category/${Astro.params.slug}/feed.xml`}>RSS этой категории</a>
-    </p>
     <ul class="post-list">
       {sorted.map((post) => (
-        <li class="post-list-item">
+        <li class="post-card" style={`--cat-color: ${catColor}`}>
           <div class="post-meta">
             <time datetime={post.data.pubDate.toISOString()}>{fmtDate(post.data.pubDate)}</time>
           </div>
-          <h2><a href={`/${post.data.slug}/`}>{post.data.title}</a></h2>
+          <h3><a href={`/${post.data.slug}/`}>{post.data.title}</a></h3>
           {post.data.description && <p class="post-excerpt">{post.data.description}…</p>}
         </li>
       ))}
     </ul>
   </section>
+
+  <nav class="pagination">
+    <a href="/">← Вся хроника</a>
+  </nav>
 </BaseLayout>

src/pages/index.astro

@@ -1,47 +1,83 @@
 ---
 import { getCollection } from 'astro:content';
 import BaseLayout from '../layouts/BaseLayout.astro';
-import { FORUMS } from '../consts';
+import { WORLDS, CATEGORY_COLORS, HERO_TAGLINE, SITE_FOUNDED } from '../consts';
 
 const posts = (await getCollection('posts'))
   .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
 
+const totalPosts = posts.length;
+const totalWorlds = WORLDS.length;
+const oldestYear = posts.length ? posts[posts.length - 1].data.pubDate.getFullYear() : SITE_FOUNDED;
+
 const fmtDate = (d: Date) =>
   d.toLocaleDateString('ru-RU', { year: 'numeric', month: 'long', day: 'numeric' });
 ---
 <BaseLayout>
-  <section>
-    <h1>Новости</h1>
+  <section class="hero">
+    <span class="hero-eyebrow">Ролевой проект · с {SITE_FOUNDED} года</span>
+    <h1>Иные<br/>Отражения</h1>
+    <p class="hero-tagline">{HERO_TAGLINE}</p>
+    <div class="hero-meta">
+      <span><strong>{totalWorlds}</strong> мира</span>
+      <span><strong>{totalPosts}</strong> публикаций</span>
+      <span><strong>{new Date().getFullYear() - SITE_FOUNDED}</strong> лет онлайн</span>
+    </div>
+  </section>
+
+  <section id="news">
+    <div class="section-head">
+      <h2>Хроника проекта</h2>
+      <span class="section-meta"><a href="/feed.xml">RSS-фид</a></span>
+    </div>
     <ul class="post-list">
-      {posts.map((post) => (
-        <li class="post-list-item">
-          <div class="post-meta">
-            <time datetime={post.data.pubDate.toISOString()}>{fmtDate(post.data.pubDate)}</time>
-            {post.data.categories.length > 0 && (
-              <>
-                {' · '}
-                {post.data.categories.map((cat, i) => (
-                  <>
-                    {i > 0 && ', '}
-                    <a href={`/category/${post.data.categorySlugs[i]}/`}>{cat}</a>
-                  </>
-                ))}
-              </>
-            )}
-          </div>
-          <h2><a href={`/${post.data.slug}/`}>{post.data.title}</a></h2>
-          {post.data.description && <p class="post-excerpt">{post.data.description}…</p>}
+      {posts.map((post) => {
+        const catColor = post.data.categorySlugs[0]
+          ? CATEGORY_COLORS[post.data.categorySlugs[0]] ?? 'var(--accent)'
+          : 'var(--accent)';
+        return (
+          <li class="post-card" style={`--cat-color: ${catColor}`}>
+            <div class="post-meta">
+              <time datetime={post.data.pubDate.toISOString()}>{fmtDate(post.data.pubDate)}</time>
+              {post.data.categories.length > 0 && (
+                <a
+                  href={`/category/${post.data.categorySlugs[0]}/`}
+                  class="cat-tag"
+                  style={`--cat-color: ${catColor}`}
+                >
+                  {post.data.categories[0]}
+                </a>
+              )}
+            </div>
+            <h3><a href={`/${post.data.slug}/`}>{post.data.title}</a></h3>
+            {post.data.description && <p class="post-excerpt">{post.data.description}…</p>}
+          </li>
+        );
+      })}
+    </ul>
+  </section>
+
+  <section id="worlds" style="margin-top: 4rem;">
+    <div class="section-head">
+      <h2>Миры и проекты</h2>
+      <span class="section-meta">{WORLDS.length} вселенных</span>
+    </div>
+    <ul class="worlds-grid">
+      {WORLDS.map((w) => (
+        <li>
+          <a
+            class="world-card"
+            href={w.url}
+            target="_blank"
+            rel="noopener"
+            style={`--cat-color: ${w.color}`}
+          >
+            <span class="world-tag">{w.tag}</span>
+            <span class="world-name">{w.name}</span>
+            <span class="world-desc">{w.desc}</span>
+          </a>
         </li>
       ))}
     </ul>
   </section>
-
-  <section id="forums">
-    <h2>Форумы и проекты</h2>
-    <ul class="forums-grid">
-      {FORUMS.map((f) => (
-        <li><a href={f.url} target="_blank" rel="noopener">{f.name}</a></li>
-      ))}
-    </ul>
-  </section>
 </BaseLayout>

src/styles/global.css

@@ -1,24 +1,40 @@
-/* Иные Отражения — тёмная палитра в духе старой темы darkness-10, без скевоморфизма */
+/* Иные Отражения — тёмная атмосфера, мистический акцент, читаемая типографика */
 
 :root {
-  --bg: #0d1117;
-  --bg-elev: #161b22;
-  --bg-elev-2: #1c2129;
-  --border: #2a313c;
-  --fg: #d4d4d4;
-  --fg-muted: #8b949e;
-  --fg-dim: #6e7681;
-  --accent: #9a7bff;
-  --accent-hover: #b59aff;
-  --link: #79b8ff;
-  --link-hover: #c8e1ff;
+  --bg: #07090f;
+  --bg-elev: #11141d;
+  --bg-elev-2: #181c28;
+  --border: #232838;
+  --border-strong: #2f3548;
+  --fg: #cdd3df;
+  --fg-muted: #8a93a8;
+  --fg-dim: #5d6577;
 
-  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
-  --font-serif: 'Lora', 'PT Serif', Georgia, serif;
+  --accent: #b794ff;
+  --accent-deep: #6c4ed4;
+  --accent-glow: rgba(154, 123, 255, 0.32);
+  --link: #8db4ff;
+  --link-hover: #b9d2ff;
+
+  --c-news: #7aa2ff;
+  --c-tech: #6ecbb6;
+  --c-ads: #d9a36a;
+  --c-friends: #f08fbf;
+  --c-roleplay: #b794ff;
+  --c-bezdna: #ff7676;
+  --c-glubina: #6dd0ea;
+  --c-sumerki: #a397ff;
+  --c-amber: #f0c674;
+  --c-kindret: #d36464;
+  --c-fanart: #ffadc7;
+  --c-lukyanenko: #8a7cff;
+
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-serif: 'Cormorant Garamond', 'Lora', 'PT Serif', Georgia, serif;
   --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
 
-  --container: 760px;
-  --container-wide: 1100px;
+  --container: 780px;
+  --container-wide: 1120px;
 }
 
 *, *::before, *::after { box-sizing: border-box; }
@@ -28,7 +44,7 @@ html {
   color: var(--fg);
   font-family: var(--font-sans);
   font-size: 17px;
-  line-height: 1.65;
+  line-height: 1.7;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
@@ -38,6 +54,38 @@ body {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* Декоративный фон: звёздная россыпь + тонкие радиальные лучи акцента */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: -2;
+  background:
+    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(108, 78, 212, 0.18), transparent 60%),
+    radial-gradient(ellipse 60% 40% at 90% 20%, rgba(125, 175, 255, 0.08), transparent 60%);
+  pointer-events: none;
+}
+body::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  background-image:
+    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.4) 50%, transparent 100%),
+    radial-gradient(1px 1px at 80% 70%, rgba(255,255,255,0.3) 50%, transparent 100%),
+    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.5) 50%, transparent 100%),
+    radial-gradient(1px 1px at 65% 15%, rgba(255,255,255,0.35) 50%, transparent 100%),
+    radial-gradient(1px 1px at 10% 60%, rgba(255,255,255,0.25) 50%, transparent 100%),
+    radial-gradient(2px 2px at 90% 90%, rgba(183,148,255,0.5) 50%, transparent 100%),
+    radial-gradient(1.5px 1.5px at 30% 50%, rgba(141,180,255,0.4) 50%, transparent 100%);
+  background-size: 800px 800px, 600px 600px, 1000px 1000px, 700px 700px, 900px 900px, 1200px 1200px, 850px 850px;
+  background-position: 0 0;
+  opacity: 0.7;
+  pointer-events: none;
 }
 
 main {
@@ -45,20 +93,21 @@ main {
   width: 100%;
   max-width: var(--container);
   margin: 0 auto;
-  padding: 2rem 1.25rem 4rem;
+  padding: 2.5rem 1.25rem 5rem;
 }
 
 h1, h2, h3, h4 {
   font-family: var(--font-serif);
   font-weight: 600;
-  color: #e6edf3;
-  line-height: 1.25;
-  margin: 1.8em 0 0.6em;
+  color: #ebe3ff;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  margin: 2em 0 0.6em;
 }
-
-h1 { font-size: 2.1rem; margin-top: 0.4em; }
-h2 { font-size: 1.55rem; }
-h3 { font-size: 1.25rem; }
+h1:first-child, h2:first-child { margin-top: 0; }
+h1 { font-size: 2.6rem; }
+h2 { font-size: 1.85rem; }
+h3 { font-size: 1.35rem; }
 
 p, ul, ol, blockquote { margin: 0 0 1.15em; }
 
@@ -66,35 +115,36 @@ a {
   color: var(--link);
   text-decoration: none;
   border-bottom: 1px solid transparent;
-  transition: color .15s, border-color .15s;
+  transition: color .15s ease, border-color .15s ease;
 }
 a:hover { color: var(--link-hover); border-bottom-color: var(--link-hover); }
 
 blockquote {
-  margin: 1.2em 0;
-  padding: .2em 1em;
+  margin: 1.4em 0;
+  padding: .6em 1.2em;
   border-left: 3px solid var(--accent);
   color: var(--fg-muted);
-  background: var(--bg-elev);
+  background: linear-gradient(90deg, var(--bg-elev) 0%, transparent 100%);
   font-style: italic;
+  font-family: var(--font-serif);
+  font-size: 1.05em;
 }
 
-img { max-width: 100%; height: auto; }
+img { max-width: 100%; height: auto; border-radius: 4px; }
 
 hr {
   border: 0;
-  border-top: 1px solid var(--border);
-  margin: 2em 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
+  margin: 2.5em 0;
 }
 
-code, pre {
-  font-family: var(--font-mono);
-  font-size: .92em;
-}
+code, pre { font-family: var(--font-mono); font-size: .92em; }
 code {
   background: var(--bg-elev);
-  padding: .1em .35em;
+  padding: .15em .4em;
   border-radius: 3px;
+  border: 1px solid var(--border);
 }
 pre {
   background: var(--bg-elev);
@@ -104,138 +154,396 @@ pre {
   overflow-x: auto;
 }
 
-/* Header */
+/* ============================== HEADER ============================== */
 .site-header {
   border-bottom: 1px solid var(--border);
-  background: linear-gradient(180deg, #0a0e14 0%, var(--bg) 100%);
+  background: rgba(7, 9, 15, 0.85);
+  backdrop-filter: blur(8px);
+  position: sticky;
+  top: 0;
+  z-index: 50;
 }
 .site-header-inner {
   max-width: var(--container-wide);
   margin: 0 auto;
-  padding: 1.25rem 1.25rem;
+  padding: 1rem 1.25rem;
   display: flex;
-  align-items: baseline;
+  align-items: center;
   justify-content: space-between;
-  flex-wrap: wrap;
   gap: 1rem;
+  flex-wrap: wrap;
+}
+.site-brand {
+  display: flex;
+  align-items: center;
+  gap: .7rem;
+}
+.brand-mark {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
 }
 .site-title {
   font-family: var(--font-serif);
-  font-size: 1.5rem;
+  font-size: 1.4rem;
   font-weight: 700;
-  letter-spacing: -0.01em;
+  letter-spacing: 0.01em;
   margin: 0;
+  line-height: 1;
 }
 .site-title a {
-  color: #e6edf3;
+  color: #ebe3ff;
   border-bottom: none;
-}
-.site-title a:hover { color: var(--accent); }
-.site-tagline {
-  font-size: .85rem;
-  color: var(--fg-muted);
-  display: block;
-  margin-top: 2px;
+  background-image: linear-gradient(90deg, #ebe3ff, var(--accent));
+  -webkit-background-clip: text;
+  background-clip: text;
 }
 .site-nav {
   display: flex;
-  gap: 1.5rem;
+  gap: 1.75rem;
   list-style: none;
   margin: 0;
   padding: 0;
 }
 .site-nav a {
-  color: var(--fg);
+  color: var(--fg-muted);
   border-bottom: none;
-  font-size: .95rem;
+  font-size: .92rem;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  transition: color .2s;
 }
 .site-nav a:hover { color: var(--accent); }
 
-/* Footer */
-.site-footer {
-  border-top: 1px solid var(--border);
-  padding: 2rem 1.25rem 3rem;
-  color: var(--fg-muted);
-  font-size: .88rem;
+/* ============================== HERO ============================== */
+.hero {
   text-align: center;
+  padding: 4.5rem 1rem 3rem;
+  margin: 0 0 3rem;
+  position: relative;
 }
-.site-footer a { color: var(--fg-muted); border-bottom-color: var(--border); }
-.site-footer a:hover { color: var(--accent); border-bottom-color: var(--accent); }
-
-/* Post list */
-.post-list { list-style: none; padding: 0; margin: 0; }
-.post-list-item {
-  padding: 1.25rem 0;
-  border-bottom: 1px solid var(--border);
+.hero-eyebrow {
+  display: inline-block;
+  font-size: .8rem;
+  letter-spacing: 0.35em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 1.2rem;
+  padding: .4em 1.2em;
+  border: 1px solid var(--border-strong);
+  border-radius: 100px;
+  background: rgba(108, 78, 212, 0.08);
 }
-.post-list-item:last-child { border-bottom: none; }
-.post-list-item h2 {
-  margin: 0 0 .35em;
-  font-size: 1.35rem;
+.hero h1 {
+  font-family: var(--font-serif);
+  font-size: clamp(2.6rem, 6vw, 4.2rem);
+  margin: 0 0 .5rem;
+  font-weight: 500;
+  letter-spacing: -0.02em;
+  background: linear-gradient(180deg, #ffffff 0%, #b794ff 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  line-height: 1.05;
 }
-.post-list-item h2 a {
-  color: #e6edf3;
-  border-bottom: none;
-}
-.post-list-item h2 a:hover { color: var(--accent); }
-.post-meta {
-  font-size: .82rem;
-  color: var(--fg-dim);
-  margin-bottom: .4em;
-}
-.post-meta a {
+.hero-tagline {
+  font-family: var(--font-serif);
+  font-size: 1.25rem;
   color: var(--fg-muted);
-  border-bottom: none;
+  font-style: italic;
+  margin: 0 0 2rem;
+  max-width: 540px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.hero-meta {
+  display: inline-flex;
+  gap: 2rem;
+  font-size: .85rem;
+  color: var(--fg-dim);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+.hero-meta strong {
+  display: block;
+  font-family: var(--font-serif);
+  font-style: normal;
+  font-size: 1.3rem;
+  color: var(--fg);
+  text-transform: none;
+  letter-spacing: normal;
+  margin-bottom: .15rem;
 }
-.post-meta a:hover { color: var(--accent); }
-.post-excerpt { color: var(--fg-muted); margin: 0; }
 
-/* Single post */
-.post header {
-  margin-bottom: 2em;
-  padding-bottom: 1em;
+/* ============================== SECTION TITLES ============================== */
+.section-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  margin: 0 0 1.5rem;
+  padding-bottom: .6rem;
   border-bottom: 1px solid var(--border);
 }
-.post h1 { margin: 0 0 .3em; }
+.section-head h2 {
+  font-family: var(--font-serif);
+  font-size: 1.7rem;
+  font-weight: 500;
+  margin: 0;
+  letter-spacing: -0.005em;
+}
+.section-head .section-meta {
+  font-size: .8rem;
+  color: var(--fg-dim);
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+}
+.section-head .section-meta a { color: var(--fg-muted); border-bottom: none; }
+.section-head .section-meta a:hover { color: var(--accent); }
 
-/* Forums grid */
-.forums-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: .75rem;
-  margin: 1em 0 2em;
+/* ============================== POST LIST (cards) ============================== */
+.post-list {
   list-style: none;
   padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
-.forums-grid a {
-  display: block;
-  padding: .75rem 1rem;
+.post-card {
+  position: relative;
   background: var(--bg-elev);
   border: 1px solid var(--border);
-  border-radius: 4px;
-  color: var(--fg);
-  font-size: .95rem;
+  border-radius: 8px;
+  padding: 1.35rem 1.5rem 1.4rem;
+  transition: border-color .25s, background .25s, transform .25s;
 }
-.forums-grid a:hover {
+.post-card::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 1.35rem;
+  bottom: 1.4rem;
+  width: 3px;
+  background: var(--cat-color, var(--accent-deep));
+  border-radius: 0 4px 4px 0;
+  opacity: 0.7;
+  transition: opacity .25s;
+}
+.post-card:hover {
+  border-color: var(--border-strong);
   background: var(--bg-elev-2);
-  border-color: var(--accent);
-  color: var(--accent);
+  transform: translateY(-1px);
+}
+.post-card:hover::before { opacity: 1; }
+.post-card h3 {
+  font-family: var(--font-serif);
+  margin: 0 0 .35rem;
+  font-size: 1.4rem;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  line-height: 1.3;
+}
+.post-card h3 a { color: #ebe3ff; border-bottom: none; }
+.post-card h3 a:hover { color: var(--accent); }
+.post-card .post-meta {
+  font-size: .78rem;
+  color: var(--fg-dim);
+  margin-bottom: .55em;
+  display: flex;
+  align-items: center;
+  gap: .8rem;
+  flex-wrap: wrap;
+}
+.post-card .post-excerpt {
+  color: var(--fg-muted);
+  margin: 0;
+  font-size: .96rem;
+  line-height: 1.6;
 }
 
-/* Pagination */
+/* Цветной тэг категории */
+.cat-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: .4em;
+  font-size: .73rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--cat-color, var(--accent));
+  border-bottom: none !important;
+  font-weight: 600;
+}
+.cat-tag::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  box-shadow: 0 0 6px currentColor;
+}
+.cat-tag:hover { color: var(--cat-color, var(--accent)); filter: brightness(1.2); }
+
+/* ============================== SINGLE POST ============================== */
+.post header {
+  margin-bottom: 2.5em;
+  padding-bottom: 1.5em;
+  border-bottom: 1px solid var(--border);
+  text-align: center;
+}
+.post header h1 {
+  margin: .3em 0 .5em;
+  font-size: clamp(1.9rem, 4vw, 2.8rem);
+  font-weight: 600;
+  background: linear-gradient(180deg, #ffffff 0%, #cdb8ff 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.post header .post-meta {
+  justify-content: center;
+  font-size: .85rem;
+  color: var(--fg-dim);
+  display: flex;
+  gap: .8rem;
+  flex-wrap: wrap;
+}
+.post-body {
+  font-size: 1.05rem;
+}
+.post-body p:first-of-type::first-letter {
+  font-family: var(--font-serif);
+  font-size: 3.2em;
+  float: left;
+  line-height: .9;
+  padding-right: .1em;
+  padding-top: .05em;
+  color: var(--accent);
+}
+.post-body a {
+  border-bottom-color: var(--border-strong);
+}
+
+/* ============================== WORLDS GRID (форумы) ============================== */
+.worlds-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 1rem;
+  list-style: none;
+  padding: 0;
+  margin: 1em 0;
+}
+.world-card {
+  position: relative;
+  display: block;
+  padding: 1.4rem 1.5rem;
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--fg);
+  border-bottom: 1px solid var(--border);
+  overflow: hidden;
+  transition: border-color .25s, transform .25s, background .25s;
+}
+.world-card::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 3px;
+  background: var(--cat-color, var(--accent));
+  opacity: 0.85;
+}
+.world-card::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at top right, var(--cat-color, transparent), transparent 70%);
+  opacity: 0.06;
+  pointer-events: none;
+  transition: opacity .25s;
+}
+.world-card:hover {
+  border-color: var(--cat-color, var(--accent));
+  transform: translateY(-2px);
+  background: var(--bg-elev-2);
+}
+.world-card:hover::after { opacity: 0.14; }
+.world-card .world-name {
+  display: block;
+  font-family: var(--font-serif);
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #ebe3ff;
+  margin-bottom: .3em;
+}
+.world-card .world-desc {
+  display: block;
+  font-size: .85rem;
+  color: var(--fg-muted);
+  line-height: 1.45;
+}
+.world-card .world-tag {
+  display: inline-block;
+  font-size: .68rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--cat-color, var(--accent));
+  margin-bottom: .5em;
+  font-weight: 600;
+}
+
+/* ============================== PAGINATION ============================== */
 .pagination {
   display: flex;
   justify-content: space-between;
-  margin: 2em 0;
+  margin: 3em 0 1em;
   gap: 1rem;
 }
 .pagination a {
-  padding: .5em 1em;
+  padding: .65em 1.4em;
   border: 1px solid var(--border);
   border-radius: 4px;
+  background: var(--bg-elev);
+  font-size: .9rem;
+  color: var(--fg-muted);
   border-bottom: 1px solid var(--border);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
 }
 .pagination a:hover {
   border-color: var(--accent);
   color: var(--accent);
+  background: var(--bg-elev-2);
+}
+
+/* ============================== FOOTER ============================== */
+.site-footer {
+  border-top: 1px solid var(--border);
+  padding: 2.5rem 1.25rem 3rem;
+  color: var(--fg-dim);
+  font-size: .85rem;
+  text-align: center;
+  margin-top: 4rem;
+}
+.site-footer p { margin: 0 0 .3em; }
+.site-footer a { color: var(--fg-muted); border-bottom-color: var(--border); }
+.site-footer a:hover { color: var(--accent); border-bottom-color: var(--accent); }
+.footer-ornament {
+  display: block;
+  width: 60px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--accent), transparent);
+  margin: 0 auto 1.5rem;
+}
+
+/* ============================== RESPONSIVE ============================== */
+@media (max-width: 640px) {
+  html { font-size: 16px; }
+  .hero { padding: 3rem 1rem 2rem; }
+  .hero-meta { flex-direction: column; gap: 1rem; }
+  .site-nav { gap: 1rem; font-size: .85rem; }
+  .post-card { padding: 1.1rem 1.2rem; }
 }