fix: restore case study drawer interactions

src/components/CaseStudyContent.tsx

@@ -24,7 +24,7 @@ export function CaseStudyContent({
     <article className={styles.content}>
       <header className={styles.hero}>
         <p className={styles.date}>{project.date}</p>
-        <h1 id="case-study-title" className={styles.title} tabIndex={-1} data-case-study-heading>
+        <h1 id="case-study-title" className={styles.title}>
           {project.title}
         </h1>
         <p id="case-study-introduction" className={styles.introduction}>{caseStudy.introduction}</p>

src/components/CaseStudyDrawer.module.css

@@ -204,16 +204,6 @@
   letter-spacing: 0;
 }
 
-.title:focus {
-  outline: none;
-}
-
-.title:focus-visible {
-  border-radius: var(--radius-sm);
-  outline: 3px solid var(--focus-ring);
-  outline-offset: var(--space-2);
-}
-
 .introduction {
   max-width: 46rem;
   color: var(--text-secondary);

src/components/CaseStudyDrawer.tsx

@@ -74,7 +74,7 @@ export function CaseStudyDrawer({ children, locale }: { children: ReactNode; loc
     root.style.overflow = 'hidden';
     requestAnimationFrame(() => {
       dialog.dataset.state = 'open';
-      dialog.querySelector<HTMLElement>('[data-case-study-heading]')?.focus();
+      dialog.querySelector<HTMLElement>('[data-case-study-initial-focus]')?.focus();
     });
 
     return () => {
@@ -96,7 +96,7 @@ export function CaseStudyDrawer({ children, locale }: { children: ReactNode; loc
     scrollRef.current?.scrollTo({ top: 0, behavior: 'auto' });
     requestAnimationFrame(() => {
       setCopyState('idle');
-      dialogRef.current?.querySelector<HTMLElement>('[data-case-study-heading]')?.focus();
+      dialogRef.current?.querySelector<HTMLElement>('[data-case-study-initial-focus]')?.focus();
     });
   }, [pathname]);
 
@@ -145,7 +145,14 @@ export function CaseStudyDrawer({ children, locale }: { children: ReactNode; loc
               {copyState === 'copied' ? <Check size={19} aria-hidden="true" /> : <Copy size={18} aria-hidden="true" />}
               <span className={styles.actionText}>{copyState === 'copied' ? copy.linkCopied : copy.copyLink}</span>
             </button>
-            <button type="button" className={styles.iconButton} onClick={(event) => requestDismiss(event.detail !== 0)} aria-label={copy.closeCaseStudy}>
+            <button
+              type="button"
+              className={styles.iconButton}
+              onClick={(event) => requestDismiss(event.detail !== 0)}
+              aria-label={copy.closeCaseStudy}
+              data-case-study-initial-focus
+              autoFocus
+            >
               <X size={21} aria-hidden="true" />
             </button>
           </div>

src/components/ProjectsSection.tsx

@@ -129,6 +129,10 @@ export const ProjectsSection = ({ locale }: { locale: Locale }) => {
 
   const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
     if (event.pointerType !== 'mouse' || event.button !== 0) return;
+    if (
+      event.target instanceof Element
+      && event.target.closest('a, button, input, select, textarea, [role="button"]')
+    ) return;
 
     const viewport = viewportRef.current;
     if (!viewport) return;