@karaoke-cms/theme-blog 0.9.0

package/README.md

@@ -0,0 +1,79 @@
+# @karaoke-cms/theme-blog
+
+Editorial blog theme for karaoke-cms. Features a featured hero post, card grid, and cover image support. Blog-only — no docs or knowledge-base routes.
+
+## Where it belongs
+
+`packages/theme-blog/` in the monorepo. Activated via `karaoke.config.ts`:
+
+```ts
+// karaoke.config.ts
+import { loadEnv } from '@karaoke-cms/astro/env';
+const { KARAOKE_VAULT } = loadEnv(new URL('.', import.meta.url));
+
+export default {
+  vault: KARAOKE_VAULT,
+  theme: '@karaoke-cms/theme-blog',
+};
+```
+
+## What it does
+
+Injects blog-focused routes and sets the `@theme` Vite alias:
+
+| Route | Page |
+|-------|------|
+| `/` | Home — featured hero post + recent posts card grid |
+| `/blog` | Blog index — all published posts |
+| `/blog/[slug]` | Blog post — full content with cover image |
+| `/tags` | Tags index |
+| `/tags/[tag]` | Tag page |
+| `/404` | Not found page |
+
+Note: no `/docs` or `/docs/[slug]` routes. This theme is for publication-style blogs, not knowledge bases.
+
+### Extended frontmatter
+
+The theme supports optional blog-specific frontmatter fields via `blogThemeExtension`. Pass it to `makeCollections()` to unlock them:
+
+```ts
+// src/content.config.ts
+import { makeCollections, blogThemeExtension } from '@karaoke-cms/astro/collections';
+
+export const collections = makeCollections(import.meta.url, KARAOKE_VAULT, {
+  blog: blogThemeExtension,
+});
+```
+
+Extra fields (all optional):
+
+| Field | Type | Purpose |
+|-------|------|---------|
+| `cover_image` | `string` | Path or URL to the post's cover image |
+| `featured` | `boolean` | Pins this post as the hero on the home page |
+| `abstract` | `string` | Override the description shown in cards and the hero |
+
+Without `blogThemeExtension`, these fields are silently ignored — the theme falls back to `description`.
+
+### Components
+
+- **`FeaturedHero`** — large hero block for the featured post with cover image overlay, title, date, and abstract
+- **`PostCard`** — card with cover image, title, date, reading time, and abstract for the grid
+
+### Design system
+
+`src/styles.css` defines tokens on `:root`:
+
+- **Typography**: `--font-body`, `--font-mono`, `--font-size-base/sm/lg/xl`
+- **Color**: `--color-bg`, `--color-text`, `--color-muted`, `--color-border`, `--color-link`, `--color-link-hover`, `--color-link-visited`, `--color-card-bg`, `--color-hero-overlay`
+- **Spacing**: `--spacing-xs/sm/md/lg/xl`
+- **Sizing**: `--width-content` (700px), `--width-site` (1100px), `--radius-card` (8px), `--radius-sm` (4px)
+
+Dark mode via `@media (prefers-color-scheme: dark)`.
+
+## How it changes the behavior of the system
+
+- Replaces all routes from `theme-default`. The two themes cannot coexist — only one is active at a time.
+- Home page behavior changes significantly: instead of a two-column blog + docs grid, it renders a featured hero and card grid.
+- Does not support docs — vault content in `docs/` is collected but has no public routes. Use `theme-default` if you need docs.
+- `featured: true` on a post controls the home page hero. If no post is marked featured, the most recent post is promoted automatically.

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@karaoke-cms/theme-blog",
+  "type": "module",
+  "version": "0.9.0",
+  "description": "Blog theme for karaoke-cms — editorial layout with featured hero, card grid, and cover images",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "files": [
+    "src/"
+  ],
+  "keywords": [
+    "astro",
+    "cms",
+    "theme",
+    "karaoke-cms"
+  ],
+  "peerDependencies": {
+    "astro": ">=6.0.0",
+    "@karaoke-cms/astro": "^0.9.0"
+  },
+  "devDependencies": {
+    "astro": "^6.0.8",
+    "@karaoke-cms/astro": "0.9.0"
+  },
+  "scripts": {
+    "test": "echo \"Stub — no tests\""
+  }
+}

package/src/components/FeaturedHero.astro

