feat(portfolio): rebuild w-make.com as a bilingual editorial studio

Give clients a real IA, SMTP contact to eldov@w-make.de, and live Batch
evidence instead of a single-page placeholder.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/app/globals.css

@@ -1,45 +1,109 @@
 @import "tailwindcss";
 
 :root {
-  /* Tech Style Dark Theme by Default */
-  --background: #020617; /* Slate 950 */
-  --foreground: #f8fafc; /* Slate 50 */
-
-  /* Primary Action Colors (Electric Blue / Cyan) */
-  --primary: #0ea5e9;
-  --primary-foreground: #ffffff;
-
-  /* Metallic / Professional Accents */
-  --accent: #334155; /* Slate 700 */
-  --accent-foreground: #f8fafc;
-
-  --border: #1e293b; /* Slate 800 */
+  --ink: #12100e;
+  --ink-raised: #1b1814;
+  --paper: #f4efe4;
+  --paper-dim: #e4dccb;
+  --copper: #c9843a;
+  --copper-deep: #a86b2a;
+  --mute: #9a9184;
+  --mute-strong: #c9c1b3;
+  --line: rgba(244, 239, 228, 0.12);
+  --line-strong: rgba(244, 239, 228, 0.22);
 }
 
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-border: var(--border);
-
+  --color-ink: var(--ink);
+  --color-ink-raised: var(--ink-raised);
+  --color-paper: var(--paper);
+  --color-paper-dim: var(--paper-dim);
+  --color-copper: var(--copper);
+  --color-copper-deep: var(--copper-deep);
+  --color-mute: var(--mute);
+  --color-mute-strong: var(--mute-strong);
+  --color-line: var(--line);
   --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
+  --font-serif: var(--font-newsreader), "Iowan Old Style", "Palatino Linotype", serif;
   --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
 }
 
-body {
-  background-color: var(--background);
-  color: var(--foreground);
-  font-family: var(--font-sans);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+html {
+  scroll-behavior: smooth;
 }
 
-/* Subtle Grid Background for that "Tech" feel */
-.bg-grid-pattern {
-  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
-                    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
-  background-size: 40px 40px;
+body {
+  background: var(--ink);
+  color: var(--paper);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+::selection {
+  background: rgba(201, 132, 58, 0.35);
+  color: var(--paper);
+}
+
+.site-shell {
+  position: relative;
+  isolation: isolate;
+  min-height: 100vh;
+}
+
+.site-shell::before {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(1200px 500px at 10% -10%, rgba(201, 132, 58, 0.08), transparent 55%),
+    linear-gradient(180deg, rgba(244, 239, 228, 0.03), transparent 28%);
+  z-index: -2;
+}
+
+.site-shell::after {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
+  opacity: 0.035;
+  z-index: -1;
+}
+
+.rule {
+  height: 1px;
+  background: var(--line);
+}
+
+.kicker {
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--copper);
+}
+
+.display {
+  font-family: var(--font-serif);
+  font-weight: 450;
+  letter-spacing: -0.035em;
+  line-height: 0.96;
+}
+
+.link-quiet {
+  color: var(--mute-strong);
+  transition: color 160ms ease;
+}
+
+.link-quiet:hover {
+  color: var(--paper);
+}
+
+.honeypot {
+  position: absolute;
+  left: -9999px;
+  height: 0;
+  overflow: hidden;
 }