diff --git a/components/my-cta.html b/components/my-cta.html
index 00c0d57..68e0bed 100644
--- a/components/my-cta.html
+++ b/components/my-cta.html
@@ -1,4 +1,4 @@
-<aside class="Box">
+<aside class="Box Prose">
   <h3 class="Cursive">Let’s work together...</h3>
   <p>
     Interested in working with me? <a href="/contact/">Send me an email</a> with your requirements.
diff --git a/components/my-layout.html b/components/my-layout.html
index 8b2397c..17a513a 100644
--- a/components/my-layout.html
+++ b/components/my-layout.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="Lightmode" dir="ltr" lang="en-GB">
+<html dir="ltr" lang="en-GB" data-theme="light">
 <head>
 <meta charset="utf-8">
 <meta name="robots" content="noai, noimageai">
@@ -14,8 +14,6 @@
 <meta name="apple-mobile-web-app-title" content="dbushell.com">
 <meta name="application-name" content="dbushell.com">
 <meta name="generator" content="https://github.com/dbushell/dbushell.com">
-<meta name="theme-color" content="#fffaf0" media="(prefers-color-scheme: light)">
-<meta name="theme-color" content="#4f4545" media="(prefers-color-scheme: dark)">
 <meta name="theme-color" content="#96e6c8">
 <link rel="alternate" type="application/rss+xml" title="dbushell.com RSS Feed" href="https://dbushell.com/rss.xml">
 <ssr-portal name="head" />
@@ -30,9 +28,7 @@
 -->
 %STYLES%
 </head>
-<body class="Body">
-<div class="App">
-  <ssr-slot />
-</div>
+<body>
+<ssr-slot />
 </body>
 </html>
diff --git a/components/rss-blog.html b/components/rss-blog.html
index c9c0ba2..b8b3672 100644
--- a/components/rss-blog.html
+++ b/components/rss-blog.html
@@ -1,4 +1,4 @@
-<aside class="Box">
+<aside class="Box Prose">
   <p>
     Subscribe to my <a href="/rss.xml" target="_blank">blog RSS feed</a> and
     <a href="/notes/rss.xml" target="_blank">microblog RSS feed</a>.
diff --git a/components/rss-notes.html b/components/rss-notes.html
index a40c2c9..6adf27d 100644
--- a/components/rss-notes.html
+++ b/components/rss-notes.html
@@ -1,4 +1,4 @@
-<div class="Box">
+<div class="Box Prose">
   <p>
     Subscribe to my <a href="/notes/rss.xml" target="_blank">microblog RSS feed</a> and
     <a href="/mastodon/" target="_blank">follow on Mastodon</a>.
diff --git a/public/assets/images/dbushell-logotype.svg b/public/assets/images/dbushell-logotype.svg
index f845f07..f224171 100644
--- a/public/assets/images/dbushell-logotype.svg
+++ b/public/assets/images/dbushell-logotype.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="544.77" height="216.89" viewBox="0 0 544.77 216.89">
   <defs>
