feat(publications,standardization,ui): harmonize typography, active category border, and 5 representative highlights

- Refine Publications overview & category detail pages with clean typography and spacing
- Add active border line (border-2 border-cobalt-dark) on active CategoryNav card
- Replace 10 highlights with 5 designated representative publications
- Add Patent subtitle '(IoT Architecture & Protocols, etc ...)'
- Update Footer link label from 'College of IT Engineering' to 'CITE'
- Clean up Standardization & Lectures page header kickers and spacing

refer_landing_page/app/publications/_components/CategoryNav.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import Link from "next/link";
 import { PUB_CATEGORIES } from "../../../content/categories";
+import { publications, patents } from "../../../content/publications";
 import { PubCategory } from "../../../content/types";
 
 interface CategoryNavProps {
@@ -8,23 +9,93 @@ interface CategoryNavProps {
 }
 
 export function CategoryNav({ currentCategory }: CategoryNavProps) {
+  const getCount = (slug: string) => {
+    if (slug === "patent") return patents.length;
+    return publications.filter((p) => p.category === slug).length;
+  };
+
   return (
     <div className="space-y-4">
-      <div className="flex flex-wrap items-center gap-2 border-b border-line pb-4">
+      <div className="flex justify-between items-center">
+        <h2 className="font-serif text-2xl sm:text-3xl font-normal text-cobalt-dark">
+          Categories
+        </h2>
+        {currentCategory && (
+          <Link
+            href="/publications"
+            className="font-mono text-xs text-ink-mute hover:text-ink hover:underline transition-colors"
+          >
+            &larr; Overview
+          </Link>
+        )}
+      </div>
+
+      <div className="grid gap-5 sm:gap-6 md:grid-cols-3">
         {PUB_CATEGORIES.map((cat) => {
+          const count = getCount(cat.slug);
           const isActive = currentCategory === cat.slug;
+
           return (
-            <Link
+            <div
               key={cat.slug}
-              href={`/publications/${cat.slug}`}
-              className={`px-4 py-2 rounded text-xs font-mono tracking-wider transition-colors ${
+              className={`flex flex-col justify-between bg-paper p-5 sm:p-6 rounded-lg transition-all ${
                 isActive
-                  ? "bg-cobalt-dark text-white dark:text-ivory font-bold"
-                  : "bg-paper text-ink border border-line hover:border-cobalt-dark"
+                  ? "border-2 border-cobalt-dark shadow-md"
+                  : "border border-line shadow-sm hover:border-cobalt-dark/40"
               }`}
             >
-              {cat.label}
-            </Link>
+              <div className="space-y-3">
+                <div className="flex justify-between items-center">
+                  <span
+                    className={`font-mono text-xs font-bold uppercase tracking-wider ${
+                      isActive ? "text-cobalt-dark" : "text-ink-mute"
+                    }`}
+                  >
+                    Category
+                  </span>
+                  {isActive && (
+                    <span className="font-mono text-[0.65rem] font-bold px-2 py-0.5 rounded bg-cobalt-dark/10 text-cobalt-dark uppercase">
+                      Current
+                    </span>
+                  )}
+                </div>
+
+                <h3
+                  className={`font-serif text-xl ${
+                    isActive ? "text-cobalt-dark font-normal" : "text-ink font-normal"
+                  }`}
+                >
+                  {cat.label}
+                  {cat.subtitle && (
+                    <span className="block text-xs font-mono text-ink-mute mt-1 font-normal">
+                      {cat.subtitle}
+                    </span>
+                  )}
+                </h3>
+              </div>
+
+              <div className="mt-6 pt-4 border-t border-line flex items-baseline justify-between">
+                <span className="font-display text-3xl font-bold text-ink">
+                  {count}
+                  <span className="text-xs font-mono text-ink-mute ml-1 font-normal">
+                    {cat.slug === "patent" ? "Patents" : "Papers"}
+                  </span>
+                </span>
+
+                {isActive ? (
+                  <span className="inline-flex items-center text-xs font-bold text-cobalt-dark font-mono">
+                    Active View ●
+                  </span>
+                ) : (
+                  <Link
+                    href={`/publications/${cat.slug}`}
+                    className="inline-flex items-center text-xs font-bold text-vermillion-dark hover:underline"
+                  >
+                    View All &rarr;
+                  </Link>
+                )}
+              </div>
+            </div>
           );
         })}
       </div>