diff --git a/assets/styles/home.css b/assets/styles/home.css
deleted file mode 100644
index 6250a02..0000000
--- a/assets/styles/home.css
+++ /dev/null
@@ -1,166 +0,0 @@
-:root {
-    --animation-offset: 6px;
-    --font-size-max: 12px;
-}
-
-body {
-    display: flex;
-    flex-direction: column;
-    font-size: 2rem;
-    justify-content: center;
-    margin: auto;
-}
-
-h1 {
-    font-size: 5rem;
-    line-height: 1.3;
-    margin: 0;
-    padding: 0;
-}
-@media (max-width: 599px) {
-    h1 { font-size: 4.25rem; }
-}
-
-@media (max-width: 599px) {
-    html {
-        --font-size-scale-factor: 1.33vmax;
-    }
-}
-
-main {
-    margin-block-start: 10vh;
-    width: inherit;
-}
-
-main .grid {
-    align-items: baseline;
-    display: grid;
-    gap: 0 2rem;
-    grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 2fr);
-    grid-template-rows: repeat(2, max-content);
-    grid-template-areas:
-        "title blurb"
-        "title nav";
-    padding-inline: 1em;
-    width: min-content;
-}
-@media (max-width: 599px) {
-    main .grid {
-        gap: 1rem 0;
-        grid-template-columns: 1fr;
-        grid-template-rows: repeat(3, max-content);
-        grid-template-areas:
-            "title"
-            "blurb"
-            "nav";
-        justify-items: center;
-        text-align: center;
-    }
-}
-
-main h1 {
-    letter-spacing: 0.025em;
-    text-align: end;
-}
-@media (max-width: 599px) {
-    main h1 { text-align: center; }
-}
-
-nav {
-    align-items: baseline;
-    align-self: center;
-    display: flex;
-    list-style: none;
-    text-transform: lowercase;
-}
-
-p {
-    margin: 0;
-}
-
-h1 { grid-area: title; }
-#content { grid-area: blurb }
-nav { grid-area: nav }
-
-h1, #content > p, nav { position: relative; }
-
-h1 {
-    animation: left-fade-in var(--transition-duration) ease-in-out;
-}
-@media (max-width: 599px) {
-    h1 {
-        animation: top-fade-in var(--transition-duration) ease-in-out;
-    }
-}
-#content > p, nav {
-    animation: right-fade-in var(--transition-duration) ease-in-out;
-}
-@media (max-width: 599px) {
-    #content > p, nav {
-        animation: bottom-fade-in var(--transition-duration) ease-in-out;
-    }
-}
-
-@keyframes left-fade-in {
-    from {
-        opacity: 0%;
-        left: var(--animation-offset);
-    }
-    33% {
-        opacity: 0%;
-        left: var(--animation-offset);
-    }
-    to {
-        opacity: 100%;
-        left: 0;
-    }
-}
-
-@keyframes right-fade-in {
-    from {
-        opacity: 0%;
-        left: calc(-1 * var(--animation-offset));
-    }
-    33% {
-        opacity: 0%;
-        left: calc(-1 * var(--animation-offset));
-    }
-    to {
-        opacity: 100%;
-        left: 0;
-    }
-}
-
-@keyframes top-fade-in {
-    from {
-        opacity: 0%;
-        bottom: calc(-1 * var(--animation-offset));
-    }
-    33% {
-        opacity: 0%;
-        bottom: calc(-1 * var(--animation-offset));
-    }
-    to {
-        opacity: 100%;
-        bottom: 0;
-    }
-}
-
-@keyframes bottom-fade-in {
-    from {
-        opacity: 0%;
-        bottom: var(--animation-offset);
-    }
-    33% {
-        opacity: 0%;
-        bottom: var(--animation-offset);
-    }
-    to {
-        opacity: 100%;
-        bottom: 0;
-    }
-}
-
-.platter {
-    padding: 1.5rem 3rem;
-}
diff --git a/assets/styles/root/050_typography.css b/assets/styles/root/050_typography.css
index 3f14f30..0a0a7a2 100644
--- a/assets/styles/root/050_typography.css
+++ b/assets/styles/root/050_typography.css
@@ -23,7 +23,6 @@
         --heading-line-height: 1;
         /* A little extra line height so the descenders don't get clipped */
         --site-heading-line-height: 1.1;
