diff --git a/.screenshots/browse-redesign/after-dark-desktop.png b/.screenshots/browse-redesign/after-dark-desktop.png
new file mode 100644
index 00000000..4e5ccd76
Binary files /dev/null and b/.screenshots/browse-redesign/after-dark-desktop.png differ
diff --git a/.screenshots/browse-redesign/after-light-desktop.png b/.screenshots/browse-redesign/after-light-desktop.png
new file mode 100644
index 00000000..b8f79675
Binary files /dev/null and b/.screenshots/browse-redesign/after-light-desktop.png differ
diff --git a/.screenshots/browse-redesign/after-mobile-375.png b/.screenshots/browse-redesign/after-mobile-375.png
new file mode 100644
index 00000000..7e3c2dc7
Binary files /dev/null and b/.screenshots/browse-redesign/after-mobile-375.png differ
diff --git a/.screenshots/browse-redesign/before-light-desktop.png b/.screenshots/browse-redesign/before-light-desktop.png
new file mode 100644
index 00000000..80b4a3bb
Binary files /dev/null and b/.screenshots/browse-redesign/before-light-desktop.png differ
diff --git a/docs/.vitepress/theme/FormulaBrowser.vue b/docs/.vitepress/theme/FormulaBrowser.vue
index df686037..5603e2c4 100644
--- a/docs/.vitepress/theme/FormulaBrowser.vue
+++ b/docs/.vitepress/theme/FormulaBrowser.vue
@@ -7,26 +7,28 @@ const formulasData = ref([])
 const searchQuery = ref('')
 const selectedLicenses = ref(['all'])
 const selectedSources = ref(['all'])
+const showMobileFilters = ref(false)
+const basePath = import.meta.env.BASE_URL || '/'
 
 const licenseOptions = [
-  { value: 'all', label: 'All Licenses', icon: 'all', count: 0 },
-  { value: 'ofl', label: 'OFL 1.1', icon: 'ofl', count: 0 },
-  { value: 'apache', label: 'Apache 2.0', icon: 'apache', count: 0 },
-  { value: 'mit', label: 'MIT', icon: 'mit', count: 0 },
-  { value: 'cc0', label: 'CC0 / Public Domain', icon: 'cc0', count: 0 },
-  { value: 'other_open', label: 'Other Open Source', icon: 'open', count: 0 },
-  { value: 'freely_dist', label: 'Freely Distributable', icon: 'free', count: 0 },
-  { value: 'platform', label: 'Platform Tied', icon: 'platform', count: 0 },
-  { value: 'bundled', label: 'Bundled Software', icon: 'bundled', count: 0 },
-  { value: 'unknown', label: 'License Not Specified', icon: 'unknown', count: 0 },
+  { value: 'all', label: 'All', count: 0 },
+  { value: 'ofl', label: 'OFL', count: 0 },
+  { value: 'apache', label: 'Apache', count: 0 },
+  { value: 'mit', label: 'MIT', count: 0 },
+  { value: 'cc0', label: 'CC0', count: 0 },
+  { value: 'other_open', label: 'Other Open', count: 0 },
+  { value: 'freely_dist', label: 'Freely Dist.', count: 0 },
+  { value: 'platform', label: 'Platform', count: 0 },
+  { value: 'bundled', label: 'Bundled', count: 0 },
+  { value: 'unknown', label: 'Unknown', count: 0 },
 ]
 
 const sourceOptions = [
-  { value: 'all', label: 'All Sources', icon: 'all', count: 0 },
-  { value: 'google', label: 'Google Fonts', icon: 'google', count: 0 },
-  { value: 'sil', label: 'SIL International', icon: 'sil', count: 0 },
-  { value: 'macos', label: 'Apple', icon: 'apple', count: 0 },
-  { value: 'manual', label: 'Expert Curated', icon: 'fontist', count: 0 },
+  { value: 'all', label: 'All', count: 0 },
+  { value: 'google', label: 'Google', count: 0 },
+  { value: 'sil', label: 'SIL', count: 0 },
+  { value: 'macos', label: 'Apple', count: 0 },
+  { value: 'manual', label: 'Curated', count: 0 },
 ]
 
 // Map URL param values to internal license groups
