feat: Implement proper Three.js logo system with custom environment mapping

- Replace CDN-based Three.js with npm packages for reliable loading
- Add DRACO loader support for compressed GLB files
- Implement custom horizon gradient environment mapping
- Use exact material properties from reference logo.html (MeshPhysicalMaterial)
- Apply proper metallic sheen, clearcoat, and reflectivity settings
- Fix camera positioning and canvas sizing to prevent clipping
- Maintain square aspect ratio for consistent logo display
- Load user's mobius-ring.glb with fallback torus geometry

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

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

brand-assets/brand-style-guide-site/src/app/social-media/page.tsx

@@ -0,0 +1,32 @@
+export default function SocialMediaPage() {
+  return (
+    <div className="mx-auto max-w-4xl px-chorus-lg py-chorus-xl">
+      <header className="border-b border-nickel-200 pb-chorus-lg dark:border-mulberry-800">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-4xl font-bold tracking-tight text-carbon-950 dark:text-white">
+              Social Media
+            </h1>
+            <p className="mt-chorus-sm text-lg text-carbon-600 dark:text-mulberry-200">
+              Brand guidelines for social media presence and content
+            </p>
+          </div>
+        </div>
+      </header>
+
+      <div className="mt-chorus-xl space-y-chorus-xl">
+        <section>
+          <h2 className="text-2xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg">
+            Coming Soon
+          </h2>
+          <div className="prose prose-carbon dark:prose-invert max-w-none">
+            <p>
+              This section will contain guidelines for social media posts, 
+              profile branding, and community engagement standards.
+            </p>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}