Mobile polish: fix 320px overflow, 44px tap targets, readable badges

- Project cards stack credits under title on small screens
- Fluid headings on /work and project pages; next-project banner wraps
- Footer, back, award and nav links padded to ~44px touch targets
- theRender.Fish marked as in-house project

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

app/page.tsx

@@ -228,7 +228,7 @@ export default function Home() {
             </p>
             <a
               href={`mailto:${site.email}?subject=New%20project%20enquiry`}
-              className="mt-12 inline-block border-b border-accent pb-2 font-display text-xl font-light tracking-wider break-all transition-colors hover:text-accent md:text-4xl"
+              className="mt-10 inline-block border-b border-accent pt-2 pb-3 font-display text-xl font-light tracking-wider break-all transition-colors hover:text-accent md:text-4xl"
             >
               {site.email}
             </a>

app/work/[slug]/page.tsx

@@ -52,7 +52,7 @@ export default async function ProjectPage({ params }: PageProps<"/work/[slug]">)
       <div className="mx-auto max-w-7xl px-5 md:px-8">
         <Link
           href="/work/"
-          className="font-mono text-xs tracking-[0.2em] text-muted uppercase transition-colors hover:text-fg"
+          className="-my-3.5 inline-block py-3.5 font-mono text-xs tracking-[0.2em] text-muted uppercase transition-colors hover:text-fg"
         >
           ← All work
         </Link>
@@ -106,7 +106,7 @@ export default async function ProjectPage({ params }: PageProps<"/work/[slug]">)
           </ul>
           <a
             href={`mailto:${site.email}?subject=${encodeURIComponent(`Enquiry: ${project.title}`)}`}
-            className="mt-12 inline-block font-mono text-xs tracking-[0.2em] text-accent uppercase hover:text-fg"
+            className="mt-9 inline-block py-3 font-mono text-xs tracking-[0.2em] text-accent uppercase hover:text-fg"
           >
             Talk to us about a project like this →
           </a>
@@ -115,13 +115,13 @@ export default async function ProjectPage({ params }: PageProps<"/work/[slug]">)
 
       <Link href={`/work/${next.slug}/`} className="group block border-t border-line">
         <div className="mx-auto flex max-w-7xl items-center justify-between gap-6 px-5 py-14 md:px-8 md:py-20">
-          <div>
+          <div className="min-w-0">
             <p className="font-mono text-xs tracking-[0.3em] text-muted uppercase">Next project</p>
-            <p className="mt-3 font-display text-3xl font-thin uppercase transition-colors group-hover:text-accent md:text-6xl">
+            <p className="mt-3 font-display text-3xl font-thin break-words uppercase transition-colors group-hover:text-accent md:text-6xl">
               {next.title}
             </p>
           </div>
-          <span className="font-display text-4xl font-thin transition-transform group-hover:translate-x-2 md:text-6xl">
+          <span className="shrink-0 font-display text-4xl font-thin transition-transform group-hover:translate-x-2 md:text-6xl">
             →
           </span>
         </div>

app/work/page.tsx

@@ -14,7 +14,7 @@ export default function WorkPage() {
   return (
     <div className="mx-auto max-w-7xl px-5 pt-36 pb-24 md:px-8 md:pt-48 md:pb-36">
       <SectionLabel index="—">Work</SectionLabel>
-      <h1 className="font-display text-6xl leading-[0.9] font-thin uppercase md:text-9xl">
+      <h1 className="font-display text-[clamp(2.75rem,15vw,8rem)] leading-[0.9] font-thin uppercase">
         Selected <span className="font-light">work</span>
       </h1>
       <section id="filmography" className="mt-20">

components/AwardBand.tsx

@@ -38,7 +38,7 @@ export default function AwardBand({ award }: { award: Award }) {
             {award.project && (
               <Link
                 href={`/work/${award.project}/`}
-                className="font-mono text-xs tracking-[0.2em] text-muted uppercase transition-colors hover:text-fg"
+                className="py-3.5 font-mono text-xs tracking-[0.2em] text-muted uppercase transition-colors hover:text-fg"
               >
                 See the project →
               </Link>

components/Filmography.tsx

@@ -19,17 +19,17 @@ export default function Filmography() {
                 <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
                 <div className="absolute top-2 left-2 flex flex-wrap gap-1">
                   {c.upcoming && (
-                    <span className="bg-accent px-1.5 py-0.5 font-mono text-[9px] tracking-[0.2em] text-ink uppercase">
+                    <span className="bg-accent px-1.5 py-0.5 font-mono text-[10px] tracking-[0.2em] text-ink uppercase">
                       Upcoming
                     </span>
                   )}
                   {awardFor(c.slug) && (
-                    <span className="bg-fg px-1.5 py-0.5 font-mono text-[9px] tracking-[0.2em] text-ink uppercase">
+                    <span className="bg-fg px-1.5 py-0.5 font-mono text-[10px] tracking-[0.2em] text-ink uppercase">
                       {awardFor(c.slug)!.body} {awardFor(c.slug)!.result}
                     </span>
                   )}
                   {c.network && (
-                    <span className="bg-black/70 px-1.5 py-0.5 font-mono text-[9px] tracking-[0.2em] text-fg uppercase backdrop-blur-sm">
+                    <span className="bg-black/70 px-1.5 py-0.5 font-mono text-[10px] tracking-[0.2em] text-fg uppercase backdrop-blur-sm">
                       {c.network}
                     </span>
                   )}

components/Footer.tsx

@@ -13,15 +13,15 @@ export default function Footer() {
             <p className="mt-1 font-mono text-xs tracking-widest text-muted uppercase">Est. {site.founded}</p>
           </div>
         </div>
-        <nav className="flex flex-col gap-2" aria-label="Footer">
+        <nav className="-my-3 flex flex-col" aria-label="Footer">
           {nav.map((item) => (
-            <Link key={item.href} href={item.href} className="text-sm text-muted hover:text-fg">
+            <Link key={item.href} href={item.href} className="py-3 text-sm text-muted hover:text-fg">
               {item.label}
             </Link>
           ))}
         </nav>
         <div className="flex flex-col gap-2 text-sm md:items-end">
-          <a href={`mailto:${site.email}`} className="hover:text-accent">
+          <a href={`mailto:${site.email}`} className="-my-3 py-3 break-all hover:text-accent">
             {site.email}
           </a>
           <span className="text-muted">{site.location}</span>

components/Header.tsx

@@ -27,7 +27,7 @@ export default function Header() {
       }`}
     >
       <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-5 md:h-20 md:px-8">
-        <Link href="/" className="flex items-center gap-3" onClick={() => setOpen(false)}>
+        <Link href="/" className="flex items-center gap-3 py-2" onClick={() => setOpen(false)}>
           <Fox className="h-7 w-7 text-fg md:h-8 md:w-8" />
           <span className="font-display text-sm font-light tracking-[0.22em] whitespace-nowrap uppercase md:text-lg md:tracking-[0.3em]">
             Two Tales <span className="text-accent">VFX</span>
@@ -39,7 +39,7 @@ export default function Header() {
             <Link
               key={item.href}
               href={item.href}
-              className="font-mono text-xs tracking-[0.2em] text-muted uppercase transition-colors hover:text-fg"
+              className="py-3 font-mono text-xs tracking-[0.2em] text-muted uppercase transition-colors hover:text-fg"
             >
               {item.label}
             </Link>

components/ProjectCard.tsx

@@ -6,14 +6,14 @@ export default function ProjectCard({ project }: { project: Project }) {
   return (
     <Link href={`/work/${project.slug}/`} className="group block">
       <Frame project={project} />
-      <div className="mt-5 flex items-start justify-between gap-6">
-        <div>
-          <h3 className="font-display text-2xl font-light tracking-wide uppercase transition-colors group-hover:text-accent md:text-3xl">
+      <div className="mt-5 flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-6">
+        <div className="min-w-0">
+          <h3 className="font-display text-2xl font-light tracking-wide break-words uppercase transition-colors group-hover:text-accent md:text-3xl">
             {project.title}
           </h3>
           <p className="mt-1 text-sm text-muted">{project.client}</p>
         </div>
-        <p className="max-w-[45%] pt-2 text-right font-mono text-[11px] tracking-widest text-muted uppercase">
+        <p className="font-mono sm:max-w-[45%] sm:pt-2 sm:text-right text-[11px] tracking-widest text-muted uppercase">
           {project.credits.slice(0, 2).join(" / ")}
         </p>
       </div>

content/site.ts

@@ -196,11 +196,11 @@ export const projects: Project[] = [
   {
     slug: "render-fish",
     title: "theRender.Fish",
-    client: "theRender.Fish",
+    client: "In-house",
     year: 2023,
     category: "3D Commercial",
     summary:
-      "A fully 3D animated promo for theRender.Fish, a CPU/GPU render farm for Blender. A sleep-deprived orca stares down a 92-day render and an impatient client, until faster renders land him on a tropical island. Character animation, environments, lighting and motion graphics, all in CG.",
+      "A fully 3D animated promo for theRender.Fish, the Blender render farm we built and ran in-house. A sleep-deprived orca stares down a 92-day render and an impatient client, until faster renders land him on a tropical island. Character animation, environments, lighting and motion graphics, all in CG.",
     image: "/work/render-fish/still-31.jpg",
     video: "/work/render-fish/render-fish.mp4",
     gallery: ["/work/render-fish/still-13.jpg", "/work/render-fish/still-5.jpg"],