@@ -81,33 +83,14 @@ function getSourceBadge(f) {
   return `<img src="${basePath}sources/fontist.svg" alt="Expert Curated" class="source-icon" title="Expert Curated">`
 }
 
-function getSourceIcon(icon) {
-  const basePath = import.meta.env.BASE_URL || '/'
-  const icons = {
-    all: `<img src="${basePath}sources/all.svg" alt="All" class="filter-icon-img">`,
-    google: `<img src="${basePath}sources/google.svg" alt="Google" class="filter-icon-img">`,
-    sil: `<img src="${basePath}sources/sil.svg" alt="SIL" class="filter-icon-img">`,
-    apple: `<img src="${basePath}sources/apple.svg" alt="Apple" class="filter-icon-img">`,
-    fontist: `<img src="${basePath}sources/fontist.svg" alt="Fontist" class="filter-icon-img">`,
-  }
-  return icons[icon] || icon
+function sourceLabel(value) {
+  const opt = sourceOptions.find(o => o.value === value)
+  return opt ? opt.label : value
 }
 
-function getLicenseIcon(icon) {
-  const basePath = import.meta.env.BASE_URL || '/'
-  const icons = {
-    all: `<img src="${basePath}licenses/open.svg" alt="All" class="filter-icon-img">`,
-    ofl: `<img src="${basePath}licenses/ofl.svg" alt="OFL" class="filter-icon-img">`,
-    apache: `<img src="${basePath}licenses/apache.svg" alt="Apache" class="filter-icon-img">`,
-    mit: `<img src="${basePath}licenses/mit.svg" alt="MIT" class="filter-icon-img">`,
-    cc0: `<img src="${basePath}licenses/cc0.svg" alt="CC0" class="filter-icon-img">`,
-    open: `<img src="${basePath}licenses/open.svg" alt="Open Source" class="filter-icon-img">`,
-    free: `<img src="${basePath}licenses/freely-distributed.svg" alt="Free" class="filter-icon-img">`,
-    platform: `<img src="${basePath}licenses/platform-tied.svg" alt="Platform Tied" class="filter-icon-img">`,
-    bundled: `<img src="${basePath}licenses/bundled.svg" alt="Bundled" class="filter-icon-img">`,
-    unknown: `<img src="${basePath}licenses/unknown.svg" alt="Unknown" class="filter-icon-img">`,
-  }
-  return icons[icon] || icon
+function licenseLabel(value) {
+  const opt = licenseOptions.find(o => o.value === value)
+  return opt ? opt.label : value
 }
 
 // Read URL params on mount
@@ -199,6 +182,18 @@ const activeLetters = computed(() => {
   })
 })
 
+const activeLicenseChips = computed(() => {
+  if (selectedLicenses.value.includes('all')) return []
+  return selectedLicenses.value.map(v => ({ kind: 'license', value: v, label: licenseLabel(v) }))
+})
+
+const activeSourceChips = computed(() => {
+  if (selectedSources.value.includes('all')) return []
+  return selectedSources.value.map(v => ({ kind: 'source', value: v, label: sourceLabel(v) }))
+})
+
+const activeChips = computed(() => [...activeLicenseChips.value, ...activeSourceChips.value])
+
 function scrollToLetter(letter) {
   const el = document.getElementById('letter-' + letter)
   if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })
@@ -211,8 +206,9 @@ function goToFormula(slug) {
   // "Page not found" 404 even though the SSR HTML exists on the server.
   // Bypass SPA routing for formula clicks — full page load fetches the
   // correct HTML which loads the correct app chunk for that formula's batch.
-  const basePath = import.meta.env.BASE_URL || '/'
-  window.location.href = `${basePath}browse/${slug}/`
+  // No trailing slash: cleanUrls:true route map expects /browse/foo, and
+  // GitHub Pages serves /browse/foo/index.html for either form.
+  window.location.href = `${basePath}browse/${slug}`
 }
 
 function toggleLicense(value) {
@@ -230,365 +226,749 @@ function toggleSource(value) {
     selectedSources.value = [value]
   }
 }
+
+function removeChip(chip) {
+  if (chip.kind === 'license') selectedLicenses.value = ['all']
+  else selectedSources.value = ['all']
+}
+
+function clearAllFilters() {
+  selectedLicenses.value = ['all']
+  selectedSources.value = ['all']
+  searchQuery.value = ''
+}
 </script>
 
 <template>
