feat: restructure technique page — bibliography key moments, ToC-only sidebar, sticky title bar, solid featured border

- Move key moments below prose as bibliography-style sources with [N] indices
- Move signal chains and related techniques to main column below key moments
- Sidebar now dedicated to ToC only, sticky with scroll tracking
- Replace position:fixed reading header with sticky title bar within content area
- ToC smooth-scrolls on click with history.replaceState for hash updates
- Featured technique card: solid cyan-to-purple gradient border (border-image)
- Remove ReadingHeader component (replaced by title bar)
- Hide sidebar ToC on mobile (single-column reading)
- Related techniques grid defaults to 2-column in main content area

frontend/src/App.css

@@ -1534,13 +1534,10 @@ a.app-footer__repo:hover {
   margin: 0 auto 2rem;
   padding: 1.25rem 1.5rem;
   background: var(--color-bg-surface);
-  border: 1px solid var(--color-border);
+  border: 2px solid transparent;
-  border-radius: 0.5rem;
+  border-image: linear-gradient(135deg, #22d3ee, #a855f7) 1;
   text-align: left;
   position: relative;
-  box-shadow:
-    0 0 20px rgba(34, 211, 238, 0.15),
-    0 0 40px rgba(34, 211, 238, 0.05);
 }
 
 .home-featured__label {
@@ -1867,7 +1864,9 @@ a.app-footer__repo:hover {
 
 .technique-columns__sidebar {
   position: sticky;
-  top: 1.5rem;
+  top: 3.5rem; /* below sticky title bar */
+  max-height: calc(100vh - 4rem);
+  overflow-y: auto;
 }
 
 @media (max-width: 768px) {
@@ -1875,7 +1874,7 @@ a.app-footer__repo:hover {
     grid-template-columns: 1fr;
   }
   .technique-columns__sidebar {
-    position: static;
+    display: none; /* ToC hidden on mobile — single-column reading */
   }
 }
 
@@ -2037,67 +2036,68 @@ a.app-footer__repo:hover {
 
 /* ── Sticky Reading Header ────────────────────────────────────────────────── */
 
-.reading-header {
+/* ── Sticky title bar (within article content area) ───────────────────── */
-  position: fixed;
+
+.technique-title-bar {
+  position: sticky;
   top: 0;
-  left: 0;
+  z-index: 100;
-  right: 0;
+  background: var(--color-bg);
-  z-index: 150;
-  transform: translateY(-100%);
-  transition: transform 0.25s ease;
-  background: var(--bg-card);
   border-bottom: 1px solid var(--color-border);
-  pointer-events: none;
+  padding: 0.75rem 0;
+  margin-bottom: 0.75rem;
 }
 
-.reading-header--visible {
+.technique-title-bar__inner {
-  transform: translateY(0);
+  display: flex;
-  pointer-events: auto;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
 }
 
-.reading-header__inner {
+.technique-title-bar__title {
-  max-width: 1200px;
+  font-size: 1.25rem;
-  margin: 0 auto;
+  font-weight: 700;
-  padding: 0.5rem 1.5rem;
+  color: var(--color-text-primary);
+  margin: 0;
+  line-height: 1.3;
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  min-height: 36px;
+  flex: 1;
-  overflow: hidden;
-}
-
-.reading-header__title {
-  font-weight: 600;
-  font-size: 0.85rem;
-  color: var(--text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex-shrink: 1;
   min-width: 0;
 }
 
-.reading-header__separator {
+.technique-title-bar__meta {
-  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
   flex-shrink: 0;
 }
 
-.reading-header__section {
+.technique-title-bar__creator {
-  font-size: 0.8rem;
+  display: flex;
-  color: var(--text-secondary);
+  align-items: center;
-  white-space: nowrap;
+  gap: 0.375rem;
-  overflow: hidden;
+  font-size: 0.8125rem;
-  text-overflow: ellipsis;
+  color: var(--color-text-secondary);
-  flex-shrink: 1;
+  text-decoration: none;
-  min-width: 0;
+  transition: color 150ms ease;
+}
+
+.technique-title-bar__creator:hover {
+  color: var(--color-accent);
 }
 
 @media (max-width: 600px) {
-  .reading-header__inner {
+  .technique-title-bar__title {
-    padding: 0.4rem 1rem;
+    font-size: 1.0625rem;
   }
-  .reading-header__section {
+  .technique-title-bar__inner {
-    display: none;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.375rem;
   }
 }
 
@@ -2231,67 +2231,98 @@ a.app-footer__repo:hover {
   scroll-margin-top: 5rem;
 }
 
-/* ── Key moments list ─────────────────────────────────────────────────────── */
+/* ── Key Moments — bibliography/sources style ─────────────────────────── */
 
-.technique-moments {
+.technique-sources {
+  margin-top: 2.5rem;
   margin-bottom: 2rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--color-border);
 }
 
-.technique-moments h2 {
+.technique-sources h2 {
-  font-size: 1.25rem;
+  font-size: 1.125rem;
   font-weight: 700;
-  margin-bottom: 0.75rem;
+  margin-bottom: 1rem;
+  color: var(--color-text-primary);
 }
 
-.technique-moments__list {
+.technique-sources__list {
   list-style: none;
+  padding: 0;
+  margin: 0;
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.125rem;
 }
 
-.technique-moment {
+.technique-source {
-  padding: 0.875rem 1rem;
+  display: flex;
-  background: var(--color-bg-surface);
+  gap: 0.625rem;
-  border: 1px solid var(--color-border);
+  padding: 0.5rem 0;
-  border-radius: 0.5rem;
+  align-items: flex-start;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  border-bottom: 1px solid var(--color-border-subtle, rgba(255,255,255,0.04));
 }
 
-.technique-moment__title {
+.technique-source:last-child {
-  display: block;
+  border-bottom: none;
-  margin: 0 0 0.25rem 0;
+}
-  font-size: 0.9375rem;
+
+.technique-source__index {
+  color: var(--color-accent);
   font-weight: 600;
-  line-height: 1.3;
+  font-size: 0.75rem;
+  flex-shrink: 0;
+  min-width: 1.5rem;
+  font-variant-numeric: tabular-nums;
+  padding-top: 0.0625rem;
 }
 
-.technique-moment__meta {
+.technique-source__body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+}
+
+.technique-source__title {
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.technique-source__detail {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-bottom: 0.25rem;
   flex-wrap: wrap;
-}
-
-.technique-moment__time {
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-  font-variant-numeric: tabular-nums;
-}
-
-.technique-moment__source {
-  font-size: 0.75rem;
   color: var(--color-text-muted);
+  font-size: 0.75rem;
+}
+
+.technique-source__file {
   font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
-  max-width: 20rem;
+  max-width: 24rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.technique-moment__summary {
+.technique-source__time {
-  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.technique-source__type {
+  color: var(--color-accent);
+  font-size: 0.6875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.technique-source__summary {
   color: var(--color-text-secondary);
+  font-size: 0.8125rem;
   line-height: 1.5;
 }
 
@@ -2368,13 +2399,13 @@ a.app-footer__repo:hover {
 
 .technique-related__grid {
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: 1fr 1fr;
   gap: 0.75rem;
 }
 
-@media (min-width: 600px) {
+@media (max-width: 600px) {
   .technique-related__grid {
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr;
   }
 }
 

frontend/src/components/ReadingHeader.tsx

@@ -1,34 +0,0 @@
-/**
- * Sticky reading header that appears when the article H1 scrolls out of view.
- *
- * Shows the article title and current section name in a thin fixed bar
- * at the top of the viewport. Uses CSS transform for slide-in/out animation.
- */
-
-interface ReadingHeaderProps {
-  /** Article title */
-  title: string;
-  /** Currently active section heading (from scroll-spy) */
-  currentSection: string;
-  /** Whether the header should be visible (H1 is out of viewport) */
-  visible: boolean;
-}
-
-export default function ReadingHeader({ title, currentSection, visible }: ReadingHeaderProps) {
-  return (
-    <div
-      className={`reading-header${visible ? " reading-header--visible" : ""}`}
-      aria-hidden={!visible}
-    >
-      <div className="reading-header__inner">
-        <span className="reading-header__title">{title}</span>
-        {currentSection && (
-          <>
-            <span className="reading-header__separator">·</span>
-            <span className="reading-header__section">{currentSection}</span>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}

frontend/src/components/TableOfContents.tsx

@@ -4,8 +4,10 @@
  * Renders a nested list of anchor links matching the H2/H3 section structure.
  * Uses slugified headings as IDs for scroll targeting.
  * Receives activeId from parent (TechniquePage) which owns the IntersectionObserver.
+ * Smooth-scrolls to target on click with offset for the sticky title bar.
  */
 
+import { useCallback } from "react";
 import type { BodySectionV2 } from "../api/public-client";
 
 export function slugify(text: string): string {
@@ -21,6 +23,16 @@ interface TableOfContentsProps {
 }
 
 export default function TableOfContents({ sections, activeId }: TableOfContentsProps) {
+  const handleClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>, targetId: string) => {
+    e.preventDefault();
+    const el = document.getElementById(targetId);
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", block: "start" });
+      // Update URL hash without jumping
+      window.history.replaceState(null, "", `#${targetId}`);
+    }
+  }, []);
+
   if (sections.length === 0) return null;
 
   return (
@@ -34,6 +46,7 @@ export default function TableOfContents({ sections, activeId }: TableOfContentsP
             <li key={sectionSlug} className="technique-toc__item">
               <a
                 href={`#${sectionSlug}`}
+                onClick={(e) => handleClick(e, sectionSlug)}
                 className={`technique-toc__link${isActive ? " technique-toc__link--active" : ""}`}
               >
                 {section.heading}
@@ -47,6 +60,7 @@ export default function TableOfContents({ sections, activeId }: TableOfContentsP
                       <li key={subSlug} className="technique-toc__subitem">
                         <a
                           href={`#${subSlug}`}
+                          onClick={(e) => handleClick(e, subSlug)}
                           className={`technique-toc__sublink${isSubActive ? " technique-toc__sublink--active" : ""}`}
                         >
                           {sub.heading}

frontend/src/pages/TechniquePage.tsx

@@ -1,9 +1,9 @@
 /**
  * Technique page detail view with version switching.
  *
- * Fetches a single technique by slug. When historical versions exist,
+ * Layout: sticky title bar at top of article, 2-column grid below.
- * shows a version switcher that lets admins view previous snapshots
+ * Left column: prose, key moments (bibliography), signal chains, related techniques.
- * with pipeline metadata (prompt hashes, model config).
+ * Right column: ToC (sticky, scrolls with viewer).
  */
 
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -20,7 +20,6 @@ import {
 import ReportIssueModal from "../components/ReportIssueModal";
 import CopyLinkButton from "../components/CopyLinkButton";
 import CreatorAvatar from "../components/CreatorAvatar";
-import ReadingHeader from "../components/ReadingHeader";
 import TableOfContents, { slugify } from "../components/TableOfContents";
 import { parseCitations } from "../utils/citations";
 import { useDocumentTitle } from "../hooks/useDocumentTitle";
@@ -43,7 +42,6 @@ function formatDate(iso: string): string {
 
 /** Extract the displayable fields from a version snapshot, matching TechniqueDetail shape. */
 function snapshotToOverlay(snapshot: Record<string, unknown>) {
-  // body_sections can be either list (v2) or dict (v1)
   let bodySections: BodySectionV2[] | Record<string, unknown> | undefined;
   if (Array.isArray(snapshot.body_sections)) {
     bodySections = snapshot.body_sections as BodySectionV2[];
@@ -113,13 +111,12 @@ export default function TechniquePage() {
         const data = await fetchTechnique(slug);
         if (!cancelled) {
           setTechnique(data);
-          // Load versions if any exist
           if (data.version_count > 0) {
             try {
               const vRes = await fetchTechniqueVersions(slug);
               if (!cancelled) setVersions(vRes.items);
             } catch {
-              // Non-critical — version list fails silently
+              // Non-critical
             }
           }
         }
@@ -172,12 +169,9 @@ export default function TechniquePage() {
     };
   }, [slug, selectedVersion]);
 
-  // --- Scroll-spy: activeId for ToC and ReadingHeader ---
+  // --- Scroll-spy: activeId for ToC ---
-  // IMPORTANT: These hooks must be above early returns to maintain
-  // consistent hook ordering across renders (React rules of hooks).
   const [activeId, setActiveId] = useState<string>("");
-  const [h1Visible, setH1Visible] = useState(true);
+  const titleBarRef = useRef<HTMLDivElement>(null);
-  const h1Ref = useRef<HTMLHeadingElement>(null);
 
   // Overlay snapshot fields when viewing a historical version
   const isHistorical = selectedVersion !== "current" && versionDetail != null;
@@ -202,35 +196,7 @@ export default function TechniquePage() {
     return ids;
   }, [displayFormat, displaySections]);
 
-  // Build a map from slug → heading text for ReadingHeader display
+  // Observe section headings — drives activeId for ToC
-  const sectionHeadingMap = useMemo(() => {
-    if (displayFormat !== "v2" || !Array.isArray(displaySections)) return new Map<string, string>();
-    const map = new Map<string, string>();
-    for (const section of displaySections as BodySectionV2[]) {
-      const sectionSlug = slugify(section.heading);
-      map.set(sectionSlug, section.heading);
-      for (const sub of section.subsections) {
-        map.set(`${sectionSlug}--${slugify(sub.heading)}`, sub.heading);
-      }
-    }
-    return map;
-  }, [displayFormat, displaySections]);
-
-  // Observe H1 visibility — drives reading header show/hide
-  useEffect(() => {
-    const el = h1Ref.current;
-    if (!el) return;
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        setH1Visible(entry?.isIntersecting ?? true);
-      },
-      { threshold: 0 }
-    );
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [technique]); // re-attach when technique changes
-
-  // Observe section headings — drives activeId for ToC + ReadingHeader
   useEffect(() => {
     if (allSectionIds.length === 0) return;
     const observer = new IntersectionObserver(
@@ -263,8 +229,6 @@ export default function TechniquePage() {
     }
   }, [technique]);
 
-  const currentSectionHeading = sectionHeadingMap.get(activeId) ?? "";
-
   if (loading) {
     return <div className="loading">Loading technique…</div>;
   }
@@ -298,16 +262,10 @@ export default function TechniquePage() {
   const displayPlugins = overlay?.plugins ?? technique.plugins;
   const displayQuality = overlay?.source_quality ?? technique.source_quality;
 
+  const isV2 = displayFormat === "v2" && Array.isArray(displaySections) && (displaySections as BodySectionV2[]).length > 0;
+
   return (
     <article className="technique-page">
-      {/* Reading header — v2 pages only */}
-      {displayFormat === "v2" && Array.isArray(displaySections) && (displaySections as BodySectionV2[]).length > 0 && (
-        <ReadingHeader
-          title={displayTitle}
-          currentSection={currentSectionHeading}
-          visible={!h1Visible}
-        />
-      )}
       {/* Back link */}
       <Link to="/" className="back-link">
         ← Back
@@ -336,85 +294,76 @@ export default function TechniquePage() {
         </div>
       )}
 
-      <div className="technique-columns">
+      {/* Sticky title bar — sits at top of article, becomes sticky on scroll */}
-        <div className="technique-columns__main">
+      <div className="technique-title-bar" ref={titleBarRef}>
-        <div className="technique-header__title-row">
+        <div className="technique-title-bar__inner">
-            <h1 className="technique-header__title" ref={h1Ref}>{displayTitle} <CopyLinkButton /></h1>
+          <h1 className="technique-title-bar__title">{displayTitle} <CopyLinkButton /></h1>
+          <div className="technique-title-bar__meta">
             {displayCategory && (
               <span className={"badge badge--category badge--cat-" + (displayCategory?.toLowerCase().replace(/\s+/g, "-") ?? "")}>
                 {displayCategory}
               </span>
             )}
+            {technique.creator_info && (
+              <Link to={`/creators/${technique.creator_info.slug}`} className="technique-title-bar__creator">
+                <CreatorAvatar creatorId={String(technique.creator_info.slug)} name={technique.creator_info.name} size={20} />
+                {technique.creator_info.name}
+              </Link>
+            )}
           </div>
-        {technique.creator_info && (
+        </div>
-          <div className="technique-header__creator-block">
+      </div>
-            <Link to={`/creators/${technique.creator_info.slug}`} className="technique-header__creator-link">
+
-              <CreatorAvatar creatorId={String(technique.creator_info.slug)} name={technique.creator_info.name} size={22} />
+      {/* Stats + version switcher */}
-              {technique.creator_info.name}
+      <div className="technique-header__stats">
-            </Link>
+        {(() => {
-            {technique.creator_info.genres && technique.creator_info.genres.length > 0 && (
+          const sourceCount = new Set(
-              <span className="technique-header__creator-genres">
+            technique.key_moments
-                {technique.creator_info.genres.map((g) => (
+              .map((km) => km.video_filename)
-                  <span key={g} className="pill pill--genre-small">{g}</span>
+              .filter(Boolean),
-                ))}
+          ).size;
-              </span>
+          const momentCount = technique.key_moments.length;
+          const updated = new Date(technique.updated_at).toLocaleDateString(
+            "en-US",
+            { year: "numeric", month: "short", day: "numeric" },
+          );
+          const parts = [
+            `Compiled from ${sourceCount} source${sourceCount !== 1 ? "s" : ""}`,
+            `${momentCount} key moment${momentCount !== 1 ? "s" : ""}`,
+          ];
+          if (technique.version_count > 0) {
+            parts.push(
+              `${technique.version_count} version${technique.version_count !== 1 ? "s" : ""}`,
+            );
+          }
+          parts.push(`Last updated ${updated}`);
+          return parts.join(" · ");
+        })()}
+      </div>
+
+      <div className="technique-header__actions">
+        {versions.length > 0 && (
+          <div className="version-switcher">
+            <label className="version-switcher__label">Version:</label>
+            <select
+              className="version-switcher__select"
+              value={selectedVersion}
+              onChange={(e) => setSelectedVersion(e.target.value)}
+              disabled={versionLoading}
+            >
+              <option value="current">Current (live)</option>
+              {versions.map((v) => (
+                <option key={v.version_number} value={String(v.version_number)}>
+                  v{v.version_number} — {formatDate(v.created_at)}
+                </option>
+              ))}
+            </select>
+            {versionLoading && (
+              <span className="version-switcher__loading">Loading…</span>
             )}
           </div>
         )}
-
+      </div>
-
-        {/* Meta stats line */}
-        <div className="technique-header__stats">
-          {(() => {
-            const sourceCount = new Set(
-              technique.key_moments
-                .map((km) => km.video_filename)
-                .filter(Boolean),
-            ).size;
-            const momentCount = technique.key_moments.length;
-            const updated = new Date(technique.updated_at).toLocaleDateString(
-              "en-US",
-              { year: "numeric", month: "short", day: "numeric" },
-            );
-            const parts = [
-              `Compiled from ${sourceCount} source${sourceCount !== 1 ? "s" : ""}`,
-              `${momentCount} key moment${momentCount !== 1 ? "s" : ""}`,
-            ];
-            if (technique.version_count > 0) {
-              parts.push(
-                `${technique.version_count} version${technique.version_count !== 1 ? "s" : ""}`,
-              );
-            }
-            parts.push(`Last updated ${updated}`);
-            return parts.join(" · ");
-          })()}
-        </div>
-
-        {/* Version switcher */}
-        <div className="technique-header__actions">
-          {versions.length > 0 && (
-            <div className="version-switcher">
-              <label className="version-switcher__label">Version:</label>
-              <select
-                className="version-switcher__select"
-                value={selectedVersion}
-                onChange={(e) => setSelectedVersion(e.target.value)}
-                disabled={versionLoading}
-              >
-                <option value="current">Current (live)</option>
-                {versions.map((v) => (
-                  <option key={v.version_number} value={String(v.version_number)}>
-                    v{v.version_number} — {formatDate(v.created_at)}
-                  </option>
-                ))}
-              </select>
-              {versionLoading && (
-                <span className="version-switcher__loading">Loading…</span>
-              )}
-            </div>
-          )}
-
-        </div>
 
       {/* Pipeline metadata for historical versions */}
       {isHistorical && versionDetail.pipeline_metadata && (
@@ -474,179 +423,181 @@ export default function TechniquePage() {
         />
       )}
 
-
+      {/* Tags + plugin pills */}
-          {/* Tags + plugin pills — scoped to left column */}
+      {((displayTags && displayTags.length > 0) || (displayPlugins && displayPlugins.length > 0)) && (
-          {((displayTags && displayTags.length > 0) || (displayPlugins && displayPlugins.length > 0)) && (
+        <div className="technique-main__tags">
-            <div className="technique-main__tags">
+          {displayTags && displayTags.map((tag) => (
-              {displayTags && displayTags.map((tag) => (
+            <span key={tag} className="pill">
-                <span key={tag} className="pill">
+              {tag}
-                  {tag}
+            </span>
-                </span>
+          ))}
-              ))}
+          {displayPlugins && displayPlugins.length > 0 && displayPlugins.map((plugin) => (
-              {displayPlugins && displayPlugins.length > 0 && displayPlugins.map((plugin) => (
+            <span key={`plugin-${plugin}`} className="pill pill--plugin">
-                <span key={`plugin-${plugin}`} className="pill pill--plugin">
+              {plugin}
-                  {plugin}
+            </span>
-                </span>
+          ))}
-              ))}
+        </div>
-            </div>
-          )}
-
-          {/* Summary */}
-      {displaySummary && (
-        <section className="technique-summary">
-          <p>{displaySummary}</p>
-        </section>
       )}
 
-      {/* Study guide prose — body_sections */}
+      {/* Two-column layout: main content + ToC sidebar */}
-      {displaySections &&
+      <div className="technique-columns">
-        (Array.isArray(displaySections) ? displaySections.length > 0 : Object.keys(displaySections).length > 0) && (
+        <div className="technique-columns__main">
-          <section className="technique-prose">
+          {/* Summary */}
-            {displayFormat === "v2" && Array.isArray(displaySections) ? (
+          {displaySummary && (
-              <>
+            <section className="technique-summary">
-                {(displaySections as BodySectionV2[]).map((section) => {
+              <p>{displaySummary}</p>
-                  const sectionSlug = slugify(section.heading);
+            </section>
+          )}
+
+          {/* Study guide prose — body_sections */}
+          {displaySections &&
+            (Array.isArray(displaySections) ? displaySections.length > 0 : Object.keys(displaySections).length > 0) && (
+              <section className="technique-prose">
+                {displayFormat === "v2" && Array.isArray(displaySections) ? (
+                  <>
+                    {(displaySections as BodySectionV2[]).map((section) => {
+                      const sectionSlug = slugify(section.heading);
+                      return (
+                        <div key={sectionSlug} className="technique-prose__section" id={sectionSlug}>
+                          <h2>{section.heading}</h2>
+                          {section.content && (
+                            <p>{parseCitations(section.content, technique.key_moments)}</p>
+                          )}
+                          {section.subsections.map((sub) => {
+                            const subSlug = `${sectionSlug}--${slugify(sub.heading)}`;
+                            return (
+                              <div key={subSlug} className="technique-prose__subsection" id={subSlug}>
+                                <h3>{sub.heading}</h3>
+                                {sub.content && (
+                                  <p>{parseCitations(sub.content, technique.key_moments)}</p>
+                                )}
+                              </div>
+                            );
+                          })}
+                        </div>
+                      );
+                    })}
+                  </>
+                ) : (
+                  /* V1 dict format */
+                  Object.entries(displaySections as Record<string, unknown>).map(
+                    ([sectionTitle, content]: [string, unknown]) => (
+                      <div key={sectionTitle} className="technique-prose__section">
+                        <h2>{sectionTitle}</h2>
+                        {typeof content === "string" ? (
+                          <p>{content as string}</p>
+                        ) : typeof content === "object" && content !== null ? (
+                          <pre className="technique-prose__json">
+                            {JSON.stringify(content, null, 2)}
+                          </pre>
+                        ) : (
+                          <p>{String(content as string)}</p>
+                        )}
+                      </div>
+                    ),
+                  )
+                )}
+              </section>
+            )}
+
+          {/* Key Moments — bibliography style */}
+          {technique.key_moments.length > 0 && (
+            <section className="technique-sources">
+              <h2>Key Moments</h2>
+              <ol className="technique-sources__list">
+                {technique.key_moments.map((km, idx) => (
+                  <li key={km.id} id={`km-${km.id}`} className="technique-source">
+                    <span className="technique-source__index">[{idx}]</span>
+                    <div className="technique-source__body">
+                      <span className="technique-source__title">{km.title}</span>
+                      <span className="technique-source__detail">
+                        {km.video_filename && (
+                          <span className="technique-source__file">{km.video_filename}</span>
+                        )}
+                        <span className="technique-source__time">
+                          {formatTime(km.start_time)}–{formatTime(km.end_time)}
+                        </span>
+                        <span className="technique-source__type">{km.content_type}</span>
+                      </span>
+                      <span className="technique-source__summary">{km.summary}</span>
+                    </div>
+                  </li>
+                ))}
+              </ol>
+            </section>
+          )}
+
+          {/* Signal chains */}
+          {displayChains &&
+            displayChains.length > 0 && (
+              <section className="technique-chains">
+                <h2>Signal Chains</h2>
+                {displayChains.map((chain, i) => {
+                  const chainObj = chain as Record<string, unknown>;
+                  const chainName =
+                    typeof chainObj["name"] === "string"
+                      ? chainObj["name"]
+                      : `Chain ${i + 1}`;
+                  const steps = Array.isArray(chainObj["steps"])
+                    ? (chainObj["steps"] as string[])
+                    : [];
                   return (
-                    <div key={sectionSlug} className="technique-prose__section" id={sectionSlug}>
+                    <div key={i} className="technique-chain">
-                      <h2>{section.heading}</h2>
+                      <h3>{chainName}</h3>
-                      {section.content && (
+                      {steps.length > 0 && (
-                        <p>{parseCitations(section.content, technique.key_moments)}</p>
+                        <div className="technique-chain__flow">
+                          {steps.map((step, j) => (
+                            <span key={j}>
+                              {j > 0 && (
+                                <span className="technique-chain__arrow">
+                                  {" → "}
+                                </span>
+                              )}
+                              <span className="technique-chain__step">
+                                {String(step)}
+                              </span>
+                            </span>
+                          ))}
+                        </div>
                       )}
-                      {section.subsections.map((sub) => {
-                        const subSlug = `${sectionSlug}--${slugify(sub.heading)}`;
-                        return (
-                          <div key={subSlug} className="technique-prose__subsection" id={subSlug}>
-                            <h3>{sub.heading}</h3>
-                            {sub.content && (
-                              <p>{parseCitations(sub.content, technique.key_moments)}</p>
-                            )}
-                          </div>
-                        );
-                      })}
                     </div>
                   );
                 })}
-              </>
+              </section>
-            ) : (
+            )}
-              /* V1 dict format — original rendering */
+
-              Object.entries(displaySections as Record<string, unknown>).map(
+          {/* Related techniques */}
-                ([sectionTitle, content]: [string, unknown]) => (
+          {technique.related_links.length > 0 && (
-                  <div key={sectionTitle} className="technique-prose__section">
+            <section className="technique-related">
-                    <h2>{sectionTitle}</h2>
+              <h2>Related Techniques</h2>
-                    {typeof content === "string" ? (
+              <div className="technique-related__grid">
-                      <p>{content as string}</p>
+                {technique.related_links.map((link) => (
-                    ) : typeof content === "object" && content !== null ? (
+                  <div key={link.target_slug} className="related-card">
-                      <pre className="technique-prose__json">
+                    <Link to={`/techniques/${link.target_slug}`} className="related-card__title">
-                        {JSON.stringify(content, null, 2)}
+                      {link.target_title}
-                      </pre>
+                    </Link>
-                    ) : (
+                    {link.creator_name && (
-                      <p>{String(content as string)}</p>
+                      <span className="related-card__creator">{link.creator_name}</span>
+                    )}
+                    {link.topic_category && (
+                      <span className="related-card__badge">{link.topic_category}</span>
+                    )}
+                    {link.reason && (
+                      <p className="related-card__reason">{link.reason}</p>
                     )}
                   </div>
-                ),
+                ))}
-              )
-            )}
-          </section>
-        )}
-
-        </div>
-        <div className="technique-columns__sidebar">
-          {/* Table of Contents — v2 pages only */}
-          {displayFormat === "v2" && Array.isArray(displaySections) && (displaySections as BodySectionV2[]).length > 0 && (
-            <TableOfContents sections={displaySections as BodySectionV2[]} activeId={activeId} />
-          )}
-          {/* Key moments (always from live data — not versioned) */}
-      {technique.key_moments.length > 0 && (
-        <section className="technique-moments">
-          <h2>Key Moments</h2>
-          <ol className="technique-moments__list">
-            {technique.key_moments.map((km) => (
-              <li key={km.id} id={`km-${km.id}`} className="technique-moment">
-                <h3 className="technique-moment__title">{km.title}</h3>
-                <div className="technique-moment__meta">
-                  {km.video_filename && (
-                    <span className="technique-moment__source">
-                      {km.video_filename}
-                    </span>
-                  )}
-                  <span className="technique-moment__time">
-                    {formatTime(km.start_time)} – {formatTime(km.end_time)}
-                  </span>
-                  <span className="badge badge--content-type">
-                    {km.content_type}
-                  </span>
-                </div>
-                <p className="technique-moment__summary">{km.summary}</p>
-              </li>
-            ))}
-          </ol>
-        </section>
-      )}
-
-      {/* Signal chains */}
-      {displayChains &&
-        displayChains.length > 0 && (
-          <section className="technique-chains">
-            <h2>Signal Chains</h2>
-            {displayChains.map((chain, i) => {
-              const chainObj = chain as Record<string, unknown>;
-              const chainName =
-                typeof chainObj["name"] === "string"
-                  ? chainObj["name"]
-                  : `Chain ${i + 1}`;
-              const steps = Array.isArray(chainObj["steps"])
-                ? (chainObj["steps"] as string[])
-                : [];
-              return (
-                <div key={i} className="technique-chain">
-                  <h3>{chainName}</h3>
-                  {steps.length > 0 && (
-                    <div className="technique-chain__flow">
-                      {steps.map((step, j) => (
-                        <span key={j}>
-                          {j > 0 && (
-                            <span className="technique-chain__arrow">
-                              {" → "}
-                            </span>
-                          )}
-                          <span className="technique-chain__step">
-                            {String(step)}
-                          </span>
-                        </span>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              );
-            })}
-          </section>
-        )}
-
-      {/* Related techniques (always from live data) */}
-      {technique.related_links.length > 0 && (
-        <section className="technique-related">
-          <h2>Related Techniques</h2>
-          <div className="technique-related__grid">
-            {technique.related_links.map((link) => (
-              <div key={link.target_slug} className="related-card">
-                <Link to={`/techniques/${link.target_slug}`} className="related-card__title">
-                  {link.target_title}
-                </Link>
-                {link.creator_name && (
-                  <span className="related-card__creator">{link.creator_name}</span>
-                )}
-                {link.topic_category && (
-                  <span className="related-card__badge">{link.topic_category}</span>
-                )}
-                {link.reason && (
-                  <p className="related-card__reason">{link.reason}</p>
-                )}
               </div>
-            ))}
+            </section>
-          </div>
+          )}
-        </section>
-      )}
         </div>
+
+        {/* Sidebar: ToC only */}
+        {isV2 && (
+          <aside className="technique-columns__sidebar">
+            <TableOfContents sections={displaySections as BodySectionV2[]} activeId={activeId} />
+          </aside>
+        )}
       </div>
 
       {/* Footer actions */}

frontend/tsconfig.app.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/public-client.ts","./src/components/AdminDropdown.tsx","./src/components/AppFooter.tsx","./src/components/CategoryIcons.tsx","./src/components/CopyLinkButton.tsx","./src/components/CreatorAvatar.tsx","./src/components/ReadingHeader.tsx","./src/components/ReportIssueModal.tsx","./src/components/SearchAutocomplete.tsx","./src/components/SortDropdown.tsx","./src/components/TableOfContents.tsx","./src/components/TagList.tsx","./src/hooks/useCountUp.ts","./src/hooks/useDocumentTitle.ts","./src/hooks/useSortPreference.ts","./src/pages/About.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.tsx","./src/pages/AdminTechniquePages.tsx","./src/pages/CreatorDetail.tsx","./src/pages/CreatorsBrowse.tsx","./src/pages/Home.tsx","./src/pages/SearchResults.tsx","./src/pages/SubTopicPage.tsx","./src/pages/TechniquePage.tsx","./src/pages/TopicsBrowse.tsx","./src/utils/catSlug.ts","./src/utils/citations.tsx"],"version":"5.6.3"}
+{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/public-client.ts","./src/components/AdminDropdown.tsx","./src/components/AppFooter.tsx","./src/components/CategoryIcons.tsx","./src/components/CopyLinkButton.tsx","./src/components/CreatorAvatar.tsx","./src/components/ReportIssueModal.tsx","./src/components/SearchAutocomplete.tsx","./src/components/SortDropdown.tsx","./src/components/TableOfContents.tsx","./src/components/TagList.tsx","./src/hooks/useCountUp.ts","./src/hooks/useDocumentTitle.ts","./src/hooks/useSortPreference.ts","./src/pages/About.tsx","./src/pages/AdminPipeline.tsx","./src/pages/AdminReports.tsx","./src/pages/AdminTechniquePages.tsx","./src/pages/CreatorDetail.tsx","./src/pages/CreatorsBrowse.tsx","./src/pages/Home.tsx","./src/pages/SearchResults.tsx","./src/pages/SubTopicPage.tsx","./src/pages/TechniquePage.tsx","./src/pages/TopicsBrowse.tsx","./src/utils/catSlug.ts","./src/utils/citations.tsx"],"version":"5.6.3"}