-    <style data-hash="p0lVhHvjWu1bucdPJXr5SjN6e3hVy6Jv4paG9r+Nsbc=">
+    <style data-hash="3JLJnuPpu2Hf1q28HaSEirC4QVl4SFAuPAn9LzXYAsw=">
 :root {
   --logo-green: 86.59% 0.088 168.12;
   --logo-blue: 62.78% 0.117 226.03;
@@ -11,7 +11,7 @@
   --logo-outline: var(--masthead-secondary, var(--db-blue, var(--logo-blue)));
 }
 @media screen and (prefers-color-scheme: dark) {
-  .Darkmode {
+  :root[data-theme='dark'] {
     --logo-outline: var(--masthead-secondary, var(--db-green, var(--logo-green)));
   }
 }
diff --git a/public/assets/scripts/head.js b/public/assets/scripts/head.js
index a652499..9d3a215 100644
--- a/public/assets/scripts/head.js
+++ b/public/assets/scripts/head.js
@@ -19,22 +19,18 @@ fetch($logo.src).then(async (response) => {
 // Handle dark mode
 const $doc = document.documentElement;
 const $mode = document.querySelector(".Lightbulb");
-const list = $doc.classList;
 
-if (localStorage.getItem("darkmode") === "on") {
-  list.remove("Lightmode");
-  list.add("Darkmode");
+if (localStorage.getItem("theme") === "dark") {
+  $doc.dataset.theme = "dark";
 }
 
 $mode.addEventListener("click", () => {
-  if (list.contains("Lightmode")) {
-    list.remove("Lightmode");
-    list.add("Darkmode");
-    localStorage.setItem("darkmode", "on");
+  if ($doc.dataset.theme === "dark") {
+    $doc.dataset.theme = "light";
+    localStorage.setItem("theme", "light");
   } else {
-    list.remove("Darkmode");
-    list.add("Lightmode");
-    localStorage.setItem("darkmode", "off");
+    $doc.dataset.theme = "dark";
+    localStorage.setItem("theme", "dark");
   }
 });
 
diff --git a/src/css/_stylesheet.css b/src/css/_stylesheet.css
index b0f6ee5..9ec4093 100644
--- a/src/css/_stylesheet.css
+++ b/src/css/_stylesheet.css
@@ -1,9 +1,9 @@
 @layer base, components, modifiers;
 
 @import 'base/fonts.css' layer(base);
-@import 'base/props.css' layer(base);
+@import 'base/properties.css' layer(base);
 @import 'base/reset.css' layer(base);
-@import 'base/document.css' layer(base);
+@import 'base/body.css' layer(base);
 @import 'base/hidden.css' layer(base);
 @import 'base/typography.css' layer(base);
 @import 'base/code.css' layer(base);
@@ -36,4 +36,3 @@
 @import 'aside.css';
 @import 'main.css';
 @import 'layout.css';
-@import 'app.css';
diff --git a/src/css/app.css b/src/css/app.css
deleted file mode 100644
index 502f4e6..0000000
--- a/src/css/app.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.App {
-  container-name: app;
-  container-type: inline-size;
-  margin: 0 auto;
-  max-inline-size: var(--page-max);
-  overflow: hidden;
-  padding: 0 var(--page-margin);
-  position: relative;
-}
diff --git a/src/css/article.css b/src/css/article.css
index a2f5c75..7ba0bf7 100644
--- a/src/css/article.css
+++ b/src/css/article.css
@@ -1,8 +1,8 @@
 .Article {
-  margin: 0 0 calc((36 / 16) * 1rem) 0;
+  margin-block-end: var(--size-4);
 
   :where(.Box) + & {
-    margin-block-start: calc((36 / 16) * 1rem);
+    margin-block-start: var(--size-4);
   }
 
   &:last-child {
diff --git a/src/css/aside.css b/src/css/aside.css
index e4788ba..82ce482 100644
--- a/src/css/aside.css
+++ b/src/css/aside.css
@@ -1,14 +1,13 @@
 .Aside {
-  container-name: aside;
-  container-type: inline-size;
+  container: aside / inline-size;
   width: 100%;
 
   & > .Rule {
-    margin-block-end: calc((36 / 16) * 1rem);
+    margin-block-end: var(--size-4);
   }
 }
 
-@container app (inline-size >= calc((800 / 16) * 1rem)) {
+@container app (inline-size >= 50rem) {
   .Aside {
     & > .Rule {
       display: none;
diff --git a/src/css/base/document.css b/src/css/base/body.css
similarity index 60%
rename from src/css/base/document.css
rename to src/css/base/body.css
index a2354de..ab4ba7c 100644
--- a/src/css/base/document.css
+++ b/src/css/base/body.css
@@ -3,15 +3,26 @@
 } */
 
 :root {
-  --outline: calc((2 / 16) * 1rem) dashed oklch(var(--color-secondary));
   background: oklch(var(--color-background));
+  scrollbar-color: oklch(var(--color-primary)) oklch(var(--color-background));
+}
+
+body {
+  accent-color: var(--color-primary);
   color: oklch(var(--color-foreground));
   font-family: 'Raleway', sans-serif;
   font-synthesis: none;
-  font-weight: 400;
+  font-weight: 475;
   line-height: var(--line-height-1);
-  margin: 0;
-  padding: 0;
+}
+
+body {
+  container: app / inline-size;
+  margin-inline: auto;
+  max-inline-size: calc(1920 * var(--rem));
+  overflow: hidden;
+  padding-inline: var(--page-margin);
+  position: relative;
 }
 
 [class*='🖕'] {
@@ -19,7 +30,7 @@
 }
 
 @media screen {
-  .Lightmode {
+  :root[data-theme='light'] {
     --color-background: var(--db-light);
     --color-background2: var(--db-white);
     --color-foreground: var(--db-dark);
@@ -35,15 +46,15 @@
     --masthead-secondary: var(--db-blue);
   }
 
-  .Darkmode {
-    --color-background: var(--db-dark);
-    --color-background2: var(--db-black);
+  :root[data-theme='dark'] {
+    --color-background: var(--db-black);
+    --color-background2: var(--db-dark);
     --color-foreground: var(--db-light);
 
-    --color-primary: var(--db-yellow);
-    --color-primary2: var(--db-yellow);
-    --color-secondary: var(--db-green);
-    --color-secondary2: var(--db-green);
+    --color-primary: var(--db-green);
+    --color-primary2: var(--db-green);
+    --color-secondary: var(--db-pink);
+    --color-secondary2: var(--db-pink);
     --color-tertiary: var(--db-pink);
     --color-quaternary: var(--db-blue);
 
diff --git a/src/css/base/code.css b/src/css/base/code.css
index 2738ed1..d87ed62 100644
--- a/src/css/base/code.css
+++ b/src/css/base/code.css
@@ -1,28 +1,28 @@
 pre,
 code {
   font-family: 'Roboto Mono', monospace;
-  font-size: var(--step-s);
-  font-weight: 300;
+  font-size: var(--font-size-0);
+  font-weight: 400;
   -webkit-text-size-adjust: 100%;
 }
 
 :not(pre) > code {
   background: oklch(var(--color-background2));
-  border: calc((1 / 16) * 1rem) solid oklch(var(--color-quaternary));
+  border: var(--border-size-1) solid oklch(var(--color-quaternary));
   color: oklch(var(--color-secondary2));
   display: inline;
-  font-size: var(--step-s);
-  font-weight: 400;
+  font-size: var(--font-size-0);
+  font-weight: 450;
   line-height: 1;
-  padding: calc((2 / 16) * 1rem) calc((4 / 16) * 1rem);
+  padding: 2px 4px;
   text-decoration: none;
 }
 
 pre {
   --background-color: var(--db-dark);
   --background-alt: var(--db-midnight);
-  --block-padding: calc((12 / 16) * 1rem);
-  --inline-padding: calc((18 / 16) * 1rem);
+  --block-padding: 12px;
+  --inline-padding: var(--size-2);
   background: oklch(var(--background-color));
   color: oklch(var(--db-light));
   counter-reset: line-counter;
@@ -31,8 +31,8 @@ pre {
   -webkit-hyphens: none;
   hyphens: none;
   line-height: var(--line-height-2);
-  margin: calc((36 / 16) * 1rem) 0;
-  margin-inline-start: calc((-18 / 16) * 1rem);
+  margin-block: var(--size-4);
+  margin-inline-start: calc(-1 * var(--size-2));
   overflow: auto;
   overscroll-behavior-inline: contain;
   padding: var(--block-padding) var(--inline-padding);
@@ -52,13 +52,14 @@ pre {
       color: oklch(var(--db-yellow));
       display: block;
       font-family: 'Comic Neue', 'Raleway', sans-serif;
-      font-size: calc((12 / 16) * 1rem);
+      font-size: 12px;
       font-style: italic;
       inset-inline-start: 0;
       line-height: 1;
-      transform: translateX(var(--inline-padding)) translateY(calc(-1 * var(--block-padding)));
-      margin-block-end: calc((-24 / 16) * 1rem);
-      padding: calc((6 / 16) * 1rem);
+      transform: translateX(var(--inline-padding))
+        translateY(calc(-1 * var(--block-padding)));
+      margin-block-end: -24px;
+      padding: 6px;
       position: sticky;
       pointer-events: none;
       text-align: end;
@@ -77,7 +78,7 @@ pre {
 
       &:nth-child(2n + 1) {
         &::before {
-          border-inline: 1px solid transparent;
+          border-inline: var(--border-size-1) solid transparent;
           border-inline-start-color: currentColor;
         }
       }
@@ -112,7 +113,7 @@ pre {
           background: oklch(var(--background-alt) / 0.15);
           content: '';
           display: none;
-          inset: 0 calc((-18 / 16) * 1rem);
+          inset: 0 calc(-1 * var(--size-2));
           position: absolute;
           z-index: -1;
         }
@@ -122,8 +123,8 @@ pre {
           color: oklch(var(--db-yellow));
           display: inline-block;
           inline-size: 2ch;
-          margin-inline-end: calc((14 / 16) * 1rem);
-          margin-inline-start: calc((-6 / 16) * 1rem);
+          margin-inline-end: 14px;
+          margin-inline-start: -6px;
           text-align: end;
           user-select: none;
         }
@@ -147,14 +148,9 @@ pre {
       }
     }
   }
-
-  :where(.Darkmode) & {
-    --background-color: var(--db-midnight);
-    --background-alt: var(--db-dark);
-  }
 }
 
-@container app (inline-size < calc((400 / 16) * 1rem)) {
+@container app (inline-size < 25rem) {
   pre {
     --inline-padding: var(--page-margin);
     margin-inline-end: calc(-1 * var(--page-margin));
diff --git a/src/css/base/fonts.css b/src/css/base/fonts.css
index 9fa2f9c..67a9da4 100644
--- a/src/css/base/fonts.css
+++ b/src/css/base/fonts.css
@@ -10,7 +10,8 @@
 
 @font-face {
   font-family: 'Raleway';
-  src: url('/assets/fonts/raleway-variable.woff2?v=%DEPLOY_HASH%') format('woff2');
+  src: url('/assets/fonts/raleway-variable.woff2?v=%DEPLOY_HASH%')
+    format('woff2');
   font-display: swap;
   font-weight: 1 900;
   font-style: normal;
@@ -20,7 +21,8 @@
 
 @font-face {
   font-family: 'Raleway';
-  src: url('/assets/fonts/raleway-italic-variable.woff2?v=%DEPLOY_HASH%') format('woff2');
+  src: url('/assets/fonts/raleway-italic-variable.woff2?v=%DEPLOY_HASH%')
+    format('woff2');
   font-display: swap;
   font-weight: 1 900;
   font-style: italic;
@@ -30,7 +32,8 @@
 
 @font-face {
   font-family: 'Comic Neue';
-  src: url('/assets/fonts/comic-neue-bold-italic.woff2?v=%DEPLOY_HASH%') format('woff2');
+  src: url('/assets/fonts/comic-neue-bold-italic.woff2?v=%DEPLOY_HASH%')
+    format('woff2');
   font-display: swap;
   font-weight: 600;
   font-style: italic;
diff --git a/src/css/base/props.css b/src/css/base/properties.css
similarity index 56%
rename from src/css/base/props.css
rename to src/css/base/properties.css
index bc04342..98fa089 100644
--- a/src/css/base/props.css
+++ b/src/css/base/properties.css
@@ -1,40 +1,90 @@
-/* @link https://utopia.fyi/type/calculator?c=320,16,1.125,1920,19,1.333,5,0,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
+@property --body-size {
+  syntax: '<length>';
+  initial-value: 0px;
+  inherits: true;
+}
 
-:root {
-  --step-s: clamp(0.875rem, 0.85rem + 0.125vi, 1rem); /* 14-16 */
-  --step-0: clamp(1rem, 0.9625rem + 0.1875vi, 1.1875rem); /* 16-19 */
-  --step-1: clamp(1.125rem, 1.025rem + 0.5vi, 1.625rem); /* 18-26 */
-  --step-2: clamp(1.25rem, 1.1rem + 0.75vi, 2rem); /* 20-32 */
-  /* --step-3: clamp(1.375rem, 1.075rem + 1.5vi, 2.875rem); */ /* 22-46 */
-  /* --step-4: clamp(1.625rem, 1.2rem + 2.125vi, 3.75rem); */ /* 26-60 */
-  --step-5: clamp(1.75rem, 1.1rem + 3.25vi, 5rem); /* 28-80 */
+@property --font-size {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 16px;
+}
+
+@property --line-height {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 1.4;
+}
+
+body {
+  --body-size: 100cqi;
+  --rem: 0.0625rem;
+  /* --fluid: calc((var(--body-size) - 400px) / (1920 - 400)); */
+  --fluid: calc((var(--body-size) - (400 * var(--rem))) / (1920 - 400));
+
+  --font-size-0: clamp(
+    calc(14 * var(--rem)),
+    calc((14 * var(--rem)) + (16 - 14) * var(--fluid)),
+    calc(16 * var(--rem))
+  );
+  --font-size-1: clamp(
+    calc(17 * var(--rem)),
+    calc((17 * var(--rem)) + (19 - 17) * var(--fluid)),
+    calc(19 * var(--rem))
+  );
+  --font-size-2: clamp(
+    calc(19 * var(--rem)),
+    calc((19 * var(--rem)) + (26 - 19) * var(--fluid)),
+    calc(26 * var(--rem))
+  );
+  --font-size-3: clamp(
+    calc(21 * var(--rem)),
+    calc((21 * var(--rem)) + (32 - 21) * var(--fluid)),
+    calc(32 * var(--rem))
+  );
+  --font-size-4: clamp(
+    calc(31 * var(--rem)),
+    calc((31 * var(--rem)) + (80 - 31) * var(--fluid)),
+    calc(80 * var(--rem))
+  );
+
+  --size-0: 4.5px;
+  --size-1: 9px;
+  --size-2: 18px;
+  --size-3: 27px;
+  --size-4: 36px;
+
+  --border-size-1: 1px;
+  --border-size-2: 2px;
+
+  --radius-1: var(--size-0);
+  --radius-2: var(--size-1);
 
   --line-height-1: 1.6;
   --line-height-2: 1.5;
   --line-height-3: 1.4;
-}
 
-:root {
-  --page-max-inline: 1920;
-  --page-margin-mid: calc(((100 / 1920) * 100) * 1dvi);
-  --page-margin-min: calc((20 / 16) * 1rem);
-  --page-margin-max: calc((100 / 16) * 1rem);
-  --page-margin: clamp(var(--page-margin-min), var(--page-margin-mid), var(--page-margin-max));
-  --page-max: calc((var(--page-max-inline) / 16) * 1rem);
+  --page-margin: clamp(
+    calc(20 * var(--rem)),
+    calc((20 * var(--rem)) + (100 - 20) * var(--fluid)),
+    calc(100 * var(--rem))
+  );
+
+  --outline: var(--border-size-2) dashed oklch(var(--color-secondary));
 }
 
 :root {
-  --db-light: 98.62% 0.014 84.58; /* 40, 100%, 97%; /* 255, 250, 240; */
+  --db-light: 98.2% 0.014 85; /* 98.62% 0.014 84.58; /* 40, 100%, 97%; /* 255, 250, 240; */
   --db-dark: 40.05% 0.014 17.74; /* 0, 7%, 29%; /* 80, 70, 70; */
   --db-pink: 70.27% 0.192 13.7; /* 350, 100%, 69%; /* 255, 100, 125; */
   --db-red: 57.82% 0.19 16.36; /* 350, 63%, 52%; /* 210, 55, 80; */
   --db-green: 86.59% 0.088 168.12; /* 157, 61%, 75%; /* 150, 230, 200; */
   --db-blue: 62.78% 0.12 226; /* 194, 82%, 41%; /* 20, 150, 190; */
   --db-blue2: 52.78% 0.1 226; /* 194, 82%, 31%; /* 15, 110, 155; */
+  /* --db-blue3: 72.78% 0.12 226; */
   --db-yellow: 97.25% 0.0767 103; /* 55, 100%, 87%; /* 255, 250, 190; */
   --db-white: 100% 0 0; /* 0, 0%, 100%; /* 255, 255, 255; */
   --db-black: 31.55% 0.009 17.62; /* 0, 5%, 20%; /* 55, 50, 50; */
-  /* --db-midnight: 28.82% 0.022 277.51; */
   --db-midnight: 30.05% 0.014 17.74;
 }
 
diff --git a/src/css/base/reset.css b/src/css/base/reset.css
index 8770847..fd6a363 100644
--- a/src/css/base/reset.css
+++ b/src/css/base/reset.css
@@ -2,10 +2,23 @@
 *::after,
 *::before {
   box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
 html {
+  container: root / inline-size;
+  hanging-punctuation: first allow-end last;
   scroll-behavior: smooth;
+  scrollbar-gutter: stable;
+  text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-smoothing: antialiased;
+
+  &:where(.translated-rtl) {
+    direction: rtl;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -14,60 +27,70 @@ html {
   }
 }
 
-.translated-rtl {
-  direction: rtl;
-}
-
 body {
-  margin: 0;
-  padding: 0;
+  min-block-size: 100svb;
 }
 
-img,
-svg,
-video {
-  border: 0;
+:where(canvas, img, picture, svg, video) {
   block-size: auto;
+  border: none;
   display: block;
   max-inline-size: 100%;
 }
 
-button {
-  background: transparent;
+:where(button, input, progress, select, textarea) {
   appearance: none;
+  background: transparent;
   border: none;
-  outline: none;
+  color: currentColor;
+  font: inherit;
+  hanging-punctuation: none;
+  line-height: inherit;
+  text-align: start;
+  touch-action: manipulation;
+}
 
-  &:hover {
-    cursor: pointer;
-  }
+:where(button) {
+  cursor: pointer;
+  user-select: none;
 }
 
-b,
-strong {
-  font-weight: 600;
+:where(textarea) {
+  resize: vertical;
 }
 
-abbr {
+:where(b, strong) {
+  font-weight: 650;
+}
+
+:where(p, li, h1, h2, h3, h4, h5, h6) {
+  overflow-wrap: break-word;
+  text-wrap: pretty;
+}
+
+:where(abbr) {
   &[title] {
     border: none;
     text-decoration: none;
   }
 }
 
-small,
-figcaption {
-  font-size: var(--step-s);
+:where(cite) {
+  font-style: normal;
+}
+
+:where(small) {
+  font-size: inherit;
 }
 
-ul,
-ol {
+:where(ul, ol, li) {
   list-style: none;
-  margin: 0;
-  padding: 0;
 }
 
-li {
-  margin: 0;
-  padding: 0;
+:where(dialog, [popover]) {
+  background: transparent;
+  border: none;
+  color: currentColor;
+  margin: auto;
+  position: fixed;
 }
diff --git a/src/css/base/typography.css b/src/css/base/typography.css
index 3b42828..ee84324 100644
--- a/src/css/base/typography.css
+++ b/src/css/base/typography.css
@@ -7,21 +7,18 @@ a:where([href]) {
   text-decoration-skip-ink: all;
   text-decoration-color: oklch(var(--anchor-color) / var(--anchor-opacity));
   text-underline-offset: 0.15em;
-  transition: color 200ms, background 200ms, text-decoration-color 200ms, text-decoration 200ms;
+  transition: color 200ms, background 200ms, text-decoration-color 200ms,
+    text-decoration 200ms;
 
   &:hover {
     --anchor-color: var(--color-tertiary);
     --anchor-opacity: 0;
   }
 
-  &:focus {
+  &:focus-visible {
     --anchor-opacity: 0;
     outline: var(--outline);
-    outline-offset: calc((2 / 16) * 1rem);
-
-    &:not(:focus-visible) {
-      outline: none;
-    }
+    outline-offset: var(--border-size-2);
   }
 
   &:active {
@@ -54,8 +51,9 @@ a:where([href]) {
 }
 
 p {
-  font-size: var(--step-0);
-  margin: 0 0 calc((18 / 16) * 1rem) 0;
+  --font-size: var(--font-size-1);
+  font-size: var(--font-size);
+  margin-block-end: var(--size-2);
   max-inline-size: 70ch;
 
   &:last-child {
@@ -63,42 +61,51 @@ p {
   }
 
   & a {
-    font-weight: 500;
+    font-weight: 550;
   }
 
   &:has(small:only-child) {
-    font-size: var(--step-s);
+    --font-size: var(--font-size-0);
   }
 
   &:has(.Button:only-child) {
     &:not(:first-child) {
-      margin-block-start: calc((27 / 16) * 1rem);
+      margin-block-start: var(--size-3);
     }
+
     &:not(:last-child) {
-      margin-block: calc((27 / 16) * 1rem) 0;
+      margin-block: var(--size-3);
     }
   }
 }
 
+small {
+  font-size: inherit;
+}
+
+figcaption {
+  font-size: var(--font-size-0);
+}
+
 sup {
-  font-size: var(--step-s);
+  font-size: var(--font-size-0);
   line-height: 1;
   vertical-align: top;
 }
 
 blockquote {
   margin: 0;
-  margin-inline-start: calc((18 / 16) * 1rem);
-  padding-inline-start: calc((18 / 16) * 1rem);
-  border-inline-start: calc((1 / 16) * 1rem) solid oklch(var(--color-tertiary));
+  margin-inline-start: var(--size-2);
+  padding-inline-start: var(--size-2);
+  border-inline-start: var(--border-size-1) solid oklch(var(--color-tertiary));
 
   & :is(p, li) {
     font-style: italic;
   }
 
   & cite {
-    font-size: var(--step-s);
-    font-weight: 500;
+    font-size: var(--font-size-0);
+    font-weight: 550;
   }
 }
 
@@ -108,11 +115,13 @@ h3,
 h4,
 h5,
 h6 {
+  --font-size: var(--font-size-2);
+  --line-height: var(--line-height-2);
   color: oklch(var(--color-primary));
-  font-size: var(--step-1);
-  font-weight: 600;
-  line-height: var(--line-height-2);
-  margin: calc((27 / 16) * 1rem) 0 calc((18 / 16) * 1rem) 0;
+  font-size: var(--font-size);
+  font-weight: 650;
+  line-height: var(--line-height);
+  margin-block: var(--size-3) var(--size-2);
   position: relative;
 
   &:first-child {
@@ -125,43 +134,43 @@ h6 {
 }
 
 h1 {
-  font-size: var(--step-5);
-  line-height: 1;
-  margin: calc((18 / 16) * 1rem) 0;
+  --font-size: var(--font-size-4);
+  --line-height: 1;
+  margin-block: var(--size-2);
 }
 
-@container main (inline-size >= calc((400 / 16) * 1rem)) {
+@container main (inline-size >= 25rem) {
   h1 {
-    margin: calc((36 / 16) * 1rem) 0;
+    margin-block: var(--size-4);
   }
 
   h2,
   h3 {
-    margin-block-start: calc((36 / 16) * 1rem);
+    margin-block-start: var(--size-4);
   }
 }
 
 h2 {
-  font-size: var(--step-1);
+  --font-size: var(--font-size-2);
 
   :where(.Main) & {
-    font-size: var(--step-2);
-    line-height: var(--line-height-3);
+    --font-size: var(--font-size-3);
+    --line-height: var(--line-height-3);
   }
 }
 
 h3 {
-  font-size: var(--step-1);
+  --font-size: var(--font-size-2);
 }
 
 :is(h2, h3) {
   & .Cursive {
-    font-size: var(--step-0);
+    font-size: var(--font-size-1);
   }
 
   &.Cursive {
-    font-size: var(--step-1);
-    line-height: var(--line-height-2);
+    --font-size: var(--font-size-2);
+    --line-height: var(--line-height-2);
   }
 }
 
@@ -170,7 +179,7 @@ h3 {
 }
 
 .Large {
-  font-size: var(--step-1);
+  --font-size: var(--font-size-2);
 }
 
 .Comic {
@@ -189,7 +198,7 @@ h3 {
   font-family: 'Comic Neue', 'Raleway', sans-serif;
   font-style: italic;
   font-weight: 600;
-  letter-spacing: calc((-0.5 / 16) * 1rem);
+  letter-spacing: calc(-0.5 * var(--rem));
 
   &:has(svg) {
     align-items: center;
@@ -213,7 +222,7 @@ h3 {
 
 .Time {
   display: inline-block;
-  font-size: var(--step-0);
+  font-size: var(--font-size-1);
   vertical-align: top;
 
   & a {
diff --git a/src/css/bio.css b/src/css/bio.css
index 1ce6c90..1905fb3 100644
--- a/src/css/bio.css
+++ b/src/css/bio.css
@@ -1,22 +1,23 @@
 .Bio {
+  --size: calc(80 * var(--rem));
   display: flow-root;
 
   & figure,
   & img {
-    block-size: calc((80 / 16) * 1rem);
-    inline-size: calc((80 / 16) * 1rem);
+    block-size: var(--size);
+    inline-size: var(--size);
   }
 
   & figure {
-    flex: 0 0 calc((80 / 16) * 1rem);
+    flex: 0 0 var(--size);
     float: inline-end;
-    margin: 0 0 calc((9 / 16) * 1rem) 0;
-    margin-inline-start: calc((18 / 16) * 1rem);
+    margin-block-end: var(--size-1);
+    margin-inline-start: var(--size-2);
     shape-outside: circle(50%);
   }
 
   & img {
-    border: calc((2 / 16) * 1rem) solid oklch(var(--color-secondary));
+    border: var(--border-size-2) solid oklch(var(--color-secondary));
     border-radius: 100%;
   }
 }
diff --git a/src/css/box.css b/src/css/box.css
index 34b1fb4..493dbc2 100644
--- a/src/css/box.css
+++ b/src/css/box.css
@@ -1,12 +1,12 @@
 .Box {
   align-items: center;
   background: oklch(var(--color-background2));
-  border: calc((2 / 16) * 1rem) solid oklch(var(--color-quaternary));
-  border-radius: calc((9 / 16) * 1rem);
+  border: var(--border-size-2) solid oklch(var(--color-quaternary));
+  border-radius: var(--radius-2);
   display: grid;
-  gap: calc((18 / 16) * 1rem);
+  gap: var(--size-2);
   grid-template-columns: 1fr;
-  padding: calc((18 / 16) * 1rem);
+  padding: var(--size-2);
   position: relative;
 
   & > * {
@@ -15,8 +15,14 @@
   }
 }
 
-@container app (inline-size >= calc((400 / 16) * 1rem)) {
+@container app (inline-size < 37.5rem) {
   .Box {
-    margin-inline-start: calc((-20 / 16) * 1rem);
+    margin-inline: calc(-1 * var(--size-1));
+  }
+}
+
+@container app (inline-size >= 50rem) {
+  .Box {
+    margin-inline-start: calc(-1 * var(--size-2));
   }
 }
diff --git a/src/css/button.css b/src/css/button.css
index 4863ed7..ee524be 100644
--- a/src/css/button.css
+++ b/src/css/button.css
@@ -1,25 +1,22 @@
 .Button {
   --button-shadow: var(--color-quaternary);
-  appearance: none;
   background: oklch(var(--color-background2));
-  border: calc((2 / 16) * 1rem) solid oklch(var(--color-primary) / 0.5);
+  border: var(--border-size-2) solid oklch(var(--color-primary) / 0.5);
   border-top: 0;
   border-left: 0;
-  border-radius: calc((5 / 16) * 1rem);
-  box-shadow: calc((-1 / 16) * 1rem) calc((-1 / 16) * 1rem) 0 calc((1 / 16) * 1rem)
-      oklch(var(--button-shadow)),
-    calc((2 / 16) * 1rem) calc((2 / 16) * 1rem) 0 0 oklch(var(--db-black) / 0.1);
+  border-radius: var(--radius-1);
+  box-shadow: -1px -1px 0 1px oklch(var(--button-shadow)),
+    2px 2px 0 0 oklch(0% 0 0 / 0.1);
   color: oklch(var(--color-primary2));
   display: block;
-  font-size: var(--step-s);
-  font-weight: 600;
+  font-size: var(--font-size-0);
+  font-weight: 650;
   line-height: var(--line-height-2);
-  letter-spacing: calc((1 / 16) * 1rem);
+  letter-spacing: 1px;
   max-inline-size: max-content;
-  padding: calc((7 / 16) * 1rem) calc((16 / 16) * 1rem);
+  padding: 7px 16px;
   text-decoration: none;
   text-transform: uppercase;
-  touch-action: manipulation;
   transition: color 200ms, border 200ms, box-shadow 200ms;
   user-select: none;
 
@@ -32,7 +29,7 @@
 
   &:focus-visible {
     outline: var(--outline);
-    outline-offset: calc((4 / 16) * 1rem);
+    outline-offset: 4px;
   }
 
   &[disabled] {
diff --git a/src/css/card.css b/src/css/card.css
index b265d06..5e423e6 100644
--- a/src/css/card.css
+++ b/src/css/card.css
@@ -1,6 +1,6 @@
 .Card {
   display: block;
-  margin: 0 0 calc((36 / 16) * 1rem) 0;
+  margin-block-end: var(--size-4);
 
   &:last-child {
     margin-block-end: 0;
@@ -11,13 +11,13 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-    margin-block-end: calc((18 / 16) * 1rem);
+    margin-block-end: var(--size-2);
 
     & > * {
       margin: 0;
 
       &:first-child:not(:only-child) {
-        margin-inline-end: calc((18 / 16) * 1rem);
+        margin-inline-end: var(--size-2);
       }
     }
   }
diff --git a/src/css/checkbox.css b/src/css/checkbox.css
index f384103..bb99335 100644
--- a/src/css/checkbox.css
+++ b/src/css/checkbox.css
@@ -7,44 +7,42 @@
   & + span {
     cursor: pointer;
     display: inline-block;
-    padding-inline-start: calc((36 / 16) * 1rem);
+    padding-inline-start: var(--size-4);
     position: relative;
 
     &::after,
     &::before {
       background: oklch(var(--color-background2));
-      border: calc((2 / 16) * 1rem) solid oklch(var(--color-quaternary));
+      border: var(--border-size-2) solid oklch(var(--color-quaternary));
       border-top: 0;
       border-left: 0;
-      border-radius: calc((5 / 16) * 1rem);
-      box-shadow: calc((-1 / 16) * 1rem) calc((-1 / 16) * 1rem) 0 calc((1 / 16) * 1rem)
-          oklch(var(--color-primary) / 0.5),
-        calc((2 / 16) * 1rem) calc((2 / 16) * 1rem) 0 0 oklch(var(--db-black) / 0.1);
+      border-radius: var(--radius-1);
+      box-shadow: -1px -1px 0 1px oklch(var(--color-primary) / 0.5),
+        2px 2px 0 0 oklch(0% 0 0 / 0.1);
       content: '';
       cursor: pointer;
       display: block;
-      block-size: calc((20 / 16) * 1rem);
+      block-size: 20px;
       inset-block-start: 50%;
       inset-inline-start: 0;
       opacity: 1;
       position: absolute;
       transform: translateY(-50%);
-      inline-size: calc((20 / 16) * 1rem);
+      inline-size: 20px;
     }
 
     &::after {
       background: oklch(var(--color-primary));
-      mask: var(--check) calc((3 / 16) * 1rem) calc((4 / 16) * 1rem) / calc((12 / 16) * 1rem) auto
-        no-repeat;
+      mask: var(--check) 3px 4px / 12px auto no-repeat;
       box-shadow: none;
       opacity: 0;
       transition: opacity 100ms;
     }
   }
 
-  &:focus + span::before {
+  &:focus-visible + span::before {
     outline: var(--outline);
-    outline-offset: calc((4 / 16) * 1rem);
+    outline-offset: 4px;
   }
 
   &:checked + span {
diff --git a/src/css/crane.css b/src/css/crane.css
index b85d7fb..8718bda 100644
--- a/src/css/crane.css
+++ b/src/css/crane.css
@@ -1,9 +1,9 @@
 .Crane {
   align-items: center;
   display: grid;
-  grid-gap: calc((18 / 16) * 1rem);
+  grid-gap: var(--size-2);
   grid-template-columns: 100%;
-  margin-block-end: calc((36 / 16) * 1rem);
+  margin-block-end: var(--size-4);
 
   &:last-child {
     margin-block-end: 0;
@@ -14,13 +14,13 @@
     transform: translateX(-5%);
     inline-size: auto;
 
-    .Darkmode & {
-      filter: saturate(0.9) brightness(0.8) contrast(1.1) hue-rotate(35deg);
+    :where(:root[data-theme='dark']) & {
+      filter: saturate(1.1) brightness(1.1) contrast(1.1);
     }
   }
 }
 
-@container main (inline-size < calc((400 / 16) * 1rem)) {
+@container main (inline-size < 25rem) {
   .Crane {
     & img {
       max-inline-size: 50%;
@@ -36,14 +36,14 @@
   }
 }
 
-@container main (inline-size >= calc((400 / 16) * 1rem)) {
+@container main (inline-size >= 25rem) {
   .Crane {
     grid-template-columns: minmax(auto, 50%) auto;
   }
 }
 
-@container main (inline-size >= calc((600 / 16) * 1rem)) {
+@container main (inline-size >= 37.5rem) {
   .Crane {
-    grid-gap: calc((36 / 16) * 1rem);
+    grid-gap: var(--size-4);
   }
 }
diff --git a/src/css/featured.css b/src/css/featured.css
index 1d41ca4..079e222 100644
--- a/src/css/featured.css
+++ b/src/css/featured.css
@@ -1,8 +1,8 @@
 .Featured {
   display: grid;
-  grid-row-gap: calc((36 / 16) * 1rem);
+  grid-row-gap: var(--size-4);
   grid-template-columns: 1fr;
-  margin: 0 auto calc((36 / 16) * 1rem) auto;
+  margin: 0 auto var(--size-4) auto;
 
   &:last-child {
     margin-block-end: 0;
@@ -13,11 +13,11 @@
   }
 }
 
-@container aside (inline-size >= calc((560 / 16) * 1rem)) {
+@container aside (inline-size >= 35rem) {
   .Featured {
     display: grid;
-    grid-column-gap: calc((36 / 16) * 1rem);
-    grid-template-columns: 1.5fr calc((9 / 16) * 1rem) 1fr;
+    grid-column-gap: var(--size-4);
+    grid-template-columns: 1.5fr var(--size-1) 1fr;
 
     & .Bio {
       grid-column: 1 / 2;
@@ -36,7 +36,7 @@
       grid-column: 2 / 3;
       grid-row: 1 / 5;
       block-size: 100%;
-      inline-size: calc((1 / 16) * 1rem);
+      inline-size: var(--border-size-1);
     }
   }
 }
diff --git a/src/css/field.css b/src/css/field.css
index 5eed8fa..67465cc 100644
--- a/src/css/field.css
+++ b/src/css/field.css
@@ -1,34 +1,28 @@
 .Field {
   --field-shadow: oklch(var(--color-primary) / 0.5);
-  appearance: none;
   background: oklch(var(--color-background2));
-  border: calc((2 / 16) * 1rem) solid oklch(var(--color-quaternary));
+  border: var(--border-size-2) solid oklch(var(--color-quaternary));
   border-top: 0;
   border-left: 0;
-  border-radius: calc((5 / 16) * 1rem);
-  box-shadow: calc((-1 / 16) * 1rem) calc((-1 / 16) * 1rem) 0 calc((1 / 16) * 1rem)
-      var(--field-shadow),
-    calc((2 / 16) * 1rem) calc((2 / 16) * 1rem) 0 0 oklch(var(--db-black) / 0.1);
+  border-radius: var(--radius-1);
+  box-shadow: -1px -1px 0 1px var(--field-shadow),
+    2px 2px 0 0 oklch(0% 0 0 / 0.1);
   color: oklch(var(--color-foreground));
   display: block;
-  font-size: var(--step-s);
+  font-size: var(--font-size-0);
   font-family: 'Raleway', sans-serif;
+  font-weight: 550;
   line-height: var(--line-height-2);
-  outline: none;
-  padding: calc((7 / 16) * 1rem) calc((10 / 16) * 1rem);
+  padding: 7px 10px;
   transition: color 200ms, border-color 200ms, box-shadow 200ms;
   inline-size: 100%;
 
-  &:focus {
+  &:focus-visible {
     --field-shadow: oklch(var(--color-primary));
     border-color: oklch(var(--color-primary));
     color: oklch(var(--color-primary));
     outline: var(--outline);
-    outline-offset: calc((4 / 16) * 1rem);
-  }
-
-  &[rows] {
-    resize: vertical;
+    outline-offset: 4px;
   }
 
   &[disabled] {
diff --git a/src/css/footer.css b/src/css/footer.css
index 71545ac..646c5b3 100644
--- a/src/css/footer.css
+++ b/src/css/footer.css
@@ -1,8 +1,8 @@
 .Footer {
-  margin: calc((36 / 16) * 1rem) 0;
+  margin-block: var(--size-4);
 
   & small {
-    --padding: calc((4 / 16) * 1rem);
+    --padding: 4px;
     display: flex;
     flex-wrap: wrap;
     margin-inline-start: calc(-1 * var(--padding));
diff --git a/src/css/form.css b/src/css/form.css
index faaab5c..0d40909 100644
--- a/src/css/form.css
+++ b/src/css/form.css
@@ -1,13 +1,13 @@
 .Form {
   display: grid;
-  row-gap: calc((36 / 16) * 1rem);
+  row-gap: var(--size-4);
 
   & label {
     display: block;
-    font-size: var(--step-0);
+    font-size: var(--font-size-1);
 
     &:not(:last-child) {
-      margin-block-end: calc((9 / 16) * 1rem);
+      margin-block-end: var(--size-1);
     }
   }
 }
@@ -18,13 +18,13 @@
 
   & svg {
     fill: currentColor;
-    margin-inline-end: calc((9 / 16) * 1rem);
+    margin-inline-end: var(--size-1);
   }
 }
 
-@container main (inline-size >= calc((400 / 16) * 1rem)) {
+@container main (inline-size >= 25rem) {
   & .Form {
-    column-gap: calc((27 / 16) * 1rem);
+    column-gap: var(--size-3);
     grid-template-columns: 1fr 1fr;
 
     & li {
diff --git a/src/css/image.css b/src/css/image.css
index 255d40e..a348e59 100644
--- a/src/css/image.css
+++ b/src/css/image.css
@@ -1,6 +1,5 @@
 .Image {
   display: block;
-  margin: 0;
   max-inline-size: none;
 
   &[href] {
@@ -14,34 +13,25 @@
 
   & img,
   & video {
-    display: block;
     background-color: oklch(var(--db-black) / 0.2);
-    border-radius: calc((3 / 16) * 1rem);
-    border: calc((2 / 16) * 1rem) solid oklch(var(--color-background));
-    box-shadow: calc((-4 / 16) * 1rem) 0 0 calc((-2 / 16) * 1rem) oklch(var(--color-secondary)),
-      calc((4 / 16) * 1rem) calc((4 / 16) * 1rem) 0 0 oklch(var(--db-black) / 0.2);
+    border: var(--border-size-2) solid oklch(var(--color-background));
+    border-radius: var(--radius-2);
+    box-shadow: -4px 0 0 -2px oklch(var(--color-secondary)),
+      3px 3px 0 0 oklch(0% 0 0 / 0.15);
+    overflow: clip;
     position: relative;
   }
 
   & figcaption {
-    margin: calc((9 / 16) * 1rem) 0 0 0;
+    margin-block-start: var(--size-1);
   }
 }
 
 .Image--basic {
-  &[href] {
-    img {
-      border: calc((2 / 16) * 1rem) solid currentColor;
-      border-radius: calc((9 / 16) * 1rem);
-      box-sizing: content-box;
-      overflow: hidden;
-    }
-  }
-
   & img {
     background: transparent;
-    border-radius: 0;
     border: none;
+    border-radius: 0;
     box-shadow: none;
   }
 }
diff --git a/src/css/layout.css b/src/css/layout.css
index 5ec5808..0672d97 100644
--- a/src/css/layout.css
+++ b/src/css/layout.css
@@ -1,14 +1,14 @@
 .Layout {
   display: block;
-  margin: 0 auto;
+  margin-inline: auto;
 
   & .Masthead {
     inline-size: 100%;
-    margin: 0 calc(-0.5 * var(--page-margin)) calc((18 / 16) * 1rem) auto;
+    margin: 0 calc(-0.5 * var(--page-margin)) var(--size-2) auto;
   }
 }
 
-@container app (inline-size >= calc((400 / 16) * 1rem)) {
+@container app (inline-size >= 25rem) {
   .Layout {
     & .Masthead {
       inline-size: calc((1 / 1.25) * 100%);
@@ -16,7 +16,7 @@
   }
 }
 
-@container app (inline-size >= calc((600 / 16) * 1rem)) {
+@container app (inline-size >= 37.5rem) {
   .Layout {
     & .Masthead {
       inline-size: calc((1 / 1.618) * 100%);
@@ -24,7 +24,7 @@
   }
 }
 
-@container app (inline-size >= calc((800 / 16) * 1rem)) {
+@container app (inline-size >= 50rem) {
   .Layout {
     align-items: start;
     display: grid;
@@ -42,7 +42,7 @@
     & .Masthead {
       grid-column: 3 / 4;
       grid-row: 1;
-      margin-block-end: calc((36 / 16) * 1rem);
+      margin-block-end: var(--size-4);
       margin-left: calc(-0.5 * var(--page-margin));
       inline-size: auto;
     }
@@ -59,12 +59,12 @@
       grid-row: 1 / 3;
       margin-block-end: 0;
       max-inline-size: 100%;
-      padding-block-start: calc((100 / 16) * 1rem);
+      padding-block-start: 100px;
     }
   }
 }
 
-@container app (inline-size >= calc((1240 / 16) * 1rem)) {
+@container app (inline-size >= 80rem) {
   .Layout {
     grid-template-columns:
       auto var(--page-margin)
diff --git a/src/css/lightbulb.css b/src/css/lightbulb.css
index f05d33b..a8ba011 100644
--- a/src/css/lightbulb.css
+++ b/src/css/lightbulb.css
@@ -5,25 +5,25 @@
   display: none;
   block-size: auto;
   inset-inline-start: var(--page-margin);
-  padding: calc((9 / 16) * 1rem);
-  padding-block-start: calc((18 / 16) * 1rem);
+  padding: var(--size-1);
+  padding-block-start: var(--size-2);
   position: absolute;
   inset-block-start: 0;
-  transform: translateY(calc((-9 / 16) * 1rem));
+  transform: translateY(calc(-1 * var(--size-1)));
   transition: transform 100ms;
-  inline-size: calc((45 / 16) * 1rem);
+  inline-size: 45px;
   z-index: 10;
 
   &:before {
     background: var(--lightbulb-stroke);
-    bottom: calc(100% - ((19 / 16) * 1rem));
+    bottom: calc(100% - 19px);
     content: '';
     display: block;
-    block-size: calc((36 / 16) * 1rem);
+    block-size: var(--size-4);
     left: 50%;
     position: absolute;
     transform: translateX(-50%);
-    inline-size: calc((1 / 16) * 1rem);
+    inline-size: 1px;
   }
 
   &:hover {
@@ -33,24 +33,19 @@
     --lightbulb-rays: 0;
   }
 
-  &:focus {
+  &:focus-visible {
     outline: var(--outline);
   }
 
-  &:not(:focus-visible) {
-    outline: none;
-  }
-
   & path {
     transition: fill 100ms, opacity 100ms;
   }
 
-  .Darkmode & {
+  :where(:root[data-theme='dark']) & {
     --lightbulb-stroke: oklch(var(--db-green));
     --lightbulb-fill: transparent;
     --lightbulb-rays: 0;
 
-    &:focus,
     &:hover {
       --lightbulb-stroke: oklch(var(--db-yellow));
       --lightbulb-fill: oklch(var(--db-yellow) / 0.5);
@@ -65,8 +60,8 @@
   }
 }
 
-@container app (inline-size < calc((400 / 16) * 1rem)) {
+@container app (inline-size < 25rem) {
   .Lightbulb {
-    margin-inline-start: calc((-12 / 16) * 1rem);
+    margin-inline-start: -12px;
   }
 }
diff --git a/src/css/list.css b/src/css/list.css
index afdf8ca..7d06981 100644
--- a/src/css/list.css
+++ b/src/css/list.css
@@ -1,163 +1,156 @@
-@layer components {
-  .List,
-  .Prose :where(ul:not([class]), ol:not([class])) {
-    margin: calc((27 / 16) * 1rem) 0;
+/* @layer components { */
+.List,
+.Prose :where(ul:not([class]), ol:not([class])) {
+  margin: var(--size-3) 0;
+
+  & li {
+    font-size: var(--font-size-1);
+    margin-block-end: var(--size-1);
+    max-inline-size: 70ch;
+
+    &:last-child {
+      margin-block-end: 0;
+    }
+  }
 
-    & li {
-      font-size: var(--step-0);
-      margin-block-end: calc((9 / 16) * 1rem);
-      max-inline-size: 70ch;
+  & a {
+    font-weight: 550;
+  }
+}
 
-      &:last-child {
-        margin-block-end: 0;
-      }
+.Prose :where(ol:not([class])) {
+  counter-reset: ol-counter;
+
+  & > li {
+    &::before {
+      background: none;
+      content: counter(ol-counter) '.';
+      counter-increment: ol-counter;
+      color: oklch(var(--color-secondary));
+      display: inline-block;
+      font-family: 'Comic Neue', 'Raleway', sans-serif;
+      font-style: italic;
+      font-size: var(--font-size-1);
+      font-weight: 600;
+      margin-inline-start: calc(-1 * var(--size-4));
+      padding-inline-end: var(--size-1);
+      text-align: right;
+      inline-size: var(--size-4);
     }
 
-    & a {
-      font-weight: 500;
+    &:nth-child(1n + 10)::before {
+      font-size: 70%;
     }
   }
+}
 
+@container app (inline-size < 37.5rem) {
   .Prose :where(ol:not([class])) {
-    counter-reset: ol-counter;
-
     & > li {
       &::before {
-        background: none;
-        content: counter(ol-counter) '.';
-        counter-increment: ol-counter;
-        color: oklch(var(--color-secondary));
-        display: inline-block;
-        font-family: 'Comic Neue', 'Raleway', sans-serif;
-        font-style: italic;
-        font-size: var(--step-0);
-        font-weight: 600;
-        margin: 0 0 0 calc((-36 / 16) * 1rem);
-        padding-inline-end: calc((9 / 16) * 1rem);
-        text-align: right;
-        inline-size: calc((36 / 16) * 1rem);
-      }
-
-      &:nth-child(1n + 10)::before {
-        font-size: 70%;
-      }
-    }
-  }
-
-  @container app (inline-size < calc((800 / 16) * 1rem)) {
-    .Prose :where(ol:not([class])) {
-      & > li {
-        &::before {
-          font-size: var(--step-s);
-          margin-inline-start: calc((-27 / 16) * 1rem);
-          padding-inline-end: calc((5 / 16) * 1rem);
-          inline-size: calc((27 / 16) * 1rem);
-        }
+        font-size: var(--font-size-0);
+        margin-inline-start: calc(-1 * var(--size-1));
+        inline-size: var(--size-3);
       }
     }
   }
 }
+/* } */
 
-@layer modifiers {
-  .List--large {
-    &:not(:first-child) {
-      margin-block-start: calc((36 / 16) * 1rem);
-    }
-
-    &:not(:last-child) {
-      margin-block-end: calc((36 / 16) * 1rem);
-    }
-
-    & a {
-      --color-primary2: var(--color-primary);
-      font-weight: 600;
-    }
+/* @layer modifiers { */
+.List--large {
+  &:not(:first-child) {
+    margin-block-start: var(--size-4);
   }
 
-  .List--columns {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-column-gap: calc((36 / 16) * 1rem);
-    margin: calc((36 / 16) * 1rem) 0;
+  &:not(:last-child) {
+    margin-block-end: var(--size-4);
   }
 
-  .List--folio {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-column-gap: calc((18 / 16) * 1rem);
-    grid-row-gap: calc((18 / 16) * 1rem);
-    margin: calc((45 / 16) * 1rem) 0;
-    max-inline-size: calc(((320 + 320 + 18) / 16) * 1rem);
-
-    & li {
-      background: transparent !important;
-      margin: 0;
-      max-inline-size: max-content;
+  & a {
+    --color-primary2: var(--color-primary);
+    font-weight: 650;
+  }
+}
 
-      &::before {
-        display: none;
-      }
+.List--columns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-column-gap: var(--size-4);
+  margin-block: var(--size-4);
+}
 
-      &:nth-child(odd) img {
-        transform: scale(0.9) rotateY(-15deg) rotateX(2deg);
-      }
-      &:nth-child(even) img {
-        transform: scale(0.9) rotateY(15deg) rotateX(2deg);
-      }
+.List--folio {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-column-gap: var(--size-2);
+  grid-row-gap: var(--size-2);
+  margin-block: 45px;
+  max-inline-size: calc(((320 + 320 + 18) / 16) * 1rem);
+
+  & li {
+    background: transparent !important;
+    margin: 0;
+    padding: 0 !important;
+    max-inline-size: max-content;
+
+    &::before {
+      display: none;
     }
 
-    & a {
-      display: block;
-      perspective: 500px;
-      text-decoration: none;
-      background: none !important;
-
-      &:focus,
-      &:hover {
-        & img {
-          transform: translateZ(0);
-        }
-      }
+    &:nth-child(odd) img {
+      transform: scale(0.9) rotateY(-15deg) rotateX(2deg);
     }
-
-    & img {
-      backface-visibility: hidden;
-      background-color: oklch(var(--db-black) / 0.2);
-      border-radius: calc((9 / 16) * 1rem);
-      border: calc((2 / 16) * 1rem) solid oklch(var(--color-background));
-      box-shadow: calc((-4 / 16) * 1rem) 0 0 calc((-2 / 16) * 1rem) oklch(var(--color-secondary)),
-        calc((4 / 16) * 1rem) calc((4 / 16) * 1rem) 0 0 oklch(var(--db-black) / 0.2);
-      display: block;
-      transform-style: preserve-3d;
-      transform-origin: 50% 50%;
-      transition: transform 300ms;
+    &:nth-child(even) img {
+      transform: scale(0.9) rotateY(15deg) rotateX(2deg);
     }
   }
 
-  @container main (inline-size >= calc((600 / 16) * 1rem)) {
-    .List--large {
-      & li {
-        font-size: var(--step-1);
-        margin-block-end: calc((18 / 16) * 1rem);
+  & a {
+    display: block;
+    perspective: 500px;
+    text-decoration: none;
+    background: none !important;
+
+    &:hover {
+      & img {
+        transform: translateZ(0);
       }
     }
   }
 
-  @container main (inline-size >= calc((400 / 16) * 1rem)) {
-    .List--columns {
-      grid-template-columns: 1fr 1fr 1fr;
-    }
+  & img {
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
+    transform-origin: 50% 50%;
+    transition: transform 300ms;
+  }
+}
 
-    .List--folio {
-      grid-row-gap: calc((36 / 16) * 1rem);
-      grid-template-columns: 1fr 1fr 1fr;
-      max-inline-size: none;
+@container main (inline-size >= 37.5rem) {
+  .List--large {
+    & li {
+      font-size: var(--font-size-2);
+      margin-block-end: var(--size-2);
     }
   }
+}
 
-  @container app (inline-size < calc((800 / 16) * 1rem)) {
-    .List--columns {
-      grid-column-gap: calc((27 / 16) * 1rem);
-    }
+@container main (inline-size >= 25rem) {
+  .List--columns {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  .List--folio {
+    grid-row-gap: var(--size-4);
+    grid-template-columns: 1fr 1fr 1fr;
+    max-inline-size: none;
+  }
+}
+
+@container app (inline-size < 50rem) {
+  .List--columns {
+    grid-column-gap: var(--size-3);
   }
 }
+/* } */
diff --git a/src/css/main.css b/src/css/main.css
index 5425fef..c6a9f03 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -1,7 +1,6 @@
 .Main {
-  container-name: main;
-  container-type: inline-size;
-  margin: 0 auto calc((36 / 16) * 1rem) auto;
+  container: main / inline-size;
+  margin-block-end: var(--size-4);
   inline-size: 100%;
 
   &:last-child {
diff --git a/src/css/masthead.css b/src/css/masthead.css
index d6b3bf1..87fdbee 100644
--- a/src/css/masthead.css
+++ b/src/css/masthead.css
@@ -41,7 +41,7 @@
   }
 }
 
-@container app (inline-size < calc((400 / 16) * 1rem)) {
+@container app (inline-size < 25rem) {
   .Masthead {
     &::after {
       block-size: 150%;
diff --git a/src/css/nav.css b/src/css/nav.css
index 77848a0..81bb0bc 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -2,25 +2,24 @@
   & ul {
     display: flex;
     flex-wrap: wrap;
-    column-gap: calc((4.5 / 16) * 1rem);
-    margin: calc((-4.5 / 16) * 1rem);
+    column-gap: var(--size-0);
+    margin: calc(-1 * var(--size-0));
   }
 
   & li {
     flex: 0 0 auto;
-    margin: 0;
   }
 
   & a {
     align-items: center;
     display: flex;
-    font-size: var(--step-s);
-    font-weight: 700;
-    letter-spacing: calc((0.5 / 16) * 1rem);
+    font-size: var(--font-size-0);
+    font-weight: 750;
+    letter-spacing: calc(0.5 * var(--rem));
     min-block-size: 100%;
-    padding: calc((4.5 / 16) * 1rem);
+    padding: var(--size-0);
     text-transform: uppercase;
-    outline-offset: calc((-2.25 / 16) * 1rem);
+    outline-offset: -2px;
 
     &[aria-current='page'] {
       --anchor-color: var(--color-secondary2);
@@ -29,16 +28,16 @@
   }
 }
 
-@container main (inline-size < calc((400 / 16) * 1rem)) {
+@container main (inline-size < 25rem) {
   .Nav {
     max-inline-size: calc((300 / 16) * 1rem);
   }
 }
 
-@container app (inline-size >= calc((800 / 16) * 1rem)) {
+@container app (inline-size >= 50rem) {
   .Nav {
     & ul {
-      column-gap: calc((9 / 16) * 1rem);
+      column-gap: var(--size-1);
     }
   }
 }
diff --git a/src/css/note.css b/src/css/note.css
index 7361a54..48d8d98 100644
--- a/src/css/note.css
+++ b/src/css/note.css
@@ -1,16 +1,16 @@
 .Note {
   align-items: center;
-  border: calc((1 / 16) * 1rem) solid oklch(var(--color-quaternary));
-  border-radius: calc((9 / 16) * 1rem);
+  border: var(--border-size-1) solid oklch(var(--color-quaternary));
+  border-radius: var(--radius-2);
   display: grid;
-  gap: calc((18 / 16) * 1rem);
+  gap: var(--size-2);
   grid-template-columns: 1fr;
-  margin: calc((36 / 16) * 1rem) 0;
-  padding: calc((18 / 16) * 1rem);
+  margin-block: var(--size-4);
+  padding: var(--size-2);
   position: relative;
 
   & > footer {
-    margin-block-end: calc((-9 / 16) * 1rem);
+    margin-block-end: calc(-1 * var(--size-1));
     order: -1;
   }
 
@@ -20,7 +20,7 @@
   }
 
   & + & {
-    margin-block-start: calc((-18 / 16) * 1rem);
+    margin-block-start: calc(-1 * var(--size-2));
   }
 
   &:last-child {
@@ -31,7 +31,7 @@
     min-inline-size: 0;
 
     & > :is(ol, ul) {
-      padding-inline-start: calc((27 / 16) * 1rem);
+      padding-inline-start: var(--size-3);
     }
 
     & > :is(blockquote, pre) {
@@ -40,20 +40,18 @@
   }
 }
 
-@container app (inline-size < calc((800 / 16) * 1rem)) {
-  .Note .Prose > :is(ol, ul) {
-    padding-inline-start: calc((18 / 16) * 1rem);
+@container app (inline-size < 37.5rem) {
+  .Note {
+    margin-inline: calc(-1 * var(--size-1));
   }
-}
 
-@container app (inline-size <  calc((600 / 16) * 1rem)) {
   .Note .Prose > :is(ol, ul) {
     padding-inline-start: 0;
   }
 }
 
-@container app (inline-size >= calc((400 / 16) * 1rem)) {
+@container app (inline-size >= 50rem) {
   .Note {
-    margin-inline-start: calc((-20 / 16) * 1rem);
+    margin-inline-start: calc(-1 * var(--size-2));
   }
 }
diff --git a/src/css/pagination.css b/src/css/pagination.css
index 5550cb2..7ae2b18 100644
--- a/src/css/pagination.css
+++ b/src/css/pagination.css
@@ -8,16 +8,16 @@
 
     & svg {
       fill: currentColor;
-      block-size: calc((12 / 16) * 1rem);
+      block-size: 12px;
       stroke: currentColor;
-      inline-size: calc((12 / 16) * 1rem);
+      inline-size: 12px;
 
       &:first-child {
-        margin-inline: calc((-4 / 16) * 1rem) calc((6 / 16) * 1rem);
+        margin-inline: -4px 6px;
       }
 
       &:last-child {
-        margin-inline: calc((6 / 16) * 1rem) calc((-4 / 16) * 1rem);
+        margin-inline: 6px -4px;
       }
     }
   }
diff --git a/src/css/prose.css b/src/css/prose.css
index 8029393..d64d8bf 100644
--- a/src/css/prose.css
+++ b/src/css/prose.css
@@ -1,5 +1,5 @@
 .Prose {
-  margin: 0 0 calc((36 / 16) * 1rem) 0;
+  margin-block-end: var(--size-4);
 
   &:last-child {
     margin-block-end: 0;
@@ -16,22 +16,28 @@
   }
 
   :where(&) > :is(blockquote, iframe, hr, .Box, .Image) {
-    margin-block: calc((36 / 16) * 1rem);
+    margin-block: var(--size-4);
   }
 
-  :where(&) [href^='http']:where(:not(:has(img:only-child), [href*='/dbushell.com'])) {
+  :where(&)
+    [href^='http']:where(:not(:has(img:only-child), [href*='/dbushell.com'])) {
     position: relative;
-    padding-inline-start: 1.1rem;
+    padding-inline-start: var(--size-2);
   }
 
-  :where(&) [href^='http']:where(:not(:has(img:only-child), [href*='/dbushell.com']))::after {
+  :where(&)
+    [href^='http']:where(
+      :not(:has(img:only-child), [href*='/dbushell.com'])
+    )::after {
     aspect-ratio: 1 / 1;
     background: currentColor;
     content: '';
     display: block;
-    inline-size: 0.75rem;
-    inset-block-start: 0.3rem;
-    inset-inline-start: 0.1rem;
+    inline-size: 12px;
+    inset-block-start: calc(
+      ((var(--font-size) * var(--line-height)) / 2) - 7px
+    );
+    inset-inline-start: 2px;
     mask: var(--external) center center / 100% auto no-repeat;
     position: absolute;
   }
diff --git a/src/css/rule.css b/src/css/rule.css
index 372a1a9..bce743d 100644
--- a/src/css/rule.css
+++ b/src/css/rule.css
@@ -2,8 +2,7 @@
 :where(.Prose) > hr {
   background: oklch(var(--color-quaternary));
   border: none;
-  block-size: calc((1 / 16) * 1rem);
-  margin: 0;
+  block-size: var(--border-size-1);
   outline: none;
   inline-size: 100%;
 }
diff --git a/src/css/social.css b/src/css/social.css
index 63e9cee..f24d196 100644
--- a/src/css/social.css
+++ b/src/css/social.css
@@ -1,18 +1,19 @@
 .Social {
+  --social-size: calc(24 * var(--rem));
   --social-color: oklch(var(--color-background));
   align-items: center;
   display: flex;
-  margin-block-start: calc((18 / 16) * 1rem);
-  margin-inline-end: calc((-4.5 / 16) * 1rem);
+  margin-block-start: var(--size-2);
+  margin-inline-end: calc(-1 * var(--size-0));
 
   & svg {
-    border-radius: calc((5 / 16) * 1rem);
-    box-shadow: calc((1.5 / 16) * 1rem) calc((1.5 / 16) * 1rem) 0 0 oklch(var(--db-black) / 0.1);
+    border-radius: var(--radius-1);
+    box-shadow: 2px 2px 0 0 oklch(0% 0 0 / 0.1);
     fill: currentColor;
-    block-size: calc((24 / 16) * 1rem);
+    block-size: var(--social-size);
+    inline-size: var(--social-size);
     transform: var(--transform);
     transition: transform 150ms;
-    inline-size: auto;
   }
 
   & .Button {
@@ -22,7 +23,7 @@
 
   & a:not(.Button) {
     display: block;
-    padding: calc((4.5 / 16) * 1rem);
+    padding: var(--size-0);
     perspective: 50px;
     position: relative;
     text-decoration: none;
@@ -32,7 +33,7 @@
       --transform: scale(1.1);
     }
 
-    &:focus {
+    &:focus-visible {
       outline-offset: 0;
     }
   }
diff --git a/src/css/star.css b/src/css/star.css
index dfb8863..ae0e516 100644
--- a/src/css/star.css
+++ b/src/css/star.css
@@ -7,34 +7,23 @@
     content: '•';
     color: transparent;
     background: oklch(var(--color-secondary));
-    mask: var(--star) center center / calc((16 / 16) * 1rem) auto no-repeat;
-    inset-inline-start: calc((-36 / 16) * 1rem);
+    mask: var(--star) center center / 16px auto no-repeat;
+    inset-inline-start: calc(-1 * var(--size-4));
     position: absolute;
-    inline-size: calc((36 / 16) * 1rem);
+    inline-size: var(--size-4);
   }
 }
 
-@container app (inline-size < calc((800 / 16) * 1rem)) {
+@container app (inline-size < 37.5rem) {
   .Star,
   .List li,
   .Prose :where(ul:not([class*='List'], [class*='Form'])) li {
-    &::before {
-      mask-size: calc((12 / 16) * 1rem) auto;
-      inset-inline-start: calc((-27 / 16) * 1rem);
-      inline-size: calc((27 / 16) * 1rem);
-    }
-  }
-}
-
-@container app (inline-size < calc((600 / 16) * 1rem)) {
-  .Star,
-  .List li,
-  .Prose :where(ul:not([class*='List'], [class*='Form'])) li {
-    padding-inline-start: calc((16 / 16) * 1rem);
+    padding-inline-start: var(--size-2);
 
     &::before {
-      inset-inline-start: calc((-6 / 16) * 1rem);
-      inline-size: calc((12 / 16) * 1rem);
+      mask-size: 12px auto;
+      inset-inline-start: calc(-0.5 * var(--size-3));
+      inline-size: var(--size-3);
     }
   }
 }
diff --git a/src/data b/src/data
index 2a3d36d..cb254f6 160000
--- a/src/data
+++ b/src/data
@@ -1 +1 @@
-Subproject commit 2a3d36d3a3da4e457803af1c6c31c20c67015e7b
+Subproject commit cb254f62abc02b28dcdb7d528d7ed6568e8c8542
diff --git a/src/middleware.ts b/src/middleware.ts
index ff0111d..a8e672c 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -24,7 +24,7 @@ export const middleware: HyperHandle = ({ request, platform }) => {
     ["referrer-policy", "same-origin"],
     ["x-img-src", "data:"],
     // TODO - generate? - Hash for Logo inline styles
-    ["x-style-src", `'sha256-p0lVhHvjWu1bucdPJXr5SjN6e3hVy6Jv4paG9r+Nsbc='`],
+    ["x-style-src", `'sha256-3JLJnuPpu2Hf1q28HaSEirC4QVl4SFAuPAn9LzXYAsw='`],
   ];
 
   // Generated inline styles
