feat: Featured technique card with gradient border and enriched recent-…

- "frontend/src/api/public-client.ts"
- "frontend/src/pages/CreatorDetail.tsx"
- "frontend/src/App.css"

GSD-Task: S03/T02

frontend/src/App.css

@@ -2806,6 +2806,60 @@ a.app-footer__repo:hover {
   line-height: 1.4;
 }
 
+/* ── Creator Featured Technique ─────────────────────────────────────── */
+
+.creator-featured {
+  display: block;
+  max-width: 100%;
+  margin-bottom: 1.25rem;
+  padding: 1.25rem 1.5rem;
+  background: var(--color-bg-surface);
+  border: 1px solid transparent;
+  border-image: linear-gradient(135deg, #22d3ee, #a855f7) 1;
+  text-decoration: none;
+  color: inherit;
+  position: relative;
+}
+
+.creator-featured__label {
+  margin-bottom: 0.5rem;
+}
+
+.creator-featured__title {
+  display: block;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--color-text);
+  margin-bottom: 0.5rem;
+  line-height: 1.3;
+}
+
+.creator-featured:hover .creator-featured__title {
+  color: var(--color-accent-hover);
+}
+
+.creator-featured__summary {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  line-height: 1.5;
+  margin-bottom: 0.75rem;
+  margin-top: 0;
+}
+
+.creator-featured__meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.5rem;
+}
+
+.creator-featured__moments {
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+}
+
 /* ══════════════════════════════════════════════════════════════════════════════
    TOPICS BROWSE — Card Grid Layout
    ══════════════════════════════════════════════════════════════════════════════ */

frontend/src/api/public-client.ts

@@ -178,6 +178,9 @@ export interface CreatorTechniqueItem {
   title: string;
   slug: string;
   topic_category: string;
+  summary: string | null;
+  topic_tags: string[] | null;
+  key_moment_count: number;
   created_at: string;
 }
 

frontend/src/pages/CreatorDetail.tsx

@@ -14,6 +14,7 @@ import {
 import CreatorAvatar from "../components/CreatorAvatar";
 import { SocialIcon } from "../components/SocialIcons";
 import SortDropdown from "../components/SortDropdown";
+import TagList from "../components/TagList";
 import { catSlug } from "../utils/catSlug";
 import { useDocumentTitle } from "../hooks/useDocumentTitle";
 import { useSortPreference } from "../hooks/useSortPreference";
@@ -184,26 +185,76 @@ export default function CreatorDetail() {
         {techniques.length === 0 ? (
           <div className="empty-state">No techniques yet.</div>
         ) : (
+          <>
+            {/* Featured technique — first in sorted order */}
+            {techniques[0] != null && (() => {
+              const featured = techniques[0];
+              return (
+                <Link
+                  to={`/techniques/${featured.slug}`}
+                  className="creator-featured"
+                >
+                  <span className="creator-featured__label section-heading section-heading--accent">
+                    Featured Technique
+                  </span>
+                  <span className="creator-featured__title">
+                    {featured.title}
+                  </span>
+                  {featured.summary && (
+                    <p className="creator-featured__summary">
+                      {featured.summary}
+                    </p>
+                  )}
+                  <span className="creator-featured__meta">
+                    <span className={`badge badge--cat-${catSlug(featured.topic_category)}`}>
+                      {featured.topic_category}
+                    </span>
+                    {featured.topic_tags && featured.topic_tags.length > 0 && (
+                      <TagList tags={featured.topic_tags} max={4} pillClass="pill--tag" />
+                    )}
+                  </span>
+                  <span className="creator-featured__moments">
+                    {featured.key_moment_count} moment{featured.key_moment_count !== 1 ? "s" : ""}
+                  </span>
+                </Link>
+              );
+            })()}
+
+            {/* Remaining techniques — recent-card grid */}
+            {techniques.length > 1 && (
               <div className="creator-techniques__list">
-            {techniques.map((t, i) => (
+                {techniques.slice(1).map((t, i) => (
                   <Link
                     key={t.slug}
                     to={`/techniques/${t.slug}`}
-                className="creator-technique-card card-stagger"
+                    className="recent-card card-stagger"
                     style={{ '--stagger-index': i } as React.CSSProperties}
                   >
-                <span className="creator-technique-card__title">
+                    <span className="recent-card__title">
                       {t.title}
                     </span>
-                <span className="creator-technique-card__meta">
+                    {t.summary && (
-                  <span className="badge badge--category">
+                      <span className="recent-card__summary">
+                        {t.summary}
+                      </span>
+                    )}
+                    <span className="recent-card__meta">
+                      <span className={`badge badge--cat-${catSlug(t.topic_category)}`}>
                         {t.topic_category}
                       </span>
+                      {t.topic_tags && t.topic_tags.length > 0 && (
+                        <TagList tags={t.topic_tags} max={3} pillClass="pill--tag" />
+                      )}
+                    </span>
+                    <span className="recent-card__moments">
+                      {t.key_moment_count} moment{t.key_moment_count !== 1 ? "s" : ""}
                     </span>
                   </Link>
                 ))}
               </div>
             )}
+          </>
+        )}
       </section>
     </div>
   );