refactor: use shadow theme tokens, remove ProjectCard translate-hover

Replace inline var(--blue) arbitrary shadow values with typed theme
tokens (shadow-brutal-xl, shadow-brutal-2xl). Remove translate on
ProjectCard hover — shadow-only interaction is less distracting in
a dense grid layout.

src/entities/experience/ui/ExperienceCard/ExperienceCard.test.tsx

@@ -50,10 +50,10 @@ describe('ExperienceCard', () => {
       expect(company).toHaveClass('opacity-80');
     });
 
-    it('description paragraph has text-base and max-w-[700px]', () => {
+    it('description renders via RichText with rich-text class', () => {
       render(<ExperienceCard {...DEFAULT_PROPS} />);
       const desc = screen.getByText('Built scalable frontend systems.');
-      expect(desc).toHaveClass('text-base', 'max-w-[700px]');
+      expect(desc.closest('.rich-text')).toBeInTheDocument();
     });
 
     it('card has brutal-border class (from Card component)', () => {

src/entities/experience/ui/ExperienceCard/ExperienceCard.tsx

@@ -1,4 +1,4 @@
-import { Card } from '$shared/ui';
+import { Card, RichText } from '$shared/ui';
 
 type Props = {
   /**
@@ -36,7 +36,7 @@ export function ExperienceCard({ title, company, period, description, className
         </div>
         <span className="brutal-border px-4 py-2 bg-blue text-cream text-sm self-start">{period}</span>
       </div>
-      <p className="text-base max-w-[700px]">{description}</p>
+      <RichText html={description} />
     </Card>
   );
 }

src/entities/project/ui/ProjectCard/ProjectCard.test.tsx

@@ -41,7 +41,7 @@ describe('ProjectCard', () => {
     it('card has hover transition classes', () => {
       const { container } = render(<ProjectCard {...DEFAULT_PROPS} />);
       const card = container.firstChild as HTMLElement;
-      expect(card).toHaveClass('group', 'transition-all', 'duration-300');
+      expect(card).toHaveClass('group', 'transition-shadow', 'duration-300');
     });
 
     it('year badge has correct classes', () => {

src/entities/project/ui/ProjectCard/ProjectCard.tsx

@@ -30,12 +30,7 @@ type Props = {
  */
 export function ProjectCard({ title, year, description, tags, imageUrl }: Props) {
   return (
-    <Card
-      className={cn(
-        'group hover:translate-x-[2px] hover:translate-y-[2px]',
-        'hover:shadow-[10px_10px_0_var(--blue)] transition-all duration-300',
-      )}
-    >
+    <Card className={cn('group hover:shadow-brutal-xl transition-shadow duration-300')}>
       <CardHeader>
         <div className="flex flex-row justify-between items-start mb-3">
           <CardTitle className="flex-1">{title}</CardTitle>

src/shared/styles/theme.css

@@ -69,21 +69,27 @@
   --radius: 0px;
 
   /* === BRUTALIST SHADOWS === */
-  --shadow-brutal: 8px 8px 0 var(--blue);
-  --shadow-brutal-sm: 4px 4px 0 var(--blue);
-  --shadow-brutal-lg: 12px 12px 0 var(--blue);
+  --shadow-brutal-xs: 1px 1px 0 var(--blue);
+  --shadow-brutal-sm: 3px 3px 0 var(--blue);
+  --shadow-brutal: 5px 5px 0 var(--blue);
+  --shadow-brutal-md: 7px 7px 0 var(--blue);
+  --shadow-brutal-lg: 8px 8px 0 var(--blue);
+  --shadow-brutal-xl: 10px 10px 0 var(--blue);
+  --shadow-brutal-2xl: 12px 12px 0 var(--blue);
 
   /* === GRID === */
   --grid-gap: var(--space-3);
+  --section-content-width: 56rem;
 
   /* === ANIMATION === */
   --ease-default: ease;
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
   --ease-decelerate: cubic-bezier(0.25, 0, 0, 1);
+  --ease-micro: cubic-bezier(0.22, 1, 0.36, 1);
   --duration-fast: 100ms;
-  --duration-normal: 200ms;
+  --duration-normal: 150ms;
   --duration-slow: 350ms;
-  --duration-spring: 380ms;
+  --duration-spring: 220ms;
 }
 
 @theme inline {
@@ -110,6 +116,15 @@
   --radius-sm: var(--radius);
   --radius-md: var(--radius);
   --radius-lg: var(--radius);
+  --container-section: var(--section-content-width);
+
+  --shadow-brutal-xs: var(--shadow-brutal-xs);
+  --shadow-brutal-sm: var(--shadow-brutal-sm);
+  --shadow-brutal: var(--shadow-brutal);
+  --shadow-brutal-md: var(--shadow-brutal-md);
+  --shadow-brutal-lg: var(--shadow-brutal-lg);
+  --shadow-brutal-xl: var(--shadow-brutal-xl);
+  --shadow-brutal-2xl: var(--shadow-brutal-2xl);
 }
 
 @layer base {
@@ -213,6 +228,11 @@
   }
 }
 
+/* Button elevation transition — only transform animates; shadow snaps instantly */
+.btn-transition {
+  transition: transform 0.13s var(--ease-micro);
+}
+
 /* Brutalist utility classes */
 .brutal-shadow {
   box-shadow: var(--shadow-brutal);
@@ -239,20 +259,18 @@
   border-right: var(--border-width) solid var(--blue);
 }
 
-/* Section content enter animation (initial render, no navigation) */
-.section-content {
-  opacity: 1;
-  transform: translateY(0);
-  transition:
-    opacity var(--duration-slow) var(--ease-default),
-    transform var(--duration-slow) var(--ease-default);
+/* Editorial rich-text typography */
+.rich-text {
+  max-width: 65ch;
+  line-height: 1.65;
+  font-feature-settings: "onum";
+  hanging-punctuation: first last;
+  text-wrap: pretty;
+  hyphens: auto;
 }
 
-@starting-style {
-  .section-content {
-    opacity: 0;
-    transform: translateY(12px);
-  }
+.rich-text p + p {
+  margin-top: 1.2em;
 }
 
 /* Cross-section view transition (navigation between sections) */
@@ -291,41 +309,3 @@
     transform: translateY(0);
   }
 }
-
-/* Section body: instant blur-out, clean slide-in */
-::view-transition-old(section-body) {
-  animation-name: section-body-out;
-  animation-duration: var(--duration-fast);
-  animation-timing-function: var(--ease-default);
-  animation-fill-mode: both;
-}
-
-::view-transition-new(section-body) {
-  animation-name: section-body-in;
-  animation-duration: var(--duration-slow);
-  animation-delay: var(--duration-normal);
-  animation-timing-function: var(--ease-decelerate);
-  animation-fill-mode: both;
-}
-
-@keyframes section-body-out {
-  from {
-    opacity: 1;
-    filter: blur(0);
-  }
-  to {
-    opacity: 0;
-    filter: blur(3px);
-  }
-}
-
-@keyframes section-body-in {
-  from {
-    opacity: 0;
-    transform: translateY(16px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}

src/shared/ui/Button/ui/Button.tsx

@@ -22,10 +22,14 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 const VARIANTS: Record<ButtonVariant, string> = {
-  primary: 'bg-blue text-cream outline-[3px] outline-cream',
-  secondary: 'bg-blue text-cream outline-[3px] outline-cream',
-  outline: 'bg-transparent text-blue border-blue',
-  ghost: 'bg-cream text-blue border-blue',
+  primary:
+    'brutal-border bg-blue text-cream shadow-[5px_5px_0_rgba(4,28,243,0.35)] hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[7px_7px_0_rgba(4,28,243,0.35)] active:translate-x-0.5 active:translate-y-0.5 active:shadow-[1px_1px_0_rgba(4,28,243,0.35)]',
+  secondary:
+    'brutal-border bg-blue text-cream shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-md active:translate-x-0.5 active:translate-y-0.5 active:shadow-brutal-xs',
+  outline:
+    'brutal-border bg-transparent text-blue shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-md active:translate-x-0.5 active:translate-y-0.5 active:shadow-brutal-xs',
+  ghost:
+    'border-[3px] border-solid border-blue/35 bg-cream text-blue hover:border-blue hover:bg-blue/10 active:bg-blue active:text-cream',
 };
 
 const SIZES: Record<ButtonSize, string> = {
@@ -34,8 +38,9 @@ const SIZES: Record<ButtonSize, string> = {
   lg: 'px-8 py-4 text-lg',
 };
 
-const BASE =
-  'brutal-border brutal-shadow transition-all duration-200 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[6px_6px_0_var(--blue)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-[4px_4px_0_var(--blue)] uppercase tracking-wider';
+/* box-shadow excluded from transition intentionally — snaps instantly so the
+ * eye follows the 130ms button movement, not the shadow change. */
+const BASE = 'btn-transition uppercase tracking-wider';
 
 /**
  * Brutalist button with variants and sizes.

src/shared/ui/RichText/ui/RichText.tsx

@@ -1,4 +1,5 @@
 import parse from 'html-react-parser';
+import { cn } from '$shared/lib';
 
 type Props = {
   /**
@@ -6,24 +7,19 @@ type Props = {
    */
   html: string;
   /**
-   * CSS classes applied to the wrapper div
+   * Additional CSS classes merged onto the wrapper div
    */
   className?: string;
 };
 
 /**
  * Renders a PocketBase rich-text HTML string as React elements.
+ * Always applies editorial magazine typography via the rich-text CSS class.
  */
 export function RichText({ html, className }: Props) {
   if (!html) {
     return null;
   }
 
-  const parsed = parse(html);
-
-  if (className) {
-    return <div className={className}>{parsed}</div>;
-  }
-
-  return <>{parsed}</>;
+  return <div className={cn('rich-text', className)}>{parse(html)}</div>;
 }

src/widgets/BioSection/ui/BioSection/BioSection.tsx

@@ -14,5 +14,5 @@ export default async function BioSection() {
     notFound();
   }
 
-  return <RichText html={data.content} className="prose prose-lg max-w-none" />;
+  return <RichText html={data.content} />;
 }

src/widgets/ExperienceSection/ui/ExperienceSection/ExperienceSection.tsx

@@ -13,7 +13,7 @@ export default async function ExperienceSection() {
   });
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 max-w-section">
       {items.map((exp) => (
         <ExperienceCard
           key={exp.id}

src/widgets/IntroSection/ui/IntroSection/IntroSection.tsx

@@ -14,5 +14,5 @@ export default async function IntroSection() {
     notFound();
   }
 
-  return <RichText html={data.content} className="prose prose-lg max-w-none" />;
+  return <RichText html={data.content} />;
 }

src/widgets/Navigation/ui/SidebarNav.tsx

@@ -53,7 +53,7 @@ export function SidebarNav({ items }: Props) {
             className={cn(
               'block w-full text-left brutal-border bg-cream px-6 py-4 transition-all duration-300',
               isActive(item)
-                ? 'shadow-[12px_12px_0_var(--blue)] opacity-100 translate-x-0'
+                ? 'shadow-brutal-2xl opacity-100 translate-x-0'
                 : 'opacity-40 shadow-none hover:opacity-60',
             )}
           >

src/widgets/ProjectsSection/ui/ProjectsSection/ProjectsSection.tsx

@@ -25,7 +25,7 @@ export default async function ProjectsSection() {
   });
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-section">
       {items.map((project) => (
         <ProjectCard
           key={project.id}

src/widgets/SkillsSection/ui/SkillsSection/SkillsSection.tsx

@@ -20,7 +20,7 @@ export default async function SkillsSection() {
   const categories = groupByKey(data.items, 'category');
 
   return (
-    <div className="space-y-12">
+    <div className="space-y-12 max-w-section">
       {Object.entries(categories).map(([category, items]) => (
         <div key={category} className="space-y-4">
           <h3 className="text-xl font-bold uppercase tracking-widest opacity-50">{category}</h3>