diff --git a/src/app/(frontend)/styles.css b/src/app/(frontend)/styles.css
index 9d20179..d255efd 100644
--- a/src/app/(frontend)/styles.css
+++ b/src/app/(frontend)/styles.css
@@ -1,167 +1,208 @@
 @import 'tailwindcss';
 @plugin '@tailwindcss/typography';
 
-:root {
-  --font-mono: 'Roboto Mono', monospace;
+/* -------------------------------------------------------------------------- */
+/* Theme tokens — maps CSS vars to Tailwind 4 utility classes                 */
+/* -------------------------------------------------------------------------- */
+@theme {
+  /* Colors */
+  --color-ink: rgb(var(--ink));
+  --color-ink-2: rgb(var(--ink-2));
+  --color-ink-3: rgb(var(--ink-3));
+  --color-ink-4: rgb(var(--ink-4));
+  --color-paper: rgb(var(--paper));
+  --color-paper-2: rgb(var(--paper-2));
+  --color-paper-3: rgb(var(--paper-3));
+
+  /* Font families */
+  --font-family-sans: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
+  --font-family-serif: 'DM Serif Display', 'DM Serif Text', ui-serif, Georgia, serif;
+  --font-family-mono: 'JetBrains Mono', ui-monospace, monospace;
+
+  /* Max widths */
+  --max-width-shell: 1280px;
+  --max-width-article: 1180px;
+
+  /* Letter spacing */
+  --letter-spacing-mono: 0.08em;
+  --letter-spacing-wider: 0.12em;
+  --letter-spacing-widest: 0.2em;
 }
 
-* {
-  box-sizing: border-box;
-}
-
-html {
-  font-size: 18px;
-  line-height: 32px;
-
-  background: rgb(0, 0, 0);
-  -webkit-font-smoothing: antialiased;
-}
-
-html,
-body,
-#app {
-  height: 100%;
-}
-
-body {
-  font-family: system-ui;
-  font-size: 18px;
-  line-height: 32px;
-
-  margin: 0;
-  color: rgb(1000, 1000, 1000);
-
-  @media (max-width: 1024px) {
-    font-size: 15px;
-    line-height: 24px;
+/* -------------------------------------------------------------------------- */
+/* Base — CSS custom properties and global resets                              */
+/* -------------------------------------------------------------------------- */
+@layer base {
+  :root {
+    --ink: 243 241 234;        /* #f3f1ea */
+    --ink-2: 201 197 183;      /* #c9c5b7 */
+    --ink-3: 138 133 118;      /* #8a8576 */
+    --ink-4: 90 86 72;         /* #5a5648 */
+    --paper: 20 19 17;         /* #141311 */
+    --paper-2: 27 26 23;       /* #1b1a17 */
+    --paper-3: 36 34 29;       /* #24221d */
+
+    --color-text-main: var(--ink);
+    --color-bg-main: var(--paper);
+    --color-bg-muted: var(--paper-2);
+    --color-border-main: var(--ink);
   }
-}
-
-img {
-  max-width: 100%;
-  height: auto;
-  display: block;
-}
 
-h1 {
-  margin: 40px 0;
-  font-size: 64px;
-  line-height: 70px;
-  font-weight: bold;
-
-  @media (max-width: 1024px) {
-    margin: 24px 0;
-    font-size: 42px;
-    line-height: 42px;
+  html {
+    color-scheme: dark;
+    background: rgb(var(--paper));
   }
 
-  @media (max-width: 768px) {
-    font-size: 38px;
-    line-height: 38px;
+  body {
+    font-family: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
   }
 
-  @media (max-width: 400px) {
-    font-size: 32px;
-    line-height: 32px;
+  * {
+    box-sizing: border-box;
   }
-}
 
-p {
-  margin: 24px 0;
-
-  @media (max-width: 1024px) {
-    margin: calc(var(--base) * 0.75) 0;
+  img {
+    max-width: 100%;
+    height: auto;
+    display: block;
   }
-}
-
-a {
-  color: currentColor;
 
-  &:focus {
-    opacity: 0.8;
-    outline: none;
+  ::selection {
+    background: rgb(var(--ink));
+    color: rgb(var(--paper));
   }
 
-  &:active {
-    opacity: 0.7;
-    outline: none;
+  :focus-visible {
+    outline: 2px solid rgb(var(--ink));
+    outline-offset: 2px;
+    border-radius: 2px;
   }
 }
 
-svg {
-  vertical-align: middle;
-}
-
-.home {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  height: 100vh;
-  padding: 45px;
-  max-width: 1024px;
-  margin: 0 auto;
-  overflow: hidden;
-
-  @media (max-width: 400px) {
-    padding: 24px;
-  }
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    flex-grow: 1;
-
-    h1 {
-      text-align: center;
-    }
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
   }
+}
 
-  .links {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-
-    a {
-      text-decoration: none;
-      padding: 0.25rem 0.5rem;
-      border-radius: 4px;
-    }
-
-    .admin {
-      color: rgb(0, 0, 0);
-      background: rgb(1000, 1000, 1000);
-      border: 1px solid rgb(0, 0, 0);
-    }
-
-    .docs {
-      color: rgb(1000, 1000, 1000);
-      background: rgb(0, 0, 0);
-      border: 1px solid rgb(1000, 1000, 1000);
-    }
-  }
+/* -------------------------------------------------------------------------- */
+/* Prose (article body) — editorial refined                                   */
+/* -------------------------------------------------------------------------- */
+.prose-editorial {
+  font-size: 18px;
+  line-height: 1.75;
+  color: rgb(230 228 219);
+  max-width: 68ch;
+}
 
-  .footer {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    @media (max-width: 1024px) {
-      flex-direction: column;
-      gap: 6px;
-    }
-
-    p {
-      margin: 0;
-    }
-
-    .codeLink {
-      text-decoration: none;
-      padding: 0 0.5rem;
-      background: rgb(60, 60, 60);
-      border-radius: 4px;
-    }
-  }
+/* Unified block rhythm — every block gets the same trailing gap so spacing
+   stays consistent whether neighbors are paragraphs, lists, or code blocks.
+   Margin collapsing handles overlap with the larger heading margins cleanly. */
+.prose-editorial :where(p, ul, ol, blockquote, figure, table) {
+  margin-block: 0 1.25em;
+}
+.prose-editorial :where(h2, h3, h4) {
+  margin-block: 2em 0.5em;
+}
+.prose-editorial pre,
+.prose-editorial hr {
+  margin-block: 1.75em;
+}
+.prose-editorial > :first-child { margin-block-start: 0; }
+.prose-editorial > :last-child { margin-block-end: 0; }
+
+/* Type treatments — size, font, color. Spacing handled above. */
+.prose-editorial h2 {
+  font-family: 'DM Serif Display', 'DM Serif Text', serif;
+  font-size: 34px;
+  line-height: 1.12;
+  font-weight: 400;
+  letter-spacing: -0.015em;
+}
+.prose-editorial h3 {
+  font-family: 'DM Serif Display', 'DM Serif Text', serif;
+  font-size: 24px;
+  line-height: 1.25;
+  font-weight: 400;
+  letter-spacing: -0.01em;
+}
+.prose-editorial h4 {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 11px;
+  line-height: 1.3;
+  text-transform: uppercase;
+  letter-spacing: 0.22em;
+  font-weight: 500;
+  color: rgb(var(--ink-3));
+  padding-bottom: 0.7em;
+  border-bottom: 1px solid rgba(243, 241, 234, 0.08);
+}
+.prose-editorial a {
+  color: rgb(var(--ink));
+  text-decoration: underline;
+  text-decoration-color: rgb(var(--ink-4));
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+}
+.prose-editorial a:hover { text-decoration-color: rgb(var(--ink)); }
+.prose-editorial blockquote {
+  font-family: 'DM Serif Display', 'DM Serif Text', serif;
+  font-style: italic;
+  font-size: 28px;
+  line-height: 1.32;
+  color: rgb(var(--ink));
+  padding-left: 28px;
+  border-left: 1px solid rgb(var(--ink-4));
+}
+.prose-editorial pre {
+  background: rgb(var(--paper-2));
+  border: 1px solid rgba(243, 241, 234, 0.10);
+  border-radius: 2px;
+  padding: 22px 24px;
+  overflow-x: auto;
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 13.5px;
+  line-height: 1.65;
+  color: rgb(var(--ink-2));
+}
+.prose-editorial code {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 0.88em;
+  color: rgb(var(--ink));
+}
+.prose-editorial pre code { color: inherit; background: transparent; padding: 0; }
+.prose-editorial :not(pre) > code {
+  background: rgb(var(--paper-2));
+  padding: 0.1em 0.4em;
+  border-radius: 2px;
+  border: 1px solid rgba(243, 241, 234, 0.10);
+}
+.prose-editorial ul,
+.prose-editorial ol { padding-left: 1.4em; }
+.prose-editorial ul { list-style: disc; }
+.prose-editorial ol { list-style: decimal; }
+.prose-editorial li::marker { color: rgb(var(--ink-4)); }
+.prose-editorial li + li { margin-top: 0.55em; }
+.prose-editorial strong { color: rgb(var(--ink)); font-weight: 600; }
+/* Repeating "label: description" items read as definition terms, not emphasis */
+.prose-editorial li > strong:first-child {
+  font-weight: 550;
+  color: rgb(var(--ink-2));
+  letter-spacing: 0.005em;
+}
+.prose-editorial img,
+.prose-editorial figure { max-width: 100%; }
+.prose-editorial table { width: 100%; }
+.prose-editorial hr {
+  border: 0;
+  border-top: 1px solid rgba(243, 241, 234, 0.10);
 }