style: reading width, shell layout, and prose typography (#1337)

* chore: prettier-format OG card files

* chore: add CLAUDE.md, remove internal planning docs, gitignore AI config

- Add CLAUDE.md orienting contributors; flags the repo as public and sets a high
  bar for code that must pass open-source review.
- Remove docs/plans/* internal design/planning notes (not appropriate for a
  public repo) and drop their references from code comments.
- gitignore .claude/ and other local AI assistant config.

* feat: personalized 'For you' feed (topic follow/mute + affinity)

Adds opt-in feed personalization built on the topic vocabulary:

- Schema (migration 0039, additive): user_topic_pref (follow/mute) and
  user_topic_affinity (implicit interest, time-decayed).
- feedRanking: pure, unit-tested scoring — a transparent weighted blend of
  recency, quality, and topic affinity, with muted topics filtered out.
- topicAffinity: derive per-user affinity from votes/bookmarks/comments through
  post_topic edges with decay; recomputed for active users by the nightly cron.
- profile.getTopicPrefs / setTopicPref: manage follows and mutes.
- content.getForYouFeed: re-rank a recent candidate window for the user; cold
  start (no signal) falls back to recency, so the existing feed is untouched.

Also trims verbose comments across the content-pipeline modules.

* style: reading width, shell layout, and prose typography

- Widen app shell to 1300px (right rail 300→280px); fold breakpoint moved to
  1300px so the center column holds its ~672px reading measure at all sizes
- Narrow article/discussion/link readers to max-w-prose (672px), unifying all
  content surfaces and matching the readability sweet spot (~70 chars/line)
- Remove double-up side padding from content wrappers; shell grid gap and
  mobile shell gutter (bumped to 1rem) now own all horizontal breathing room
- Re-key prose overrides onto design tokens (bg-inset, border-hairline,
  text-accent-soft, color-muted/fg) so styles flip correctly in dark mode;
  inline code selector narrowed to :not(pre)>code to avoid touching fenced blocks

* fix: prose color/line-height review findings

- Restore line-height: 1.62 on .prose :where(p,ul,ol) so it explicitly
  overrides prose-lg's own paragraph rule at lg+ (inherited value was silently
  losing to the plugin's direct p selector)
- Add .tiptap :where(p,ul,ol) { color: inherit } so the muted body-copy color
  does not bleed into the article editor's contenteditable
- Switch inline code from text-accent-soft to text-fg: accent-soft on bg-inset
  in light mode was 2.30:1 contrast, failing WCAG AA

Author: NiallJoeMaher

app/(app)/[username]/[slug]/_userLinkDetail.tsx

@@ -119,7 +119,7 @@ const UserLinkDetail = ({ username, contentSlug, initialContent }: Props) => {
 
   if (status === "pending") {
     return (
-      <div className="mx-auto max-w-prose px-0 py-4 sm:px-4 sm:py-8">
+      <div className="mx-auto max-w-prose py-4 sm:py-8">
         <div className="animate-pulse">
           <div className="mb-4 h-6 w-24 rounded bg-elevated" />
           <div className="mb-4 h-4 w-48 rounded bg-elevated" />
@@ -134,7 +134,7 @@ const UserLinkDetail = ({ username, contentSlug, initialContent }: Props) => {
 
   if (status === "error" || !linkContent) {
     return (
-      <div className="mx-auto max-w-prose px-0 py-4 sm:px-4 sm:py-8">
+      <div className="mx-auto max-w-prose py-4 sm:py-8">
         <Link
           href="/"
           className="mb-6 inline-flex items-center gap-1.5 font-mono text-sm text-muted transition-colors hover:text-fg"
@@ -173,7 +173,7 @@ const UserLinkDetail = ({ username, contentSlug, initialContent }: Props) => {
   const isOwner = session?.user?.id === linkContent.author?.id;
 
   return (
-    <article className="mx-auto max-w-prose px-0 py-4 sm:px-4 sm:py-8">
+    <article className="mx-auto max-w-prose py-4 sm:py-8">
       <Link
         href="/"
         className="mb-6 inline-flex items-center gap-1.5 font-mono text-sm text-muted transition-colors hover:text-fg"

app/(app)/s/[sourceSlug]/[slug]/_feedArticleContent.tsx

@@ -42,7 +42,7 @@ const FeedArticleContent = ({ sourceSlug, article }: Props) => {
   const safeExternalUrl = safeExternalHref(article.externalUrl);
 
   return (
-    <article className="mx-auto max-w-prose px-0 py-4 sm:px-4 sm:py-8">
+    <article className="mx-auto max-w-prose py-4 sm:py-8">
       <Link
         href="/"
         className="mb-6 inline-flex items-center gap-1.5 font-mono text-sm text-muted transition-colors hover:text-fg"

components/ContentDetail/PostReader.tsx

@@ -176,7 +176,7 @@ const PostReader = async ({
       {articleSchema && <JsonLd data={articleSchema} />}
       {breadcrumbSchema && <JsonLd data={breadcrumbSchema} />}
 
-      <div className="mx-auto max-w-3xl px-0 py-4 sm:px-4 sm:py-8">
+      <div className="mx-auto max-w-prose py-4 sm:py-8">
         <nav className="mb-6 flex items-center gap-2 text-sm text-muted">
           <Link href="/" className="hover:text-fg">
             Feed

styles/globals.css

@@ -227,7 +227,7 @@ select:focus {
   @apply px-6 py-3 text-base;
 }
 
-/* App shell — sticky top bar + 3-column rail grid. Breakpoints (1080 / 720) are
+/* App shell — sticky top bar + 3-column rail grid. Breakpoints (1300 / 720) are
    bespoke to the handoff, so they're raw media queries rather than Tailwind's
    lg/md. */
 .app-topbar {
@@ -246,10 +246,10 @@ select:focus {
 }
 
 .app-main {
-  max-width: 1180px;
+  max-width: 1300px;
   margin: 0 auto;
   display: grid;
-  grid-template-columns: 200px minmax(0, 1fr) 300px;
+  grid-template-columns: 200px minmax(0, 1fr) 280px;
   gap: clamp(1.5rem, 2.4vw, 2.5rem);
   padding: 2rem clamp(1rem, 3vw, 2rem) 4rem;
 }
@@ -278,10 +278,12 @@ select:focus {
   padding-top: 1.5rem;
 }
 
-@media (max-width: 1080px) {
+/* Rail folds away when there isn't room — the center column keeps its ~672px
+   reading measure rather than stretching. */
+@media (max-width: 1300px) {
   .app-main {
     grid-template-columns: 200px minmax(0, 1fr);
-    max-width: 832px;
+    max-width: 968px;
   }
   .app-rightrail {
     display: none;
@@ -293,7 +295,7 @@ select:focus {
     grid-template-columns: minmax(0, 1fr);
     /* Small side gutters on mobile (not the desktop clamp) so cards get the
        full reading width and don't overflow the viewport. */
-    padding: 1.25rem 0.75rem 6rem;
+    padding: 1.25rem 1rem 6rem;
   }
   .app-leftrail {
     display: none;
@@ -327,6 +329,28 @@ select:focus {
   @apply prose-neutral dark:prose-invert lg:prose-lg;
 
   margin-top: 1.5rem;
+  /* A slightly tighter measure than prose-lg's default for a calmer rhythm in
+     the ~672px reading column. */
+  line-height: 1.62;
+}
+
+/* Body copy sits a step down from the headings (Medium-style); headings and
+   bold lift to the primary text colour. Everything is keyed off the design
+   tokens so it flips correctly in dark mode. */
+.prose :where(p, ul, ol) {
+  color: rgb(var(--color-muted));
+  line-height: 1.62;
+}
+/* Don't dim paragraph text while the author is writing. */
+.tiptap :where(p, ul, ol) {
+  color: inherit;
+}
+.prose :where(h1, h2, h3, h4) {
+  @apply font-display tracking-tight;
+  color: rgb(var(--color-fg));
+}
+.prose :where(strong, b) {
+  color: rgb(var(--color-fg));
 }
 
 .prose .anchor {
@@ -344,7 +368,14 @@ select:focus {
 }
 
 .prose a {
-  @apply transition-all;
+  @apply text-accent-soft underline transition-all;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
+}
+.prose blockquote {
+  @apply border-accent;
+  border-left-width: 3px;
+  color: rgb(var(--color-muted));
 }
 .prose blockquote p::before {
   content: none;
@@ -360,11 +391,13 @@ select:focus {
 }
 
 .prose pre {
-  @apply border-2 border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-black;
+  @apply border border-hairline bg-inset;
 }
 
-.prose code {
-  @apply rounded-lg border border-neutral-100 bg-neutral-100 px-1 py-0.5 font-mono text-neutral-800 dark:border-neutral-800 dark:bg-black dark:text-neutral-200;
+/* Inline code only — fenced blocks keep their own treatment below. */
+.prose :not(pre) > code {
+  @apply rounded-sm border border-hairline bg-inset px-1 py-0.5 font-mono text-fg;
+  font-size: 0.86em;
 }
 
 .prose code:after {
@@ -376,8 +409,7 @@ select:focus {
 }
 
 .prose pre code {
-  @apply p-0 text-neutral-800 dark:text-neutral-200;
-  border: initial;
+  @apply border-0 bg-transparent p-0 text-fg;
 }
 
 .prose img {