-  <div class="formulas-browser">
-    <div class="search-container">
-      <input v-model="searchQuery" type="text" placeholder="Search fonts by name, family, or formula key..." class="search-input" />
-      <span class="result-count">{{ filteredFormulas.length }} formulas</span>
-    </div>
-
-    <div class="browser-layout">
-      <aside class="filters-sidebar">
-        <div class="filter-section">
-          <h4>License</h4>
-          <label v-for="opt in licenseOptions" :key="opt.value" class="filter-checkbox">
-            <input type="checkbox" :checked="selectedLicenses.includes(opt.value)" @change="toggleLicense(opt.value)" />
-            <span class="filter-label"><span class="filter-icon" v-html="getLicenseIcon(opt.icon)"></span> {{ opt.label }} <span class="filter-count">({{ opt.count }})</span></span>
-          </label>
+  <div class="gallery">
+    <!-- Sticky masthead: hero search + alphabet wayfinding -->
+    <header class="masthead">
+      <div class="masthead-inner">
+        <div class="search-hero">
+          <svg class="search-glyph" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
+            <circle cx="11" cy="11" r="7" />
+            <path d="m20 20-3.2-3.2" />
+          </svg>
+          <input
+            v-model="searchQuery"
+            type="search"
+            placeholder="Search typefaces, families, formulas…"
+            class="search-field"
+            autocomplete="off"
+            spellcheck="false"
+          />
+          <span class="result-count">{{ filteredFormulas.length }} <span class="result-count-word">{{ filteredFormulas.length === 1 ? 'specimen' : 'specimens' }}</span></span>
         </div>
-        <div class="filter-section">
-          <h4>Source</h4>
-          <label v-for="opt in sourceOptions" :key="opt.value" class="filter-checkbox">
-            <input type="checkbox" :checked="selectedSources.includes(opt.value)" @change="toggleSource(opt.value)" />
-            <span class="filter-label"><span class="filter-icon" v-html="getSourceIcon(opt.icon)"></span> {{ opt.label }} <span class="filter-count">({{ opt.count }})</span></span>
-          </label>
-        </div>
-      </aside>
 
-      <main class="results-main">
-        <nav class="alpha-nav">
-          <button v-for="letter in alphabet" :key="letter" @click="scrollToLetter(letter)" :class="{ 'has-content': groupedFormulas[letter] }" :disabled="!groupedFormulas[letter]">{{ letter }}</button>
+        <nav class="alpha-strip" aria-label="Jump to letter">
+          <button
+            v-for="letter in activeLetters"
+            :key="letter"
+            class="alpha-letter"
+            @click="scrollToLetter(letter)"
+          >{{ letter }}</button>
         </nav>
