@hanology/cham-browser 0.3.8 → 0.4.1

package/template/src/components/SectionBlock.vue

@@ -68,14 +68,17 @@ const paragraphsHtml = computed(() => {
     </div>
     <div v-if="isAnnotations" class="sb-text sb-ann-list">
       <div v-for="entry in entries" :key="entry.num" class="sb-ann-entry">
-        <span class="sb-ann-num">{{ entry.numDisplay }}</span>
-        <span class="sb-ann-term">{{ entry.term }}</span>
-        <PronunciationGroup
-          v-for="seg in entry.pronSegments"
-          :key="seg.lang"
-          :segment="seg"
-        />
-        <span v-if="entry.definition" class="sb-ann-def">{{ entry.definition }}</span>
+        <div class="sb-ann-head">
+          <span class="sb-ann-num">{{ entry.numDisplay }}</span>
+          <span class="sb-ann-term">{{ entry.term }}</span>
+          <PronunciationGroup
+            v-for="seg in entry.pronSegments"
+            :key="seg.lang"
+            :segment="seg"
+            class="sb-ann-pron"
+          />
+        </div>
+        <div v-if="entry.definition" class="sb-ann-def">{{ entry.definition }}</div>
       </div>
     </div>
     <div v-else class="sb-text" v-html="paragraphsHtml" />
@@ -114,11 +117,54 @@ const paragraphsHtml = computed(() => {
 .sb-text :deep(p) { margin-bottom: 16px; text-indent: 2em; }
 .sb-text :deep(p:last-child) { margin-bottom: 0; }
 
+/* ─── Annotation list ─── */
 .sb-ann-list { text-align: start; }
-.sb-ann-entry { margin-bottom: 14px; }
-.sb-ann-num { color: var(--vermillion); font-weight: 600; font-family: var(--sans); }
-.sb-ann-term { font-weight: 600; color: var(--ink); }
-.sb-ann-def { white-space: pre-line; }
+.sb-ann-entry {
+  padding: 12px 0;
+  border-bottom: 1px solid var(--border-light);
+}
+.sb-ann-entry:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+.sb-ann-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px 10px;
+  margin-bottom: 4px;
+}
+.sb-ann-num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  background: var(--vermillion);
+  color: #fff;
+  font-family: var(--sans);
+  font-size: 12px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+.sb-ann-term {
+  font-weight: 700;
+  font-size: 1.05em;
+  color: var(--ink);
+  padding: 2px 8px;
+  background: var(--surface-warm);
+  border-radius: 3px;
+}
+.sb-ann-pron {
+  margin-left: 2px;
+}
+.sb-ann-def {
+  color: var(--ink-mid);
+  line-height: 2;
+  white-space: pre-line;
+  padding-left: 32px;
+}
 
 /* ─── 直排模式 ─── */
 .sb-vertical {
@@ -163,5 +209,38 @@ const paragraphsHtml = computed(() => {
 .sb-vertical .sb-ann-entry {
   margin-bottom: 0;
   margin-left: 16px;
+  padding: 0;
+  border-bottom: none;
+}
+.sb-vertical .sb-ann-head {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+.sb-vertical .sb-ann-num {
+  width: auto;
+  height: auto;
+  border-radius: 0;
+  background: none;
+  color: var(--vermillion);
+  font-size: inherit;
+}
+.sb-vertical .sb-ann-term {
+  background: none;
+  padding: 0;
+  font-size: inherit;
+}
+.sb-vertical .sb-ann-def {
+  padding-left: 0;
+  margin-left: 12px;
+}
+
+@media (max-width: 768px) {
+  .sb-ann-entry {
+    padding: 10px 0;
+  }
+  .sb-ann-def {
+    padding-left: 0;
+  }
 }
 </style>

package/template/src/components/SideNav.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, inject } from 'vue'
 import { useRouter } from 'vue-router'
 import { useReadingMode, THEMES, THEME_LABELS, FONT_SIZES } from '../composables/useReadingMode'
 import type { LayoutMode, FontSize } from '../composables/useReadingMode'
@@ -20,9 +20,10 @@ const emit = defineEmits<{
 
 const { theme, layout, mainFontSize, bodyFontSize, setTheme, setLayout, setMainFontSize, setBodyFontSize } = useReadingMode()
 const { t, setLocale, locale, availableLocales, localeLabels } = useI18n()
-const { logoUrl } = useSiteConfig()
+const { logoUrl, aboutHtml } = useSiteConfig()
 const router = useRouter()
 const settingsOpen = ref(false)
+const aboutPane = inject<{ toggleAbout: () => void }>('aboutPane')
 
 function toggleSettings() { settingsOpen.value = !settingsOpen.value }
 </script>
@@ -31,7 +32,7 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
   <nav class="sidenav">
     <button class="sn-brand" @click="emit('home')" title="首頁">
       <img v-if="logoUrl" :src="logoUrl" alt="" class="sn-logo" />
-      <span v-else class="sn-seal">漢流</span>
+      <span v-else class="sn-seal">文</span>
     </button>
 
     <button class="sn-btn" @click="emit('back')" title="返回">
@@ -49,7 +50,7 @@ function toggleSettings() { settingsOpen.value = !settingsOpen.value }
 
     <div class="sn-spacer" />
 
-    <button class="sn-btn" @click="router.push('/about')" title="關於">
+    <button v-if="aboutHtml" class="sn-btn" @click="aboutPane?.toggleAbout()" title="關於">
       <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
     </button>
 

package/template/src/components/VerticalScroll.vue

@@ -121,4 +121,34 @@ function onTap(event: MouseEvent) {
 :deep(.ann-target.pronunciation.semantic) {
   border-left-color: var(--gold);
 }
+:deep(.ann-target.person) {
+  border-left-color: var(--ann-person);
+}
+:deep(.ann-target.place) {
+  border-left-color: var(--ann-place);
+}
+:deep(.ann-target.event) {
+  border-left-color: var(--ann-event);
+}
+:deep(.ann-target.date) {
+  border-left-color: var(--ann-date);
+}
+:deep(.ann-target.allusion) {
+  border-left-color: var(--ann-allusion);
+}
+:deep(.ann-target.person:hover) {
+  background: rgba(58, 90, 140, 0.08);
+}
+:deep(.ann-target.place:hover) {
+  background: rgba(139, 105, 20, 0.08);
+}
+:deep(.ann-target.event:hover) {
+  background: rgba(107, 76, 138, 0.08);
+}
+:deep(.ann-target.date:hover) {
+  background: rgba(42, 122, 122, 0.08);
+}
+:deep(.ann-target.allusion:hover) {
+  background: rgba(181, 101, 29, 0.08);
+}
 </style>

package/template/src/composables/useData.ts

@@ -28,7 +28,12 @@ async function loadShared(): Promise<void> {
 
 const authorByName = computed(() => {
   const map = new Map<string, Author>()
-  for (const a of authors.value) map.set(a.name, a)
+  for (const a of authors.value) {
+    const existing = map.get(a.name)
+    if (!existing || (!existing.bio && a.bio)) {
+      map.set(a.name, a)
+    }
+  }
   return map
 })
 

package/template/src/composables/useI18n.ts

@@ -14,6 +14,7 @@ const messages: Record<Locale, Record<string, string>> = {
     'site.subtitle': 'Classical Chinese Text Library',
     'nav.back': '返回',
     'nav.home': '首頁',
+    'nav.about': '關 於',
     'settings.layout': '版面',
     'settings.vertical': '直排',
     'settings.horizontal': '橫排',
@@ -52,12 +53,23 @@ const messages: Record<Locale, Record<string, string>> = {
     'stat.pieceCount': '{count} 篇',
     'stat.authorCount': '{count} 位作者',
     'stat.piecePoems': '篇詩文',
+    'stat.authorsLabel': '位作者',
+    'catalog.noResults': '未找到符合「{query}」的篇章',
+    'catalog.enterLibrary': '進 入 文 庫 ↓',
+    'piece.noAuthorData': '暫無作者資料',
+    'piece.collected': '{count} 篇收錄',
+    'role.author': '作者',
+    'role.commentator': '註者',
+    'role.editor': '編者',
+    'role.translator': '譯者',
+    'role.annotator': '注者',
   },
   'zh-Hans': {
     'site.title': '古典诗文图书馆',
     'site.subtitle': 'Classical Chinese Text Library',
     'nav.back': '返回',
     'nav.home': '首页',
+    'nav.about': '关 于',
     'settings.layout': '版面',
     'settings.vertical': '直排',
     'settings.horizontal': '横排',
@@ -96,12 +108,23 @@ const messages: Record<Locale, Record<string, string>> = {
     'stat.pieceCount': '{count} 篇',
     'stat.authorCount': '{count} 位作者',
     'stat.piecePoems': '篇诗文',
+    'stat.authorsLabel': '位作者',
+    'catalog.noResults': '未找到符合「{query}」的篇章',
+    'catalog.enterLibrary': '进 入 文 库 ↓',
+    'piece.noAuthorData': '暂无作者资料',
+    'piece.collected': '{count} 篇收录',
+    'role.author': '作者',
+    'role.commentator': '注者',
+    'role.editor': '编者',
+    'role.translator': '译者',
+    'role.annotator': '注者',
   },
   'en': {
     'site.title': 'Classical Chinese Text Library',
     'site.subtitle': 'Classical Chinese Text Library',
     'nav.back': 'Back',
     'nav.home': 'Home',
+    'nav.about': 'About',
     'settings.layout': 'Layout',
     'settings.vertical': 'Vertical',
     'settings.horizontal': 'Horizontal',
@@ -140,6 +163,16 @@ const messages: Record<Locale, Record<string, string>> = {
     'stat.pieceCount': '{count} works',
     'stat.authorCount': '{count} authors',
     'stat.piecePoems': 'works',
+    'stat.authorsLabel': 'authors',
+    'catalog.noResults': 'No results for "{query}"',
+    'catalog.enterLibrary': 'Enter Library ↓',
+    'piece.noAuthorData': 'No author data available',
+    'piece.collected': '{count} works collected',
+    'role.author': 'Author',
+    'role.commentator': 'Commentator',
+    'role.editor': 'Editor',
+    'role.translator': 'Translator',
+    'role.annotator': 'Annotator',
   },
 }
 

package/template/src/composables/useReadingMode.ts

@@ -1,4 +1,4 @@
-import { ref, watch } from 'vue'
+import { ref, watch, nextTick } from 'vue'
 
 export type Theme = 'light' | 'sepia' | 'dark' | 'oled'
 export type LayoutMode = 'horizontal' | 'vertical'
@@ -21,18 +21,23 @@ const mainFontSize = ref<FontSize>(24)
 const bodyFontSize = ref<FontSize>(16)
 
 if (!import.meta.env.SSR) {
+  // Theme and font sizes only affect CSS, safe to apply before hydration
   const savedTheme = localStorage.getItem('theme') as Theme | null
   if (savedTheme && THEMES.includes(savedTheme)) theme.value = savedTheme
 
-  const savedLayout = localStorage.getItem('layout') as LayoutMode | null
-  if (savedLayout === 'vertical' || savedLayout === 'horizontal') layout.value = savedLayout
-
   const savedMain = parseInt(localStorage.getItem('mainFontSize') || '', 10)
   if (FONT_SIZES.includes(savedMain as any)) mainFontSize.value = savedMain as FontSize
 
   const savedBody = parseInt(localStorage.getItem('bodyFontSize') || '', 10)
   if (FONT_SIZES.includes(savedBody as any)) bodyFontSize.value = savedBody as FontSize
 
+  // Layout controls v-if/v-else DOM structure — must defer to after hydration
+  // to avoid SSR/client mismatch (SSR always renders vertical)
+  nextTick(() => {
+    const savedLayout = localStorage.getItem('layout') as LayoutMode | null
+    if (savedLayout === 'vertical' || savedLayout === 'horizontal') layout.value = savedLayout
+  })
+
   watch(theme, t => {
     document.documentElement.setAttribute('data-theme', t)
     localStorage.setItem('theme', t)

package/template/src/composables/useSiteConfig.ts

@@ -1,11 +1,32 @@
-export interface SiteConfig {
-  logoUrl?: string
-}
+import { computed } from 'vue'
+import { useReadingMode } from './useReadingMode'
+import type { Theme } from './useReadingMode'
+
+const LOGO_LIGHT = import.meta.env.CHAM_LOGO_URL || undefined
+const LOGO_DARK = import.meta.env.CHAM_LOGO_DARK_URL || undefined
+const SITE_TITLE = import.meta.env.CHAM_SITE_TITLE || ''
+const SITE_SUBTITLE = import.meta.env.CHAM_SITE_SUBTITLE || ''
+const ABOUT_HTML = import.meta.env.CHAM_ABOUT_HTML || ''
 
-const config: SiteConfig = {
-  logoUrl: import.meta.env.CHAM_LOGO_URL || undefined,
+const DARK_THEMES: Theme[] = ['dark', 'oled']
+
+export interface SiteConfig {
+  siteTitle: string
+  siteSubtitle: string
+  aboutHtml: string
+  logoUrl: ReturnType<typeof computed<string | undefined>>
 }
 
 export function useSiteConfig(): SiteConfig {
-  return config
+  const { theme } = useReadingMode()
+  const logoUrl = computed(() => {
+    if (DARK_THEMES.includes(theme.value) && LOGO_DARK) return LOGO_DARK
+    return LOGO_LIGHT
+  })
+  return {
+    siteTitle: SITE_TITLE,
+    siteSubtitle: SITE_SUBTITLE,
+    aboutHtml: ABOUT_HTML,
+    logoUrl,
+  }
 }

package/template/src/router.ts

@@ -8,11 +8,9 @@ import LibraryHome from './views/LibraryHome.vue'
 import BookHome from './views/BookHome.vue'
 import PieceView from './views/PieceView.vue'
 import AuthorView from './views/AuthorView.vue'
-import AboutView from './views/AboutView.vue'
 
 export const routes: RouteRecordRaw[] = [
   { path: '/', component: LibraryHome },
-  { path: '/about', component: AboutView },
   { path: '/author/:name', component: AuthorView, props: true },
   { path: '/:bookId', component: BookHome, props: true },
   { path: '/:bookId/:num', component: PieceView, props: true },

package/template/src/styles/main.css

@@ -15,6 +15,11 @@
   --gold: #9a7d3a;
   --gold-light: #c9a84c;
   --jade: #3a6b5e;
+  --ann-person: #3a5a8c;
+  --ann-place: #8b6914;
+  --ann-event: #6b4c8a;
+  --ann-date: #2a7a7a;
+  --ann-allusion: #b5651d;
   --border: #d8cdb8;
   --border-light: #e8e0d0;
   --shadow-rgb: 26,26,26;
@@ -36,6 +41,11 @@
   --gold: #8a6d2a;
   --gold-light: #b89540;
   --jade: #2d5a4e;
+  --ann-person: #3a5a8c;
+  --ann-place: #8b6914;
+  --ann-event: #6b4c8a;
+  --ann-date: #2a7a7a;
+  --ann-allusion: #b5651d;
   --border: #c9b896;
   --border-light: #d8cab0;
   --shadow-rgb: 74,63,46;
@@ -57,6 +67,11 @@
   --gold: #c9a84c;
   --gold-light: #d8b860;
   --jade: #5aaa98;
+  --ann-person: #6a8ab4;
+  --ann-place: #b8943a;
+  --ann-event: #9a7cb4;
+  --ann-date: #5ab4b4;
+  --ann-allusion: #d4843a;
   --border: #48484a;
   --border-light: #555557;
   --shadow-rgb: 0,0,0;
@@ -78,6 +93,11 @@
   --gold: #e8c840;
   --gold-light: #f0d860;
   --jade: #40c8a8;
+  --ann-person: #6a8ab4;
+  --ann-place: #b8943a;
+  --ann-event: #9a7cb4;
+  --ann-date: #5ab4b4;
+  --ann-allusion: #d4843a;
   --border: #333333;
   --border-light: #444444;
   --shadow-rgb: 0,0,0;
@@ -196,3 +216,71 @@ button { font-family: inherit; }
 @media (max-width: 768px) {
   :root { --nav-width: 44px; }
 }
+
+/* ===== VERTICAL PAGE LAYOUT ===== */
+.v-page {
+  height: 100vh;
+  display: flex;
+  flex-direction: row-reverse;
+  overflow-x: auto;
+  overflow-y: hidden;
+  margin-right: var(--nav-width, 56px);
+  scrollbar-width: thin;
+  scrollbar-color: var(--gold) transparent;
+  scroll-snap-type: x proximity;
+}
+.v-page::-webkit-scrollbar { height: 4px; }
+.v-page::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
+
+/* ===== VIEW LOADING STATE ===== */
+.v-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  gap: 16px;
+}
+.v-loading .seal {
+  width: 72px; height: 72px;
+  border: 2px solid var(--vermillion);
+  border-radius: 4px;
+  display: flex; align-items: center; justify-content: center;
+  animation: pulse 2s ease-in-out infinite;
+}
+.v-loading .char {
+  font-family: var(--serif);
+  font-size: 36px; font-weight: 900;
+  color: var(--vermillion);
+  line-height: 1;
+}
+.v-loading .label {
+  font-size: 13px;
+  color: var(--ink-faint);
+  letter-spacing: 4px;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 0.6; transform: scale(0.96); }
+  50% { opacity: 1; transform: scale(1); }
+}
+
+/* ===== FULL-PAGE LOADING (LibraryHome, PieceView redirect) ===== */
+.page-loading {
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  height: 100vh;
+}
+.page-loading-seal {
+  width: 56px; height: 56px;
+  border: 2px solid var(--vermillion);
+  border-radius: 4px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 28px; font-weight: 900;
+  color: var(--vermillion);
+  animation: pulse 1.2s ease-in-out infinite;
+}
+.page-loading-logo {
+  width: 56px; height: auto;
+  object-fit: contain;
+  animation: pulse 1.2s ease-in-out infinite;
+}

package/template/src/types.ts

@@ -165,6 +165,14 @@ export interface Author {
   dynasty: string
   poemCount: number
   bio?: string
+  born?: string
+  died?: string
+  courtesyName?: string
+  artName?: string
+  wikidata?: string
+  ctextId?: string
+  wikipediaZh?: string
+  wikipediaEn?: string
 }
 
 export interface Dynasty {

package/template/src/views/BookHome.vue

@@ -5,6 +5,7 @@ import { useBook } from '../composables/useBook'
 import { useTitle } from '../composables/useTitle'
 import { useReadingMode } from '../composables/useReadingMode'
 import { useHorizontalScroll } from '../composables/useHorizontalScroll'
+import { useI18n } from '../composables/useI18n'
 import PoemCard from '../components/PoemCard.vue'
 import SideNav from '../components/SideNav.vue'
 import ReadingToolbar from '../components/ReadingToolbar.vue'
@@ -22,6 +23,7 @@ const { layout } = useReadingMode()
 const isVertical = computed(() => layout.value === 'vertical')
 const vPageRef = ref<HTMLElement | null>(null)
 const vScroll = useHorizontalScroll(vPageRef)
+const { t } = useI18n()
 
 const filtered = computed(() => {
   const q = searchQuery.value.toLowerCase()
@@ -72,11 +74,11 @@ function scrollToCatalog() {
       </section>
 
       <section class="v-catalog-col">
-        <span class="v-ch-title">篇 章 目 錄</span>
+        <span class="v-ch-title">{{ t('catalog.title') }}</span>
         <span class="v-ch-line"> </span>
-        <span class="v-count">共 {{ filtered.length }} 篇</span>
+        <span class="v-count">{{ t('catalog.total', { count: filtered.length }) }}</span>
         <span class="v-search-wrap">
-          <input v-model="searchQuery" class="v-search" placeholder="搜索詩題、作者…" />
+          <input v-model="searchQuery" class="v-search" :placeholder="t('catalog.search')" />
         </span>
       </section>
 
@@ -104,28 +106,28 @@ function scrollToCatalog() {
         <div class="h-stats">
           <div class="h-stat-block">
             <div class="h-stat-num">{{ pieces.length }}</div>
-            <div class="h-stat-label">篇詩文</div>
+            <div class="h-stat-label">{{ t('stat.piecePoems') }}</div>
           </div>
           <div class="h-stat-block">
             <div class="h-stat-num">{{ authorCount }}</div>
-            <div class="h-stat-label">位作者</div>
+            <div class="h-stat-label">{{ t('stat.authorsLabel') }}</div>
           </div>
         </div>
         <p v-if="meta?.publisher" class="h-publisher">{{ meta.publisher }}</p>
         <button class="h-cta" @click="scrollToCatalog">
-          進 入 文 庫 ↓
+          {{ t('catalog.enterLibrary') }}
         </button>
       </div>
     </section>
 
     <section class="h-catalog">
       <div class="h-catalog-header">
-        <h2>篇 章 目 錄</h2>
+        <h2>{{ t('catalog.title') }}</h2>
         <div class="h-line"></div>
         <p v-if="meta?.publisher">{{ meta.publisher }}</p>
       </div>
       <div class="h-filter">
-        <input v-model="searchQuery" class="h-search" placeholder="搜索詩題、作者…" />
+        <input v-model="searchQuery" class="h-search" :placeholder="t('catalog.search')" />
       </div>
       <div class="h-grid">
         <PoemCard
@@ -137,6 +139,10 @@ function scrollToCatalog() {
           @click="openPiece(piece.num)"
         />
       </div>
+      <div v-if="searchQuery && filtered.length === 0" class="h-empty">
+        <span class="h-empty-icon">🔍</span>
+        <p>{{ t('catalog.noResults', { query: searchQuery }) }}</p>
+      </div>
     </section>
 
     <BackToTop />
@@ -148,20 +154,9 @@ function scrollToCatalog() {
 /* ═══════ 直排模式 ═══════ */
 
 .v-page {
-  height: 100vh;
-  display: flex;
-  flex-direction: row-reverse;
-  overflow-x: auto;
-  overflow-y: hidden;
-  margin-right: var(--nav-width, 56px);
   padding: 0 32px;
   background: linear-gradient(90deg, var(--paper) 0%, var(--paper-warm) 100%);
-  scrollbar-width: thin;
-  scrollbar-color: var(--gold) transparent;
-  scroll-snap-type: x proximity;
 }
-.v-page::-webkit-scrollbar { height: 4px; }
-.v-page::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
 
 .v-hero {
   writing-mode: vertical-rl;
@@ -367,10 +362,31 @@ function scrollToCatalog() {
   animation: cardEnter 0.4s var(--ease-out-expo) both;
 }
 
+.h-empty {
+  text-align: center;
+  padding: 60px 20px;
+  color: var(--ink-faint);
+  font-family: var(--sans);
+  font-size: 15px;
+  letter-spacing: 1px;
+}
+.h-empty-icon {
+  display: block;
+  font-size: 40px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
 @media (max-width: 768px) {
-  .h-stats { gap: 24px; }
+  .h-hero { min-height: 80vh; height: auto; padding: 60px 16px; }
+  .h-ornament { font-size: 32px; letter-spacing: 12px; margin-bottom: 20px; }
+  .h-subtitle { margin-bottom: 32px; }
+  .h-divider { margin-bottom: 32px; }
+  .h-stats { gap: 24px; margin-bottom: 32px; }
   .h-stat-num { font-size: 28px; }
-  .h-catalog { padding: 40px 20px; }
+  .h-publisher { margin-bottom: 32px; }
+  .h-cta { padding: 12px 32px; font-size: 14px; letter-spacing: 2px; }
+  .h-catalog { padding: 40px 16px; }
   .h-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
   .h-search { width: 100%; }
   .v-page { padding: 0 16px; }
@@ -380,4 +396,12 @@ function scrollToCatalog() {
   }
   .v-search { height: 160px; }
 }
+
+@media (max-width: 480px) {
+  .h-hero { min-height: 70vh; }
+  .h-title { letter-spacing: 6px; }
+  .h-cta { width: 80%; justify-content: center; }
+  .h-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
+  .h-catalog-header h2 { font-size: 22px; }
+}
 </style>