Assisted-by: Claude Opus 4.6 via pi

diff --git a/lib/views/layout.rb b/lib/views/layout.rb
new file mode 100644
index 0000000..417adc9
--- /dev/null
+++ b/lib/views/layout.rb
@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+require "phlex"
+
+module Views
+  class Layout < Phlex::HTML
+    def initialize(title: "Ketchup")
+      @title = title
+    end
+
+    def view_template(&)
+      doctype
+      html(lang: "en") do
+        head do
+          meta(charset: "utf-8")
+          meta(name: "viewport", content: "width=device-width, initial-scale=1")
+          title { @title }
+          style { raw(safe(css)) }
+        end
+        body(&)
+      end
+    end
+
+    private
+
+    def css
+      <<~CSS
+        /* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+        :root {
+          --step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
+          --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
+          --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
+          --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
+          --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
+          --step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
+          --step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
+          --step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
+        }
+
+        /* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+        :root {
+          --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
+          --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
+          --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
+          --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
+          --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
+          --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
+          --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
+          --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
+          --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
+
+          /* One-up pairs */
+          --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
+          --space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
+          --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
+          --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
+          --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
+          --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
+          --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
+          --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);
+
+          /* Custom pairs */
+          --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
+        }
+
+        /* @link https://utopia.fyi/grid/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+        :root {
+          --grid-max-width: 77.50rem;
+          --grid-gutter: var(--space-s-l, clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem));
+          --grid-columns: 12;
+        }
+
+        .u-container {
+          max-width: var(--grid-max-width);
+          padding-inline: var(--grid-gutter);
+          margin-inline: auto;
+        }
+
+        .u-grid {
+          display: grid;
+          gap: var(--grid-gutter);
+        }
+
+        /* @link https://utopia.fyi/clamp/calculator?a=360,1240,16—48 */
+        :root {
+          --fluid-16-48: clamp(1rem, 0.1818rem + 3.6364vw, 3rem);
+        }
+      CSS
+    end
+  end
+end
diff --git a/lib/views/series/new.rb b/lib/views/series/new.rb
index a1c4e98..258dd63 100644
--- a/lib/views/series/new.rb
+++ b/lib/views/series/new.rb
@@ -2,17 +2,21 @@
 
 require "phlex"
 
+require_relative "../layout"
+
 module Views
   module Series
     class New < Phlex::HTML
       def view_template
-        h1 { "New Series" }
+        render Layout.new(title: "New Series — Ketchup") do
+          h1 { "New Series" }
 
-        form(method: "post", action: "/series") do
-          label(for: "name") { "Name" }
-          input(type: "text", id: "name", name: "name", required: true)
+          form(method: "post", action: "/series") do
+            label(for: "name") { "Name" }
+            input(type: "text", id: "name", name: "name", required: true)
 
-          button(type: "submit") { "Create" }
+            button(type: "submit") { "Create" }
+          end
         end
       end
     end