@@ -0,0 +1,26 @@
+---
+interface Props {
+  title: string;
+  href: string;
+  date?: Date;
+  abstract?: string;
+  coverImage?: string;
+}
+
+const { title, href, date, abstract, coverImage } = Astro.props;
+---
+
+<a
+  href={href}
+  class="featured-hero"
+  style={coverImage ? `--hero-bg: url('${coverImage}')` : ''}
+>
+  <div class="featured-hero-overlay">
+    <div class="featured-hero-content">
+      <span class="featured-label">Featured</span>
+      <h2 class="featured-title">{title}</h2>
+      {abstract && <p class="featured-abstract">{abstract}</p>}
+      {date && <span class="featured-date">{date.toISOString().slice(0, 10)}</span>}
+    </div>
+  </div>
+</a>

package/src/components/PostCard.astro

@@ -0,0 +1,26 @@
+---
+interface Props {
+  title: string;
+  href: string;
+  date?: Date;
+  readingTime?: number;
+  abstract?: string;
+  coverImage?: string;
+}
+
+const { title, href, date, readingTime, abstract, coverImage } = Astro.props;
+---
+
+<a href={href} class="post-card">
+  {coverImage && (
+    <div class="card-cover" style={`background-image: url('${coverImage}')`} />
+  )}
+  <div class="card-body">
+    <h3 class="card-title">{title}</h3>
+    {abstract && <p class="card-abstract">{abstract}</p>}
+    <div class="card-meta">
+      {date && <span>{date.toISOString().slice(0, 10)}</span>}
+      {readingTime && <span>{readingTime} min read</span>}
+    </div>
+  </div>
+</a>

package/src/index.ts

@@ -0,0 +1,29 @@
+import type { AstroIntegration } from 'astro';
+import type { KaraokeConfig } from '@karaoke-cms/astro';
+import { fileURLToPath } from 'url';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+
+export default function themeBlog(_config: KaraokeConfig): AstroIntegration {
+  return {
+    name: '@karaoke-cms/theme-blog',
+    hooks: {
+      'astro:config:setup': ({ injectRoute, updateConfig }) => {
+        injectRoute({ pattern: '/',            entrypoint: `${__dirname}pages/index.astro` });
+        injectRoute({ pattern: '/blog',        entrypoint: `${__dirname}pages/blog/index.astro` });
+        injectRoute({ pattern: '/blog/[slug]', entrypoint: `${__dirname}pages/blog/[slug].astro` });
+        injectRoute({ pattern: '/tags',        entrypoint: `${__dirname}pages/tags/index.astro` });
+        injectRoute({ pattern: '/tags/[tag]',  entrypoint: `${__dirname}pages/tags/[tag].astro` });
+        injectRoute({ pattern: '/404',         entrypoint: `${__dirname}pages/404.astro` });
+
+        updateConfig({
+          vite: {
+            resolve: {
+              alias: { '@theme': `${__dirname}` },
+            },
+          },
+        });
+      },
+    },
+  };
+}

package/src/pages/404.astro

@@ -0,0 +1,12 @@
+---
+import Base from '@karaoke-cms/astro/layouts/Base.astro';
+import { siteTitle } from 'virtual:karaoke-cms/config';
+---
+
+<Base title={`404 — ${siteTitle}`}>
+  <div style="padding: 4rem 0; text-align: center;">
+    <h1 style="font-size: 5rem; margin-bottom: 0.5rem; letter-spacing: -0.04em;">404</h1>
+    <p style="color: var(--color-muted); margin-bottom: 2rem;">Page not found.</p>
+    <a href="/">← Home</a>
+  </div>
+</Base>

package/src/pages/blog/[slug].astro