+      </div>
+    </header>
+
+    <!-- Filter bar: horizontal pills -->
+    <section class="filter-bar" :class="{ 'is-open': showMobileFilters }">
+      <div class="filter-group">
+        <span class="filter-key">License</span>
+        <div class="pill-row">
+          <button
+            v-for="opt in licenseOptions"
+            :key="'l-' + opt.value"
+            class="pill"
+            :class="{ active: selectedLicenses.includes(opt.value) }"
+            @click="toggleLicense(opt.value)"
+          >
+            <span class="pill-label">{{ opt.label }}</span>
+            <span class="pill-count">{{ opt.count }}</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="filter-group">
+        <span class="filter-key">Source</span>
+        <div class="pill-row">
+          <button
+            v-for="opt in sourceOptions"
+            :key="'s-' + opt.value"
+            class="pill"
+            :class="{ active: selectedSources.includes(opt.value) }"
+            @click="toggleSource(opt.value)"
+          >
+            <span class="pill-label">{{ opt.label }}</span>
+            <span class="pill-count">{{ opt.count }}</span>
+          </button>
+        </div>
+      </div>
+
+      <div v-if="activeChips.length" class="active-chips">
+        <button
+          v-for="chip in activeChips"
+          :key="chip.kind + '-' + chip.value"
+          class="chip"
+          @click="removeChip(chip)"
+        >
+          <span class="chip-kind">{{ chip.kind }}</span>
+          <span class="chip-label">{{ chip.label }}</span>
+          <span class="chip-x" aria-hidden="true">×</span>
+        </button>
+        <button class="chip clear-all" @click="clearAllFilters">Clear all</button>
+      </div>
+    </section>
+
+    <!-- Mobile filter toggle -->
+    <button class="mobile-filter-toggle" @click="showMobileFilters = !showMobileFilters">
+      <span>Filters</span>
+      <span v-if="activeChips.length" class="toggle-badge">{{ activeChips.length }}</span>
+      <span class="toggle-caret" :class="{ open: showMobileFilters }">▾</span>
+    </button>
+
+    <!-- Gallery: full-width specimen bands -->
+    <div class="gallery-results">
+      <template v-if="activeLetters.length">
+        <section
+          v-for="(letter, idx) in activeLetters"
+          :key="letter"
+          :id="'letter-' + letter"
+          class="letter-group"
+          :class="{ 'band-alt': idx % 2 === 1 }"
+        >
+          <h2 class="letter-mark">{{ letter }}</h2>
+
+          <a
+            v-for="f in groupedFormulas[letter]"
+            :key="f.slug"
+            :href="`${basePath}browse/${f.slug}`"
+            class="specimen"
+            @click.stop.prevent="goToFormula(f.slug)"
+          >
+            <div class="specimen-meta-top">
+              <span class="badges" :title="f.licenseName">
+                <span class="badge-dot" aria-hidden="true"></span>
+                <span v-html="getLicenseBadge(f)"></span>
+                <span v-html="getSourceBadge(f)"></span>
+              </span>
+            </div>
 
-        <div class="formula-list">
-          <div v-for="letter in activeLetters" :key="letter" :id="'letter-' + letter" class="letter-group">
-            <h3 class="letter-heading">{{ letter }}</h3>
-            <div class="formula-items">
-              <a v-for="f in groupedFormulas[letter]" :key="f.slug" :href="f.slug + '/'" class="formula-item" @click.stop.prevent="goToFormula(f.slug)">
-                <div class="formula-main">
-                  <span class="formula-name">{{ f.name }}</span>
-                  <span class="formula-key">{{ f.formulaName }}</span>
-                </div>
-                <div class="formula-meta">
-                  <span class="formula-badges"><span :title="f.licenseName" v-html="getLicenseBadge(f)"></span> <span :title="f.sourceType" v-html="getSourceBadge(f)"></span></span>
-                  <span class="formula-counts">{{ f.familyCount }} {{ f.familyCount === 1 ? 'family' : 'families' }}, {{ f.styleCount }} {{ f.styleCount === 1 ? 'style' : 'styles' }}</span>
-                </div>
-              </a>
+            <div class="specimen-body">
+              <h3 class="specimen-name">{{ f.name }}</h3>
+              <p class="specimen-sub">
+                <span class="sub-key">{{ f.formulaName }}</span>
+                <span class="sub-sep">·</span>
+                <span>{{ f.familyCount }} {{ f.familyCount === 1 ? 'family' : 'families' }}</span>
+                <span class="sub-sep">·</span>
+                <span>{{ f.styleCount }} {{ f.styleCount === 1 ? 'style' : 'styles' }}</span>
+              </p>
             </div>
