rework the site: gruvbox editorial default with a desktop-mode toggle; drop the terminal layout and phone desktop

src/app/layout.tsx

@@ -1,8 +1,30 @@
 import type { Metadata } from "next";
-// Removed unused google fonts since we use local Custom Mono
+import { Newsreader, IBM_Plex_Sans, IBM_Plex_Mono } from "next/font/google";
 import "./globals.css";
 import ThemeScript from "./components/ThemeScript";
 
+// Display serif for headlines, Plex for body/labels — same pairing as the
+// reference editorial site.
+const news = Newsreader({
+  variable: "--font-news",
+  subsets: ["latin"],
+  weight: ["400", "500", "600"],
+  style: ["normal", "italic"],
+  display: "swap",
+});
+const plex = IBM_Plex_Sans({
+  variable: "--font-plex",
+  subsets: ["latin"],
+  weight: ["400", "500", "600"],
+  display: "swap",
+});
+const plexMono = IBM_Plex_Mono({
+  variable: "--font-plexmono",
+  subsets: ["latin"],
+  weight: ["400", "500"],
+  display: "swap",
+});
+
 export const metadata: Metadata = {
   title: "dvorakmortonxd.dev",
   description: "Martin Dvořák's personal website.",
@@ -16,7 +38,7 @@ export const metadata: Metadata = {
     card: "summary_large_image",
     title: "dvorakmortonxd.dev",
     description: "Martin Dvořák's personal website.",
-  }
+  },
 };
 
 export default function RootLayout({
@@ -25,7 +47,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" data-theme="skeuo" suppressHydrationWarning>
+    <html
+      lang="en"
+      data-theme="gruvbox"
+      suppressHydrationWarning
+      className={`${news.variable} ${plex.variable} ${plexMono.variable}`}
+    >
       <body className="antialiased">
         <ThemeScript />
         {children}