Release v1.2.0: Newspaper-style layout with major UI refinements

This release transforms PING into a sophisticated newspaper-style digital
publication with enhanced readability and professional presentation.

Major Features:
- New FeaturedPostHero component with full-width newspaper design
- Completely redesigned homepage with responsive newspaper grid layout
- Enhanced PostCard component with refined typography and spacing
- Improved mobile-first responsive design (mobile → tablet → desktop → 2XL)
- Archive section with multi-column layout for deeper content discovery

Technical Improvements:
- Enhanced blog post validation and error handling in lib/blog.ts
- Better date handling and normalization for scheduled posts
- Improved Dockerfile with correct content volume mount paths
- Fixed port configuration (3025 throughout stack)
- Updated Tailwind config with refined typography and newspaper aesthetics
- Added getFeaturedPost() function for hero selection

UI/UX Enhancements:
- Professional newspaper-style borders and dividers
- Improved dark mode styling throughout
- Better content hierarchy and visual flow
- Enhanced author bylines and metadata presentation
- Refined color palette with newspaper sophistication

Documentation:
- Added DESIGN_BRIEF_NEWSPAPER_LAYOUT.md detailing design principles
- Added TESTING_RESULTS_25_POSTS.md with test scenarios

This release establishes PING as a premium publication platform for
AI orchestration and contextual intelligence thought leadership.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/FeaturedPostHero.tsx

@@ -0,0 +1,121 @@
+import Link from 'next/link'
+import { BlogPost } from '@/types/blog'
+
+interface FeaturedPostHeroProps {
+  post: BlogPost
+}
+
+export default function FeaturedPostHero({ post }: FeaturedPostHeroProps) {
+  const formattedDate = new Date(post.date).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long', 
+    day: 'numeric'
+  })
+
+  return (
+    <article className="group border-y-2 border-carbon-300 dark:border-carbon-700 bg-gradient-to-r from-white via-sand-50 to-white dark:from-carbon-950 dark:via-mulberry-950/30 dark:to-carbon-950 transition-all duration-300">
+      <Link href={`/posts/${post.slug}`} className="block">
+        <div className="max-w-6xl mx-auto px-8 py-12">
+          {/* Newspaper-style header */}
+          <div className="flex items-center space-x-4 mb-6">
+            <div className="h-px bg-carbon-400 dark:bg-carbon-600 flex-1"></div>
+            <div className="bg-carbon-900 dark:bg-mulberry-700 text-white dark:text-mulberry-100 px-4 py-1 text-xs font-bold uppercase tracking-wider">
+              Featured Article
+            </div>
+            <div className="h-px bg-carbon-400 dark:bg-carbon-600 flex-1"></div>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center">
+            {/* Main content - spans 2 columns on large screens */}
+            <div className="lg:col-span-2">
+              {/* Newspaper-style kicker */}
+              <div className="mb-4">
+                <span className="text-mulberry-700 dark:text-mulberry-400 text-sm font-bold uppercase tracking-wide">
+                  {post.tags?.[0] || 'Contextual AI'}
+                </span>
+              </div>
+
+              {/* Large headline */}
+              <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-carbon-950 dark:text-carbon-100 leading-tight mb-6 group-hover:text-carbon-700 dark:group-hover:text-mulberry-200 transition-colors">
+                {post.title}
+              </h1>
+
+              {/* Subhead/description */}
+              <p className="text-xl md:text-2xl text-carbon-700 dark:text-carbon-300 leading-relaxed mb-6 font-light">
+                {post.description}
+              </p>
+
+              {/* Byline and meta */}
+              <div className="flex items-center space-x-6 text-sm">
+                <div className="flex items-center space-x-3">
+                  <div className="w-10 h-10 bg-gradient-to-br from-mulberry-400 to-ocean-500 rounded-full flex items-center justify-center">
+                    <span className="text-carbon-950 font-bold text-sm">
+                      {post.author?.name?.charAt(0) || 'C'}
+                    </span>
+                  </div>
+                  <div>
+                    <p className="text-carbon-950 dark:text-carbon-100 font-semibold">
+                      By {post.author?.name || 'CHORUS Team'}
+                    </p>
+                    {post.author?.role && (
+                      <p className="text-carbon-600 dark:text-carbon-500 text-xs">
+                        {post.author.role}
+                      </p>
+                    )}
+                  </div>
+                </div>
+
+                <div className="h-4 w-px bg-carbon-400 dark:bg-carbon-600"></div>
+
+                <div className="text-carbon-600 dark:text-carbon-500">
+                  <time dateTime={post.date} className="font-medium">
+                    {formattedDate}
+                  </time>
+                  <span className="mx-2">•</span>
+                  <span>{post.readingTime} min read</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Sidebar - article highlights */}
+            <div className="lg:col-span-1">
+              <div className="bg-sand-100/50 dark:bg-carbon-900/50 border border-carbon-200 dark:border-carbon-800 p-6 rounded-lg">
+                <h3 className="font-bold text-carbon-950 dark:text-carbon-100 mb-4 text-lg border-b border-carbon-300 dark:border-carbon-700 pb-2">
+                  In This Article
+                </h3>
+                <ul className="space-y-2 text-sm text-carbon-700 dark:text-carbon-300">
+                  <li className="flex items-start space-x-2">
+                    <span className="text-mulberry-600 dark:text-mulberry-400 mt-1">•</span>
+                    <span>Key insights into AI orchestration</span>
+                  </li>
+                  <li className="flex items-start space-x-2">
+                    <span className="text-mulberry-600 dark:text-mulberry-400 mt-1">•</span>
+                    <span>Real-world implementation strategies</span>
+                  </li>
+                  <li className="flex items-start space-x-2">
+                    <span className="text-mulberry-600 dark:text-mulberry-400 mt-1">•</span>
+                    <span>Future implications for the industry</span>
+                  </li>
+                </ul>
+                
+                {/* Tags */}
+                <div className="mt-6 pt-4 border-t border-carbon-300 dark:border-carbon-700">
+                  <p className="text-xs text-carbon-600 dark:text-carbon-500 mb-2 font-medium uppercase tracking-wide">
+                    Topics
+                  </p>
+                  <div className="flex flex-wrap gap-1">
+                    {post.tags?.slice(0, 4).map((tag) => (
+                      <span key={tag} className="bg-carbon-200 dark:bg-carbon-800 text-carbon-700 dark:text-carbon-300 px-2 py-1 text-xs rounded font-medium">
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Link>
+    </article>
+  )
+}