diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9418970..6d7f7b7 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -48,7 +48,7 @@ const CONTRIBUTE =
 
   <div class="wrap">
     <div class="register-head" aria-hidden="true">
-      <span class="col-no">№</span>
+      <span class="col-no">No.</span>
       <span class="col-name">
         Project: <span class="result-line" id="result-line"
           >{projects.length} shown</span
diff --git a/src/pages/projects/[slug].astro b/src/pages/projects/[slug].astro
index 8d459b3..40800c1 100644
--- a/src/pages/projects/[slug].astro
+++ b/src/pages/projects/[slug].astro
@@ -4,7 +4,7 @@ import Base from '../../layouts/Base.astro';
 import Tag from '../../components/Tag.astro';
 import Embed from '../../components/Embed.astro';
 import Figure from '../../components/Figure.astro';
-import { asset, deptColor, href } from '../../lib/format';
+import { asset, href } from '../../lib/format';
 import { publishedProjects } from '../../lib/projects';
 
 export async function getStaticPaths() {
@@ -28,7 +28,7 @@ const links = [
 <Base title={`${data.name} · CML Project Gallery`} description={data.summary}>
   <article class="detail wrap">
     <a class="back" href={href('/')}>&larr; All projects</a>
-    <p class="eyebrow" style={`color:${deptColor(data.department)}`}>
+    <p class="eyebrow" data-department={data.department}>
       {data.department} · {data.type}
     </p>
     <h1>{data.name}</h1>
diff --git a/src/styles/global.css b/src/styles/global.css
index ce717ef..eda531b 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -164,6 +164,16 @@ a:hover {
   text-transform: uppercase;
   color: var(--green);
 }
+.eyebrow[data-department] {
+  color: var(--dept, var(--ink-soft));
+}
+/* keep in step with DEPT_COLOR in src/lib/format.ts */
+[data-department='Industrial Ecology'] {
+  --dept: var(--dept-ie);
+}
+[data-department='Environmental Biology'] {
+  --dept: var(--dept-eb);
+}
 
 /* ── header ────────────────────────────────────────────────── */
 .site-header {
@@ -490,20 +500,25 @@ a:hover {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
-  gap: 0.35rem 0.55rem;
+  gap: 0.35rem 1.1rem;
+  overflow: hidden;
   font-family: var(--font-mono);
   font-size: 0.72rem;
   color: var(--ink-soft);
 }
+.row-tags li {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+/* the dot sits in the gap before each tag; the list clips it when a tag starts a line */
 .row-tags li::before {
   content: '·';
-  margin-right: 0.55rem;
+  display: inline-block;
+  width: 1.1rem;
+  margin-left: -1.1rem;
+  text-align: center;
   color: var(--green);
 }
-.row-tags li:first-child::before {
-  content: '';
-  margin: 0;
-}
 
 @media (max-width: 560px) {
   .register-head,