@@ -0,0 +1,69 @@
+---
+import { getCollection, render } from 'astro:content';
+import Base from '@karaoke-cms/astro/layouts/Base.astro';
+import ModuleLoader from '@karaoke-cms/astro/components/ModuleLoader.astro';
+import { siteTitle } from 'virtual:karaoke-cms/config';
+
+export async function getStaticPaths() {
+  const posts = await getCollection('blog', ({ data }) => data.publish === true);
+  return posts.map(entry => ({
+    params: { slug: entry.id },
+    props: { entry },
+  }));
+}
+
+const { entry } = Astro.props;
+const { Content } = await render(entry);
+
+type Extended = { cover_image?: string; abstract?: string };
+const coverImage = (entry.data as Extended).cover_image;
+
+const relatedIds = entry.data.related ?? [];
+const related = relatedIds.length > 0
+  ? (await Promise.all([
+      getCollection('blog', ({ data }) => data.publish === true),
+      getCollection('docs', ({ data }) => data.publish === true),
+    ]))
+    .flat()
+    .filter(e => relatedIds.includes(e.id))
+  : [];
+---
+
+<Base title={`${entry.data.title} — ${siteTitle}`} description={entry.data.description} type="article">
+  <article>
+    {coverImage && <img src={coverImage} alt="" class="post-cover" />}
+    <div class="post-header">
+      <h1>{entry.data.title}</h1>
+      <div class="post-meta">
+        {entry.data.date && <span>{entry.data.date.toISOString().slice(0, 10)}</span>}
+        {entry.data.author && entry.data.date && <span> · </span>}
+        {entry.data.author && (
+          <span>{Array.isArray(entry.data.author) ? entry.data.author.join(' · ') : entry.data.author}</span>
+        )}
+        {entry.data.reading_time && <span> · {entry.data.reading_time} min read</span>}
+      </div>
+    </div>
+    <div class="prose">
+      <Content />
+    </div>
+    <div class="post-footer">
+      {entry.data.tags && entry.data.tags.length > 0 && (
+        <div class="post-tags">
+          {entry.data.tags.map(tag => <a href={`/tags/${tag}`} class="tag">#{tag}</a>)}
+        </div>
+      )}
+      {related.length > 0 && (
+        <div class="related-posts">
+          <p class="related-label">Related</p>
+          <ul>
+            {related.map(r => (
+              <li><a href={`/${r.collection}/${r.id}`}>{r.data.title}</a></li>
+            ))}
+          </ul>
+        </div>
+      )}
+      <a href="/blog">← Blog</a>
+    </div>
+  </article>
+  <ModuleLoader comments={entry.data.comments} />
+</Base>

package/src/pages/blog/index.astro

@@ -0,0 +1,36 @@
+---
+import { getCollection } from 'astro:content';
+import Base from '@karaoke-cms/astro/layouts/Base.astro';
+import PostCard from '../../components/PostCard.astro';
+import { siteTitle } from 'virtual:karaoke-cms/config';
+
+const posts = (await getCollection('blog', ({ data }) => data.publish === true))
+  .sort((a, b) => (b.data.date?.valueOf() ?? 0) - (a.data.date?.valueOf() ?? 0));
+
+type Extended = { cover_image?: string; abstract?: string };
+---
+
+<Base title={`Blog — ${siteTitle}`}>
+  <div class="listing-header">
+    <h1>Blog</h1>
+  </div>
+  {posts.length > 0 ? (
+    <div class="posts-grid">
+      {posts.map(post => (
+        <PostCard
+          title={post.data.title}
+          href={`/blog/${post.id}`}
+          date={post.data.date}
+          readingTime={post.data.reading_time}
+          abstract={(post.data as Extended).abstract ?? post.data.description}
+          coverImage={(post.data as Extended).cover_image}
+        />
+      ))}
+    </div>
+  ) : (
+    <div class="empty-state">
+      <p>No posts published yet.</p>
+      <p>Create a Markdown file in your vault's <code>blog/</code> folder and set <code>publish: true</code>.</p>
+    </div>
+  )}
+</Base>

package/src/pages/index.astro

@@ -0,0 +1,56 @@
+---
+import { getCollection } from 'astro:content';
+import Base from '@karaoke-cms/astro/layouts/Base.astro';
+import FeaturedHero from '../components/FeaturedHero.astro';
+import PostCard from '../components/PostCard.astro';
+import { siteTitle, siteDescription } from 'virtual:karaoke-cms/config';
+
+const allPosts = (await getCollection('blog', ({ data }) => data.publish === true))
+  .sort((a, b) => (b.data.date?.valueOf() ?? 0) - (a.data.date?.valueOf() ?? 0));
+
+// blogThemeExtension fields (cover_image, featured, abstract) are optional;
+// they're present if the user passed blogThemeExtension to makeCollections.
+type Extended = { cover_image?: string; featured?: boolean; abstract?: string };
+
+const featuredPost = allPosts.find(p => (p.data as Extended).featured) ?? allPosts[0];
+const gridPosts = featuredPost
+  ? allPosts.filter(p => p.id !== featuredPost.id).slice(0, 6)
+  : allPosts.slice(0, 6);
+---
+
+<Base title={siteTitle} description={siteDescription}>
+  {featuredPost && (
+    <FeaturedHero
+      title={featuredPost.data.title}
+      href={`/blog/${featuredPost.id}`}
+      date={featuredPost.data.date}
+      abstract={(featuredPost.data as Extended).abstract ?? featuredPost.data.description}
+      coverImage={(featuredPost.data as Extended).cover_image}
+    />
+  )}
+  {gridPosts.length > 0 && (
+    <section class="posts-grid-section">
+      <h2 class="section-heading">Recent Posts</h2>
+      <div class="posts-grid">
+        {gridPosts.map(post => (
+          <PostCard
+            title={post.data.title}
+            href={`/blog/${post.id}`}
+            date={post.data.date}
+            readingTime={post.data.reading_time}
+            abstract={(post.data as Extended).abstract ?? post.data.description}
+            coverImage={(post.data as Extended).cover_image}
+          />
+        ))}
+      </div>
+      <a href="/blog" class="view-all">All posts →</a>
+    </section>
+  )}
+  {allPosts.length === 0 && (
+    <div class="empty-state">
+      <p>No posts published yet.</p>
+      <p>Add a Markdown file to your vault's <code>blog/</code> folder with <code>publish: true</code>.</p>
+    </div>
+  )}
+</Base>
+

package/src/pages/tags/[tag].astro

@@ -0,0 +1,43 @@
+---
+import { getCollection } from 'astro:content';
+import Base from '@karaoke-cms/astro/layouts/Base.astro';
+import { siteTitle } from 'virtual:karaoke-cms/config';
+
+export async function getStaticPaths() {
+  const posts = await getCollection('blog', ({ data }) => data.publish === true);
+
+  const tags = new Set<string>();
+  for (const entry of posts) {
+    for (const tag of entry.data.tags ?? []) tags.add(tag);
+  }
+
+  return [...tags].map(tag => ({
+    params: { tag },
+    props: {
+      tag,
+      entries: posts
+        .filter(e => e.data.tags?.includes(tag))
+        .sort((a, b) => (b.data.date?.valueOf() ?? 0) - (a.data.date?.valueOf() ?? 0)),
+    },
+  }));
+}
+
+const { tag, entries } = Astro.props;
+---
+
+<Base title={`#${tag} — ${siteTitle}`}>
+  <div class="listing-header">
+    <h1>#{tag}</h1>
+    <p><a href="/tags">← All tags</a></p>
+  </div>
+  <ul class="post-list">
+    {entries.map(entry => (
+      <li>
+        {entry.data.date && (
+          <span class="post-date">{entry.data.date.toISOString().slice(0, 10)}</span>
+        )}
+        <a href={`/blog/${entry.id}`}>{entry.data.title}</a>
+      </li>
+    ))}
+  </ul>
+</Base>

package/src/pages/tags/index.astro

@@ -0,0 +1,37 @@
+---
+import { getCollection } from 'astro:content';
+import Base from '@karaoke-cms/astro/layouts/Base.astro';
+import { siteTitle } from 'virtual:karaoke-cms/config';
+
+const posts = await getCollection('blog', ({ data }) => data.publish === true);
+
+const counts = new Map<string, number>();
+for (const entry of posts) {
+  for (const tag of entry.data.tags ?? []) {
+    counts.set(tag, (counts.get(tag) ?? 0) + 1);
+  }
+}
+
+const tags = [...counts.entries()].sort((a, b) => a[0].localeCompare(b[0]));
+---
+
+<Base title={`Tags — ${siteTitle}`}>
+  <div class="listing-header">
+    <h1>Tags</h1>
+  </div>
+  {tags.length > 0 ? (
+    <ul class="tag-list">
+      {tags.map(([tag, count]) => (
+        <li>
+          <a href={`/tags/${tag}`}>{tag}</a>
+          <span class="tag-count">{count}</span>
+        </li>
+      ))}
+    </ul>
+  ) : (
+    <div class="empty-state">
+      <p>No tags yet.</p>
+      <p>Tags are added to posts via the <code>tags</code> frontmatter field.</p>
+    </div>
+  )}
+</Base>

package/src/styles.css

@@ -0,0 +1,690 @@
+/* @karaoke-cms/theme-blog — editorial layout with hero, card grid, cover images */
+
+:root {
+  --font-body: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
+
+  --font-size-base: 1.0625rem;
+  --font-size-sm:   0.875rem;
+  --font-size-lg:   1.375rem;
+  --font-size-xl:   2.25rem;
+
+  --line-height-body:    1.7;
+  --line-height-heading: 1.15;
+
+  --color-bg:           #ffffff;
+  --color-text:         #111111;
+  --color-muted:        #6b7280;
+  --color-border:       #e5e7eb;
+  --color-link:         #1d4ed8;
+  --color-link-hover:   #1e40af;
+  --color-link-visited: #6d28d9;
+  --color-card-bg:      #f9fafb;
+  --color-hero-overlay: rgba(0, 0, 0, 0.52);
+
+  --width-content: 700px;
+  --width-site:    1100px;
+
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 2rem;
+  --spacing-xl: 4rem;
+
+  --radius-card: 8px;
+  --radius-sm:   4px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg:           #0a0a0a;
+    --color-text:         #f3f4f6;
+    --color-muted:        #9ca3af;
+    --color-border:       #1f2937;
+    --color-link:         #60a5fa;
+    --color-link-hover:   #93c5fd;
+    --color-link-visited: #a78bfa;
+    --color-card-bg:      #111827;
+    --color-hero-overlay: rgba(0, 0, 0, 0.65);
+  }
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: var(--font-size-base);
+}
+
+body {
+  margin: 0;
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-family: var(--font-body);
+  line-height: var(--line-height-body);
+}
+
+/* --- Header --- */
+
+header {
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: var(--spacing-xl);
+}
+
+.header-inner {
+  max-width: var(--width-site);
+  margin: 0 auto;
+  padding: 0 var(--spacing-lg);
+  display: flex;
+  align-items: center;
+  height: 3.5rem;
+  gap: var(--spacing-md);
+}
+
+.site-name {
+  font-weight: 800;
+  font-size: 1.0625rem;
+  text-decoration: none;
+  color: var(--color-text);
+  flex-shrink: 0;
+  letter-spacing: -0.02em;
+}
+
+.site-name:hover {
+  color: var(--color-link);
+}
+
+header nav {
+  margin-left: auto;
+}
+
+header nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: var(--spacing-lg);
+}
+
+header nav ul a {
+  text-decoration: none;
+  color: var(--color-muted);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  padding: var(--spacing-xs) 0;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  transition: color 0.1s;
+}
+
+header nav ul a:hover,
+header nav ul a[aria-current="page"] {
+  color: var(--color-text);
+}
+
+/* --- Page body --- */
+
+.page-body {
+  max-width: var(--width-site);
+  margin: 0 auto;
+  padding: 0 var(--spacing-lg);
+  min-height: calc(100vh - 16rem);
+}
+
+.page-body.has-left,
+.page-body.has-right {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-lg);
+}
+
+.page-body.has-left.has-right {
+  max-width: calc(var(--width-site) + 2 * (var(--width-sidebar, 220px) + var(--spacing-lg)));
+}
+
+main {
+  flex: 1;
+  min-width: 0;
+}
+
+.region-left,
+.region-right {
+  width: var(--width-sidebar, 220px);
+  flex-shrink: 0;
+  padding-top: var(--spacing-xs);
+}
+
+/* --- Featured Hero --- */
+
+.featured-hero {
+  display: block;
+  text-decoration: none;
+  position: relative;
+  min-height: 480px;
+  border-radius: var(--radius-card);
+  overflow: hidden;
+  margin-bottom: var(--spacing-xl);
+  background: var(--color-text);
+  background-image: var(--hero-bg, none);
+  background-size: cover;
+  background-position: center;
+}
+
+.featured-hero-overlay {
+  position: absolute;
+  inset: 0;
+  background: var(--color-hero-overlay);
+  display: flex;
+  align-items: flex-end;
+}
+
+.featured-hero-content {
+  padding: var(--spacing-xl) var(--spacing-xl);
+  max-width: 680px;
+}
+
+.featured-label {
+  display: inline-block;
+  font-size: var(--font-size-sm);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: rgba(255, 255, 255, 0.7);
+  margin-bottom: var(--spacing-sm);
+}
+
+.featured-title {
+  font-size: 2rem;
+  font-weight: 800;
+  color: #ffffff;
+  line-height: var(--line-height-heading);
+  margin: 0 0 var(--spacing-sm);
+  letter-spacing: -0.02em;
+}
+
+.featured-hero:hover .featured-title {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.featured-abstract {
+  font-size: var(--font-size-base);
+  color: rgba(255, 255, 255, 0.85);
+  margin: 0 0 var(--spacing-sm);
+  line-height: 1.6;
+}
+
+.featured-date {
+  font-size: var(--font-size-sm);
+  color: rgba(255, 255, 255, 0.6);
+  font-variant-numeric: tabular-nums;
+}
+
+/* --- Post card grid --- */
+
+.section-heading {
+  font-size: var(--font-size-sm);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--color-muted);
+  margin: 0 0 var(--spacing-lg);
+}
+
+.posts-grid-section {
+  margin-bottom: var(--spacing-xl);
+}
+
+.posts-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--spacing-lg);
+  margin-bottom: var(--spacing-lg);
+}
+
+.post-card {
+  display: flex;
+  flex-direction: column;
+  text-decoration: none;
+  color: inherit;
+  background: var(--color-card-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-card);
+  overflow: hidden;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.post-card:hover {
+  border-color: var(--color-link);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.card-cover {
+  height: 160px;
+  background-size: cover;
+  background-position: center;
+  background-color: var(--color-border);
+}
+
+.card-body {
+  padding: var(--spacing-md);
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.card-title {
+  font-size: 1rem;
+  font-weight: 700;
+  margin: 0 0 var(--spacing-sm);
+  line-height: var(--line-height-heading);
+  color: var(--color-text);
+}
+
+.post-card:hover .card-title {
+  color: var(--color-link);
+}
+
+.card-abstract {
+  font-size: var(--font-size-sm);
+  color: var(--color-muted);
+  margin: 0 0 var(--spacing-sm);
+  line-height: 1.55;
+  flex: 1;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.card-meta {
+  display: flex;
+  gap: var(--spacing-sm);
+  font-size: var(--font-size-sm);
+  color: var(--color-muted);
+  font-variant-numeric: tabular-nums;
+  margin-top: auto;
+}
+
+/* --- Footer --- */
+
+footer {
+  border-top: 1px solid var(--color-border);
+  margin-top: var(--spacing-xl);
+}
+
+.footer-inner {
+  max-width: var(--width-site);
+  margin: 0 auto;
+  padding: var(--spacing-lg) var(--spacing-lg);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+  color: var(--color-muted);
+  font-size: var(--font-size-sm);
+}
+
+.footer-attr {
+  margin-left: auto;
+}
+
+footer a {
+  color: var(--color-muted);
+  text-decoration: none;
+}
+
+footer a:hover {
+  color: var(--color-link);
+}
+
+/* --- Typography --- */
+
+h1, h2, h3, h4 {
+  line-height: var(--line-height-heading);
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  margin-top: 0;
+}
+
+h1 { font-size: var(--font-size-xl); }
+h2 { font-size: var(--font-size-lg); }
+
+a {
+  color: var(--color-link);
+}
+
+a:hover {
+  color: var(--color-link-hover);
+}
+
+a:visited {
+  color: var(--color-link-visited);
+}
+
+code {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  background: var(--color-border);
+  padding: 0.15em 0.35em;
+  border-radius: 3px;
+}
+
+pre {
+  background: var(--color-border);
+  padding: var(--spacing-md);
+  overflow-x: auto;
+  border-radius: 6px;
+}
+
+pre code {
+  background: none;
+  padding: 0;
+}
+
+/* --- Single post --- */
+
+.post-header {
+  max-width: var(--width-content);
+  margin-bottom: var(--spacing-lg);
+}
+
+.post-cover {
+  width: 100%;
+  max-height: 400px;
+  object-fit: cover;
+  border-radius: var(--radius-card);
+  margin-bottom: var(--spacing-lg);
+}
+
+.post-header h1 {
+  font-size: var(--font-size-xl);
+  margin-bottom: var(--spacing-sm);
+}
+
+.post-meta {
+  color: var(--color-muted);
+  font-size: var(--font-size-sm);
+  font-variant-numeric: tabular-nums;
+}
+
+.prose {
+  max-width: var(--width-content);
+}
+
+.prose img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+}
+
+.prose p {
+  margin-top: 0;
+  margin-bottom: var(--spacing-md);
+}
+
+.post-footer {
+  margin-top: var(--spacing-xl);
+  padding-top: var(--spacing-md);
+  border-top: 1px solid var(--color-border);
+  max-width: var(--width-content);
+}
+
+/* --- Listing pages --- */
+
+.listing-header {
+  margin-bottom: var(--spacing-lg);
+}
+
+.listing-header h1 {
+  font-size: var(--font-size-xl);
+  margin-bottom: 0;
+}
+
+/* Simple post list (fallback when no cover images) */
+
+.post-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.post-list li {
+  padding: var(--spacing-sm) 0;
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  gap: var(--spacing-md);
+  align-items: baseline;
+}
+
+.post-list li:first-child {
+  border-top: 1px solid var(--color-border);
+}
+
+.post-date {
+  color: var(--color-muted);
+  font-size: var(--font-size-sm);
+  white-space: nowrap;
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.empty-state {
+  color: var(--color-muted);
+  padding: var(--spacing-lg) 0;
+}
+
+.empty-state p {
+  margin: 0 0 var(--spacing-sm);
+}
+
+/* --- Tags --- */
+
+.post-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+  margin-bottom: var(--spacing-md);
+}
+
+.tag {
+  font-size: var(--font-size-sm);
+  color: var(--color-muted);
+  text-decoration: none;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  padding: 2px 8px;
+  transition: color 0.1s, border-color 0.1s;
+}
+
+.tag:hover {
+  color: var(--color-text);
+  border-color: var(--color-text);
+}
+
+.tag-list {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.tag-list li {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.tag-count {
+  font-size: var(--font-size-sm);
+  color: var(--color-muted);
+}
+
+/* --- Related posts --- */
+
+.related-posts {
+  margin-top: var(--spacing-lg);
+}
+
+.related-label {
+  font-size: var(--font-size-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: 700;
+  color: var(--color-muted);
+  margin: 0 0 var(--spacing-sm);
+}
+
+.related-posts ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.view-all {
+  display: inline-block;
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: var(--color-link);
+  text-decoration: none;
+}
+
+.view-all:hover {
+  text-decoration: underline;
+}
+
+/* --- Sidebar --- */
+
+.sidebar-section {
+  margin-bottom: var(--spacing-lg);
+}
+
+.sidebar-heading {
+  font-size: var(--font-size-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-muted);
+  font-weight: 700;
+  margin: 0 0 var(--spacing-sm);
+}
+
+.sidebar-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.sidebar-list a {
+  font-size: var(--font-size-sm);
+  text-decoration: none;
+  color: var(--color-text);
+}
+
+.sidebar-list a:hover {
+  color: var(--color-link);
+}
+
+/* --- Responsive --- */
+
+@media (max-width: 768px) {
+  .header-inner {
+    padding: 0 var(--spacing-md);
+  }
+
+  .page-body {
+    padding: 0 var(--spacing-md);
+  }
+
+  .footer-inner {
+    padding: var(--spacing-lg) var(--spacing-md);
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+  }
+
+  .footer-attr {
+    margin-left: 0;
+  }
+
+  .featured-hero {
+    min-height: 320px;
+  }
+
+  .featured-hero-content {
+    padding: var(--spacing-lg);
+  }
+
+  .featured-title {
+    font-size: 1.5rem;
+  }
+
+  .posts-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .page-body.has-left,
+  .page-body.has-right {
+    flex-direction: column;
+  }
+
+  .region-left,
+  .region-right {
+    width: 100%;
+  }
+}
+
+/* ── karaoke-menu ─────────────────────────────────────────────────────────── */
+
+nav.karaoke-menu ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* Horizontal — flex row, CSS-only dropdown submenus */
+nav.karaoke-menu[data-orientation="horizontal"] > ul {
+  display: flex;
+  gap: var(--spacing-md, 1rem);
+}
+
+nav.karaoke-menu[data-orientation="horizontal"] li {
+  position: relative;
+}
+
+nav.karaoke-menu[data-orientation="horizontal"] li ul {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 10rem;
+  flex-direction: column;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm, 4px);
+  z-index: 100;
+}
+
+nav.karaoke-menu[data-orientation="horizontal"] li:hover ul,
+nav.karaoke-menu[data-orientation="horizontal"] li:focus-within ul {
+  display: flex;
+}
+
+/* Vertical — flex column, submenus always visible and indented */
+nav.karaoke-menu[data-orientation="vertical"] > ul {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs, 0.25rem);
+}
+
+nav.karaoke-menu[data-orientation="vertical"] li ul {
+  padding-left: var(--spacing-md, 1rem);
+}