-        --landing-line-height: 1.85;
 
         --color: rgba(var(--black), 0.8);
         --a-color: rgb(var(--mid-blue));
@@ -46,7 +45,6 @@
 
     body {
         font-size: var(--font-size);
-        line-height: var(--line-height);
     }
 
     code { font-family: var(--font-family-monospace); }
@@ -88,7 +86,7 @@
         line-height: var(--heading-line-height);
     }
 
-    header.site h1 {
+    h1.site {
         --site-title-color1: rgb(103, 128, 229);
         --site-title-color2: rgb(130, 90, 227);
         --site-title-color3: rgb(135, 101, 228);
@@ -102,27 +100,24 @@
 
         color: rgb(var(--mid-blue));
         font-family: var(--font-family-site-heading);
-        font-size: var(--site-header-font-size);
-        line-height: var(--site-heading-line-height);
-        white-space: nowrap;
     }
 
-    header.site h1 > a { color: inherit; }
+    h1.site > a { color: inherit; }
 
     @supports not ((background-clip: text) or (-webkit-background-clip: text)) {
-        header.site h1 span:nth-child(10n + 1) { color: var(--site-title-color1); }
-        header.site h1 span:nth-child(10n + 2) { color: var(--site-title-color2); }
-        header.site h1 span:nth-child(10n + 3) { color: var(--site-title-color3); }
-        header.site h1 span:nth-child(10n + 4) { color: var(--site-title-color4); }
-        header.site h1 span:nth-child(10n + 5) { color: var(--site-title-color5); }
-        header.site h1 span:nth-child(10n + 6) { color: var(--site-title-color6); }
-        header.site h1 span:nth-child(10n + 7) { color: var(--site-title-color7); }
-        header.site h1 span:nth-child(10n + 8) { color: var(--site-title-color8); }
-        header.site h1 span:nth-child(10n + 9) { color: var(--site-title-color9); }
-        header.site h1 span:nth-child(10n) { color: var(--site-title-color10); }
+        h1.site span:nth-child(10n + 1) { color: var(--site-title-color1); }
+        h1.site span:nth-child(10n + 2) { color: var(--site-title-color2); }
+        h1.site span:nth-child(10n + 3) { color: var(--site-title-color3); }
+        h1.site span:nth-child(10n + 4) { color: var(--site-title-color4); }
+        h1.site span:nth-child(10n + 5) { color: var(--site-title-color5); }
+        h1.site span:nth-child(10n + 6) { color: var(--site-title-color6); }
+        h1.site span:nth-child(10n + 7) { color: var(--site-title-color7); }
+        h1.site span:nth-child(10n + 8) { color: var(--site-title-color8); }
+        h1.site span:nth-child(10n + 9) { color: var(--site-title-color9); }
+        h1.site span:nth-child(10n) { color: var(--site-title-color10); }
     }
     @supports (background-clip: text) or (-webkit-background-clip: text) {
-        header.site h1 {
+        h1.site {
             background:
                 radial-gradient(circle at 20% 70%, rgb(var(--purple)), transparent 40%),
                 radial-gradient(circle at 30% 30%, rgb(var(--lt-blue)), rgb(var(--mid-blue)) 20%, transparent 80%),
@@ -136,6 +131,12 @@
         }
     }
 
+    header.site h1.site {
+        font-size: var(--site-header-font-size);
+        line-height: var(--site-heading-line-height);
+        white-space: nowrap;
+    }
+
     header.site nav {
         font-size: max(1.5rem, 80%);
         letter-spacing: 0.10em;
diff --git a/layouts/index.html b/layouts/index.html
index 7aa8810..d39322b 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,9 +1,221 @@
 {{ define "body" }}
 <main>
-  <div class="platter grid">
+  <header class="platter">
     <h1 class="site">{{ partial "site_name.html" .Title }}</h1>
     <div id="content">
       {{ .Content }}
     </div>
     {{ partial "site_nav.html" . }}
+  </header>
+</main>
+{{ end }}
+
+{{ define "styles" }}
+<style>
+  :root {
+    --animation-offset: 6px;
+    --font-size-max: 12px;
+    --line-height: 1.85;
+  }
+
+  body {
+    display: flex;
+    flex-direction: column;
+    font-size: 2rem;
+    justify-content: center;
+    margin: auto;
+  }
+
+  h1 {
+    font-size: 5rem;
+    line-height: 1.3;
+    margin: 0;
+    padding: 0;
+  }
+
+  @media (max-width: 599px) {
+    h1 {
+      font-size: 4.25rem;
+    }
+  }
+
+  header.site h1 { white-space: normal; }
+
+  @media (max-width: 599px) {
+    html {
+      --font-size-scale-factor: 1.33vmax;
+    }
+  }
+
+  main {
+    line-height: var(--landing-line-height);
+    margin-block-start: 10vh;
+    width: inherit;
+  }
+
+  main header {
+    align-items: first baseline;
+    display: grid;
+    gap: 0 2rem;
+    grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 2fr);
+    grid-template-rows: repeat(2, max-content);
+    grid-template-areas:
+      "title blurb"
+      "title nav";
+    padding-inline: 1em;
+    width: min-content;
+  }
+
+  @media (max-width: 599px) {
+    main header {
+      gap: 1rem 0;
+      grid-template-columns: 1fr;
+      grid-template-rows: repeat(3, max-content);
+      grid-template-areas:
+        "title"
+        "blurb"
+        "nav";
+      justify-items: center;
+      text-align: center;
+    }
+  }
+
+  main h1 {
+    letter-spacing: 0.025em;
+    text-align: end;
+  }
+
+  @media (max-width: 599px) {
+    main h1 {
+      text-align: center;
+    }
+  }
+
+  nav {
+    align-items: baseline;
+    align-self: center;
+    display: flex;
+    font-size: inherit;
+    list-style: none;
+    text-transform: lowercase;
+  }
+
+  p {
+    margin: 0;
+    line-height: var(--line-height);
+  }
+
+  h1 {
+    grid-area: title;
+  }
+
+  #content {
+    grid-area: blurb
+  }
+
+  nav {
+    grid-area: nav
+  }
+
+  h1,
+  #content>p,
+  nav {
+    position: relative;
+  }
+
+  h1 {
+    animation: left-fade-in var(--transition-duration) ease-in-out;
+  }
+
+  @media (max-width: 599px) {
+    h1 {
+      animation: top-fade-in var(--transition-duration) ease-in-out;
+    }
+  }
+
+  #content>p,
+  nav {
+    animation: right-fade-in var(--transition-duration) ease-in-out;
+  }
+
+  @media (max-width: 599px) {
+
+    #content>p,
+    nav {
+      animation: bottom-fade-in var(--transition-duration) ease-in-out;
+    }
+  }
+
+  @keyframes left-fade-in {
+    from {
+      opacity: 0%;
+      left: var(--animation-offset);
+    }
+
+    33% {
+      opacity: 0%;
+      left: var(--animation-offset);
+    }
+
+    to {
+      opacity: 100%;
+      left: 0;
+    }
+  }
+
+  @keyframes right-fade-in {
+    from {
+      opacity: 0%;
+      left: calc(-1 * var(--animation-offset));
+    }
+
+    33% {
+      opacity: 0%;
+      left: calc(-1 * var(--animation-offset));
+    }
+
+    to {
+      opacity: 100%;
+      left: 0;
+    }
+  }
+
+  @keyframes top-fade-in {
+    from {
+      opacity: 0%;
+      bottom: calc(-1 * var(--animation-offset));
+    }
+
+    33% {
+      opacity: 0%;
+      bottom: calc(-1 * var(--animation-offset));
+    }
+
+    to {
+      opacity: 100%;
+      bottom: 0;
+    }
+  }
+
+  @keyframes bottom-fade-in {
+    from {
+      opacity: 0%;
+      bottom: var(--animation-offset);
+    }
+
+    33% {
+      opacity: 0%;
+      bottom: var(--animation-offset);
+    }
+
+    to {
+      opacity: 100%;
+      bottom: 0;
+    }
+  }
+
+  .platter {
+    padding: 1.5rem 3rem;
+  }
+</style>
 {{ end }}