Add /set: on-set screen tracking markers for crews

- Unlinked, noindex page listing marker PNGs from public/set/markers
  (discovered at build time; filenames encode device/resolution/orientation)
- Detects the current screen and offers the closest match first
- One-tap full-screen viewer: wake lock, hidden controls, full grid/edges
  toggle, fill vs fit by aspect, back button closes, deep links via hash
- Offline service worker + home-screen manifest for iPhone full screen
- Marketing chrome moved into an (site) route group so /set has none

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

app/(site)/layout.tsx

@@ -0,0 +1,13 @@
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+
+// Marketing pages: header, footer and film grain. Tools like /set live outside this group.
+export default function SiteLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="grain flex min-h-dvh flex-col">
+      <Header />
+      <main className="flex-1">{children}</main>
+      <Footer />
+    </div>
+  );
+}

app/layout.tsx

@@ -1,7 +1,5 @@
 import type { Metadata, Viewport } from "next";
 import { Geist, Geist_Mono, Josefin_Sans } from "next/font/google";
-import Header from "@/components/Header";
-import Footer from "@/components/Footer";
 import { site } from "@/content/site";
 import "./globals.css";
 
@@ -40,11 +38,7 @@ export default function RootLayout({ children }: LayoutProps<"/">) {
       lang="en"
       className={`${geistSans.variable} ${geistMono.variable} ${josefin.variable} antialiased`}
     >
-      <body className="grain flex min-h-dvh flex-col font-sans">
-        <Header />
-        <main className="flex-1">{children}</main>
-        <Footer />
-      </body>
+      <body className="min-h-dvh font-sans">{children}</body>
     </html>
   );
 }

app/not-found.tsx

@@ -1,18 +1,30 @@
 import Link from "next/link";
+import Footer from "@/components/Footer";
 import Fox from "@/components/Fox";
+import Header from "@/components/Header";
 
 export default function NotFound() {
   return (
-    <div className="flex min-h-[80vh] flex-col items-center justify-center px-5 text-center">
-      <Fox className="h-16 w-16 text-white/20" />
-      <p className="mt-8 font-mono text-xs tracking-[0.3em] text-accent uppercase">Error 404 · Frame missing</p>
-      <h1 className="mt-4 font-display text-5xl font-thin uppercase md:text-7xl">Shot not found</h1>
-      <Link
-        href="/"
-        className="mt-10 border border-white/25 px-6 py-3.5 font-mono text-xs tracking-[0.2em] uppercase hover:border-fg"
-      >
-        Back to home
-      </Link>
+    <div className="grain flex min-h-dvh flex-col">
+      <Header />
+      <main className="flex-1">
+        <div className="flex min-h-[80vh] flex-col items-center justify-center px-5 text-center">
+          <Fox className="h-16 w-16 text-white/20" />
+          <p className="mt-8 font-mono text-xs tracking-[0.3em] text-accent uppercase">
+            Error 404 · Frame missing
+          </p>
+          <h1 className="mt-4 font-display text-5xl font-thin uppercase md:text-7xl">
+            Shot not found
+          </h1>
+          <Link
+            href="/"
+            className="mt-10 border border-white/25 px-6 py-3.5 font-mono text-xs tracking-[0.2em] uppercase hover:border-fg"
+          >
+            Back to home
+          </Link>
+        </div>
+      </main>
+      <Footer />
     </div>
   );
 }

app/set/page.tsx

@@ -0,0 +1,27 @@
+import type { Metadata, Viewport } from "next";
+import MarkerPicker from "@/components/set/MarkerPicker";
+import { loadMarkers } from "@/lib/markers";
+
+// On-set screen tracking markers. Deliberately not linked from the site,
+// kept out of search results and the sitemap.
+export const metadata: Metadata = {
+  title: "Screen markers",
+  description: "Two Tales VFX screen tracking markers for production crews.",
+  robots: { index: false, follow: false },
+  manifest: "/set/manifest.webmanifest",
+  appleWebApp: { capable: true, title: "Markers", statusBarStyle: "black-translucent" },
+};
+
+export const viewport: Viewport = {
+  themeColor: "#000000",
+  viewportFit: "cover",
+};
+
+export default function SetPage() {
+  const { screens, extras } = loadMarkers();
+  return (
+    <main className="min-h-dvh bg-ink">
+      <MarkerPicker screens={screens} extras={extras} />
+    </main>
+  );
+}