-          </div>
-        </div>
-      </main>
+
+            <span class="specimen-cta" aria-hidden="true">
+              View formula
+              <span class="cta-arrow">→</span>
+            </span>
+          </a>
+        </section>
+      </template>
+
+      <div v-else class="empty-state">
+        <p class="empty-head">No typefaces match.</p>
+        <button class="empty-reset" @click="clearAllFilters">Reset filters</button>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.formulas-browser {
-  margin-top: 1rem;
-  max-width: 100%;
+.gallery {
+  --specimen-name-size: clamp(2rem, 4.5vw, 3.5rem);
+  --specimen-pad-y: clamp(1.75rem, 3.2vw, 3rem);
+  --gallery-rule: var(--vp-c-divider, rgba(60, 60, 67, 0.12));
+  --gallery-bg: var(--vp-c-bg);
+  --gallery-bg-soft: var(--vp-c-bg-soft);
+  --gallery-bg-alt: var(--vp-c-bg-alt);
+  --display-font: "Iowan Old Style", "Apple Garamond", Baskerville, Georgia,
+    "Times New Roman", "Droid Serif", Times, serif;
+  --meta-font: var(--vp-font-family-mono, ui-monospace, SFMono-Regular, Menlo,
+    monospace);
+  margin-top: 0.5rem;
+  font-feature-settings: "kern" 1, "liga" 1;
+}
+
+/* ── Masthead ─────────────────────────────────────────── */
+.masthead {
+  position: sticky;
+  top: var(--vp-nav-height, 64px);
+  z-index: 20;
+  background: color-mix(in srgb, var(--gallery-bg) 88%, transparent);
+  backdrop-filter: saturate(160%) blur(10px);
+  -webkit-backdrop-filter: saturate(160%) blur(10px);
+  border-bottom: 1px solid var(--gallery-rule);
+}
+
+.masthead-inner {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0.85rem clamp(1rem, 3vw, 2rem);
 }
 
-.search-container {
+.search-hero {
+  position: relative;
   display: flex;
   align-items: center;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
+  gap: 0.75rem;
+}
+
+.search-glyph {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--vp-c-text-3);
+  pointer-events: none;
 }
 
-.search-input {
+.search-field {
   flex: 1;
-  padding: 0.75rem 1rem;
-  font-size: 1.1rem;
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
-  background: var(--vp-c-bg-alt);
+  width: 100%;
+  padding: 0.5rem 0 0.5rem 2rem;
+  font-size: clamp(1.1rem, 2vw, 1.5rem);
+  font-family: var(--display-font);
+  font-weight: 400;
+  letter-spacing: -0.01em;
+  border: none;
+  border-bottom: 1px solid transparent;
+  background: transparent;
   color: var(--vp-c-text-1);
+  transition: border-color 0.2s ease;
 }
 
-.search-input:focus {
-  outline: none;
-  border-color: var(--vp-c-brand-1);
+.search-field::-webkit-search-cancel-button,
+.search-field::-webkit-search-decoration {
+  -webkit-appearance: none;
+  appearance: none;
 }
 
-.search-input::placeholder {
+.search-field::placeholder {
   color: var(--vp-c-text-3);
+  font-style: italic;
+  opacity: 0.8;
+}
+
+.search-field:focus {
+  outline: none;
+  border-bottom-color: var(--fontist-rose);
 }
 
 .result-count {
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
+  font-family: var(--meta-font);
+  font-size: 0.7rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--vp-c-text-3);
   white-space: nowrap;
+  flex-shrink: 0;
 }
 
-.browser-layout {
-  display: grid;
-  grid-template-columns: 200px 1fr;
-  gap: 1.5rem;
-  width: 100%;
+.result-count-word {
+  display: none;
 }
 
-.filters-sidebar {
-  position: sticky;
-  top: 1rem;
-  max-height: calc(100vh - 3rem);
-  overflow-y: auto;
-  padding: 1rem;
-  background: var(--vp-c-bg-alt);
-  border-radius: 8px;
-  border: 1px solid var(--vp-c-divider);
-  flex-shrink: 0;
+@media (min-width: 540px) {
+  .result-count-word {
+    display: inline;
+  }
 }
 
-/* Custom scrollbar for sidebar */
-.filters-sidebar::-webkit-scrollbar {
-  width: 6px;
+/* Alphabet wayfinding strip */
+.alpha-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0;
+  margin-top: 0.6rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--gallery-rule);
 }
 
-.filters-sidebar::-webkit-scrollbar-track {
-  background: transparent;
+.alpha-letter {
+  padding: 0.15rem 0.4rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-family: var(--meta-font);
+  font-size: 0.72rem;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  color: var(--vp-c-text-3);
+  opacity: 0.55;
+  transition: opacity 0.15s ease, color 0.15s ease;
+  line-height: 1.6;
 }
 
-.filters-sidebar::-webkit-scrollbar-thumb {
-  background: var(--vp-c-divider);
-  border-radius: 3px;
+.alpha-letter:hover,
+.alpha-letter:focus-visible {
+  opacity: 1;
+  color: var(--fontist-rose);
+  outline: none;
 }
 
-.filters-sidebar::-webkit-scrollbar-thumb:hover {
-  background: var(--vp-c-text-3);
+.alpha-letter:focus-visible {
+  background: var(--vp-c-brand-soft);
 }
 
-.filter-section {
-  margin-bottom: 1.5rem;
+/* ── Filter bar ───────────────────────────────────────── */
+.filter-bar {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 1.5rem clamp(1rem, 3vw, 2rem) 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
-.filter-section:last-child {
-  margin-bottom: 0;
+.filter-group {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.85rem;
 }
 
-.filter-section h4 {
-  margin: 0 0 0.75rem 0;
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--vp-c-text-2);
+.filter-key {
+  flex-shrink: 0;
+  width: 4.2rem;
+  padding-top: 0.4rem;
+  font-family: var(--meta-font);
+  font-size: 0.65rem;
+  letter-spacing: 0.14em;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  color: var(--vp-c-text-3);
 }
 
-.filter-checkbox {
+.pill-row {
   display: flex;
-  align-items: flex-start;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
-  cursor: pointer;
+  flex-wrap: wrap;
+  gap: 0.4rem;
 }
 
-.filter-checkbox input {
-  margin-top: 0.2rem;
+.pill {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.4rem;
+  padding: 0.3rem 0.7rem;
+  border: 1px solid var(--gallery-rule);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--vp-c-text-2);
+  font-size: 0.8rem;
+  font-weight: 400;
+  line-height: 1.4;
   cursor: pointer;
+  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
 }
 
-.filter-label {
-  font-size: 0.9rem;
+.pill:hover {
+  border-color: var(--vp-c-text-3);
   color: var(--vp-c-text-1);
 }
 
-.filter-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  margin-right: 0.25rem;
-}
-
-.filter-icon :deep(.filter-icon-img),
-.filter-icon :deep(img) {
-  width: 16px;
-  height: 16px;
-  display: inline-block;
-  vertical-align: middle;
+.pill.active {
+  border-color: var(--fontist-rose);
+  color: var(--fontist-rose);
+  background: var(--vp-c-brand-soft);
 }
 
-.filter-count {
-  font-size: 0.8rem;
+.pill-count {
+  font-family: var(--meta-font);
+  font-size: 0.65rem;
   color: var(--vp-c-text-3);
+  font-variant-numeric: tabular-nums;
 }
 
-.results-main {
-  min-width: 0;
-  width: 100%;
-  overflow: hidden;
+.pill.active .pill-count {
+  color: var(--fontist-rose);
+  opacity: 0.8;
 }
 
-.alpha-nav {
+/* Active removable chips */
+.active-chips {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.25rem;
-  margin-bottom: 1.5rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.alpha-nav button {
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 4px;
-  background: var(--vp-c-bg-alt);
-  color: var(--vp-c-text-3);
-  font-size: 0.85rem;
-  font-weight: 500;
+  align-items: center;
+  gap: 0.45rem;
+  padding-top: 0.35rem;
+  margin-top: 0.1rem;
+  border-top: 1px dashed var(--gallery-rule);
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.2rem 0.55rem 0.2rem 0.6rem;
+  border: 1px solid var(--fontist-rose);
+  border-radius: 3px;
+  background: transparent;
+  color: var(--fontist-rose);
+  font-size: 0.72rem;
   cursor: pointer;
+  transition: background 0.15s ease;
 }
 
-.alpha-nav button:hover:not(:disabled) {
+.chip:hover {
   background: var(--vp-c-brand-soft);
-  border-color: var(--vp-c-brand-1);
-  color: var(--vp-c-brand-1);
 }
 
-.alpha-nav button.has-content {
+.chip-kind {
+  font-family: var(--meta-font);
+  font-size: 0.58rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  opacity: 0.7;
+}
+
+.chip-x {
+  font-size: 0.9rem;
+  line-height: 1;
+  opacity: 0.8;
+}
+
+.chip.clear-all {
+  border-color: var(--gallery-rule);
+  color: var(--vp-c-text-3);
+  border-style: dashed;
+}
+
+.chip.clear-all:hover {
   color: var(--vp-c-text-1);
-  background: var(--vp-c-bg);
+  border-color: var(--vp-c-text-2);
 }
 
-.alpha-nav button:disabled {
-  opacity: 0.4;
-  cursor: default;
+/* Mobile filter toggle (hidden on desktop) */
+.mobile-filter-toggle {
+  display: none;
+}
+
+/* ── Gallery results ──────────────────────────────────── */
+.gallery-results {
+  max-width: 1280px;
+  margin: 0 auto;
 }
 
 .letter-group {
-  margin-bottom: 2rem;
+  scroll-margin-top: calc(var(--vp-nav-height, 64px) + 140px);
 }
 
-.letter-heading {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--vp-c-brand-1);
-  margin: 0 0 1rem 0;
-  padding-bottom: 0.5rem;
-  border-bottom: 2px solid var(--vp-c-brand-1);
+.letter-group.band-alt {
+  background: var(--gallery-bg-soft);
 }
 
-.formula-items {
+.letter-group.band-alt .letter-mark {
+  /* keep mark readable on soft bg */
+}
+
+.letter-mark {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2rem) 0.5rem;
+  font-family: var(--display-font);
+  font-weight: 300;
+  font-size: clamp(3.5rem, 8vw, 6rem);
+  line-height: 0.9;
+  letter-spacing: -0.04em;
+  color: var(--vp-c-text-1);
+  opacity: 0.16;
+  user-select: none;
+}
+
+/* The specimen band */
+.specimen {
+  position: relative;
   display: grid;
-  gap: 0.5rem;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    "meta"
+    "body"
+    "cta";
+  gap: 0.4rem;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: var(--specimen-pad-y) clamp(1rem, 3vw, 2rem);
+  text-decoration: none;
+  color: inherit;
+  border-top: 1px solid transparent;
+  transition: border-color 0.2s ease;
+}
+
+.specimen::before {
+  content: "";
+  position: absolute;
+  left: clamp(1rem, 3vw, 2rem);
+  right: clamp(1rem, 3vw, 2rem);
+  top: 0;
+  height: 2px;
+  background: var(--fontist-rose);
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
 }
 
-.formula-item {
+.specimen:hover {
+  border-top-color: transparent;
+}
+
+.specimen:hover::before {
+  transform: scaleX(1);
+}
+
+.specimen-meta-top {
+  grid-area: meta;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  background: var(--vp-c-bg);
-  text-decoration: none;
-  transition: all 0.2s;
 }
 
-.formula-item:hover {
-  border-color: var(--vp-c-brand-1);
-  background: var(--vp-c-bg-alt);
-  transform: translateX(4px);
+.badges {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.badge-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--fontist-rose);
+  opacity: 0.75;
+  flex-shrink: 0;
 }
 
-.formula-main {
+.badges :deep(.license-icon),
+.badges :deep(.source-icon) {
+  width: 13px;
+  height: 13px;
+  display: inline-block;
+  vertical-align: middle;
+  opacity: 0.85;
+}
+
+.specimen-body {
+  grid-area: body;
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
-  min-width: 0;
-  flex: 1;
+  gap: 0.35rem;
 }
 
-.formula-name {
-  font-weight: 600;
+.specimen-name {
+  margin: 0;
+  font-family: var(--display-font);
+  font-weight: 500;
+  font-size: var(--specimen-name-size);
+  line-height: 1.02;
+  letter-spacing: -0.025em;
   color: var(--vp-c-text-1);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  transition: color 0.2s ease;
 }
 
-.formula-key {
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.85rem;
-  color: var(--vp-c-text-2);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.specimen:hover .specimen-name {
+  color: var(--fontist-rose);
 }
 
-.formula-meta {
+.specimen-sub {
+  margin: 0;
   display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 0.25rem;
-  flex-shrink: 0;
-  margin-left: 0.5rem;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.5rem;
+  font-family: var(--meta-font);
+  font-size: 0.72rem;
+  letter-spacing: 0.02em;
+  color: var(--vp-c-text-3);
 }
 
-.formula-badges {
-  display: flex;
+.sub-key {
+  color: var(--vp-c-text-2);
+}
+
+.sub-sep {
+  opacity: 0.4;
+}
+
+.specimen-cta {
+  grid-area: cta;
+  justify-self: start;
+  align-self: end;
+  display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: 0.35rem;
+  font-family: var(--meta-font);
+  font-size: 0.68rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--vp-c-text-3);
+  opacity: 0;
+  transform: translateX(-6px);
+  transition: opacity 0.25s ease, transform 0.25s ease, color 0.2s ease;
 }
 
-.formula-badges :deep(.source-icon) {
-  width: 14px;
-  height: 14px;
-  display: inline-block;
-  vertical-align: middle;
+.specimen:hover .specimen-cta {
+  opacity: 1;
+  transform: translateX(0);
+  color: var(--fontist-rose);
 }
 
-.formula-badges :deep(.license-icon) {
-  width: 14px;
-  height: 14px;
-  display: inline-block;
-  vertical-align: middle;
+.cta-arrow {
+  transition: transform 0.25s ease;
 }
 
-.formula-counts {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-3);
-  white-space: nowrap;
+.specimen:hover .cta-arrow {
+  transform: translateX(3px);
 }
 
-@media (max-width: 900px) {
-  .browser-layout {
-    grid-template-columns: 1fr;
+/* Two-column band on wider screens: body left, cta bottom-right */
+@media (min-width: 720px) {
+  .specimen {
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+      "meta  meta"
+      "body  cta";
+    align-items: end;
+  }
+  .specimen-cta {
+    justify-self: end;
+    align-self: end;
+    padding-bottom: 0.4rem;
   }
+}
+
+/* Empty state */
+.empty-state {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: clamp(4rem, 10vw, 8rem) clamp(1rem, 3vw, 2rem);
+  text-align: center;
+}
+
+.empty-head {
+  margin: 0 0 1.5rem;
+  font-family: var(--display-font);
+  font-size: clamp(1.8rem, 4vw, 2.8rem);
+  font-weight: 400;
+  color: var(--vp-c-text-2);
+  letter-spacing: -0.02em;
+}
 
-  .filters-sidebar {
-    position: static;
-    order: 2;
+.empty-reset {
+  padding: 0.5rem 1.2rem;
+  border: 1px solid var(--fontist-rose);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--fontist-rose);
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.empty-reset:hover {
+  background: var(--vp-c-brand-soft);
+}
+
+/* ── Responsive: tablet / mobile ──────────────────────── */
+@media (max-width: 768px) {
+  .filter-bar {
+    display: none;
+    padding-top: 1rem;
   }
 
-  .results-main {
-    order: 1;
+  .filter-bar.is-open {
+    display: flex;
   }
 
-  .formula-items {
-    grid-template-columns: 1fr;
+  .mobile-filter-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin: 0 clamp(1rem, 3vw, 2rem);
+    padding: 0.55rem 0.9rem;
+    border: 1px solid var(--gallery-rule);
+    border-radius: 999px;
+    background: var(--gallery-bg);
+    color: var(--vp-c-text-1);
+    font-size: 0.8rem;
+    cursor: pointer;
   }
-}
 
-@media (max-width: 768px) {
-  .formula-item {
+  .toggle-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.1rem;
+    height: 1.1rem;
+    padding: 0 0.3rem;
+    border-radius: 999px;
+    background: var(--fontist-rose);
+    color: #fff;
+    font-size: 0.62rem;
+    font-family: var(--meta-font);
+  }
+
+  .toggle-caret {
+    margin-left: auto;
+    font-size: 0.7rem;
+    transition: transform 0.2s ease;
+  }
+
+  .toggle-caret.open {
+    transform: rotate(180deg);
+  }
+
+  .filter-group {
     flex-direction: column;
-    align-items: flex-start;
     gap: 0.5rem;
   }
 
-  .formula-meta {
-    flex-direction: row;
-    align-items: center;
-    width: 100%;
-    justify-content: space-between;
-    margin-left: 0;
+  .filter-key {
+    width: auto;
+    padding-top: 0;
+  }
+
+  .pill-row {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    -webkit-overflow-scrolling: touch;
+    padding-bottom: 0.25rem;
+  }
+
+  .pill {
+    flex-shrink: 0;
+  }
+
+  .alpha-strip {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .alpha-letter {
+    flex-shrink: 0;
+  }
+
+  .letter-mark {
+    font-size: clamp(2.8rem, 14vw, 4rem);
+  }
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .specimen::before,
+  .specimen-cta,
+  .cta-arrow,
+  .alpha-letter,
+  .toggle-caret {
+    transition: none;
+  }
+
+  html {
+    scroll-behavior: auto;
   }
 }
 </style>