feat(migration): complete WordPress migration and UX refinements

- Migrate historical posts, localized assets, and 103 comments
- Colocate media into posts/<slug>/images/ and remove wp-content
- Add native bilingual support for ai-can-change post (English default, /zh variant)
- Support clean taxonomy routing (/category/:category and /tag/:tag)
- Dynamically populate categories and tags in sitemap.xml
- Fix header scroll padding/margin offsets for anchor and reference links
- Constrain image and media widths to prevent content overflow
- Redesign homepage recent posts to 4 compact editorial cards
- Restore valid binary favicon.ico and high-res icon assets
- Remove placeholder content and sample test comments

public/css/base.css

@@ -17,7 +17,7 @@
 
   --max-width: 1180px;
   --content-width: 820px;
-  --header-height: 80px;
+  --header-height: 64px;
 
   --radius-sm: 6px;
   --radius-md: 12px;
@@ -37,9 +37,26 @@
 html {
   font-size: 16px;
   scroll-behavior: smooth;
+  scroll-padding-top: calc(var(--header-height) + 1.5rem);
   -webkit-text-size-adjust: 100%;
 }
 
+/* Ensure hash navigation (#) and footnotes never hide under sticky header */
+:target,
+[id],
+h1[id], h2[id], h3[id], h4[id], h5[id], h6[id],
+.footnote-ref,
+.footnote-item,
+li[id^="fn"] {
+  scroll-margin-top: calc(var(--header-height) + 1.5rem);
+}
+
+/* Responsive media constraint - never wider than parent container */
+img, video, iframe, embed, object {
+  max-width: 100%;
+  height: auto;
+}
+
 body {
   font-family: var(--font-serif);
   color: var(--color-text-main);

public/css/components.css

@@ -218,6 +218,34 @@
   gap: 3rem 2rem;
 }
 
+.home-posts-grid-4,
+.home-posts-grid-3 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 2.5rem 1.5rem;
+}
+
+.home-posts-grid-4 .post-card-title {
+  font-size: 1.15rem;
+  line-height: 1.35;
+}
+
+@media (max-width: 1024px) {
+  .home-posts-grid-4,
+  .home-posts-grid-3 {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 2rem 1.5rem;
+  }
+}
+
+@media (max-width: 600px) {
+  .home-posts-grid-4,
+  .home-posts-grid-3 {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+}
+
 .post-card {
   text-decoration: none;
   color: inherit;
@@ -650,6 +678,24 @@
   margin-bottom: 1.5rem;
 }
 
+.post-body-content img,
+.post-body-content video,
+.post-body-content figure {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius-sm);
+  margin: 1.75rem auto;
+  display: block;
+}
+
+.post-body-content figure figcaption {
+  text-align: center;
+  font-size: 0.88rem;
+  color: var(--color-text-muted);
+  font-style: italic;
+  margin-top: 0.4rem;
+}
+
 .post-tags-container {
   margin: 3rem 0;
   display: flex;