Draw a platter around the home page layout

content/home.css

@@ -1,35 +1,19 @@
 :root {
-    --lt-blue: rgb(69, 212, 243);
-    --mid-blue: rgb(26, 169, 239);
-    --dk-blue: rgb(63, 46, 231);
-    --purple: rgb(161, 49, 232);
-    --lilac: rgb(187, 121, 245);
-
-    --font-size-min: 8px;
-    --font-size-max: 16px;
+    --animation-left-offset: 6px;
+    --animation-duration: 0.7s;
 }
 
-* { box-sizing: border-box; }
-
-a {
-    color: var(--mid-blue);
-    text-decoration: none;
-}
-a:hover {
-    text-decoration: underline;
-    text-underline-offset: 0.12em;
-}
-a:visited { color: none; }
-
 body {
     display: flex;
+    flex-direction: column;
     font-size: 2rem;
-    margin: auto;
     justify-content: center;
+    margin: auto;
 }
 
 h1 {
-    font-family: Krungthep, Museo_Slab, Tahoma, sans-serif;
+    font-size: 5rem;
+    line-height: 1.3;
     margin: 0;
     padding: 0;
 }
@@ -37,33 +21,24 @@ h1 {
     h1 { font-size: 4.25rem; }
 }
 
-html {
-    background-color: #fff;
-    color: #000;
-    font-family: Verdana, sans-serif;
-    font-size: clamp(var(--font-size-min), 2.5vw, var(--font-size-max));
-}
-@media (prefers-color-scheme: dark) {
-    html {
-        background-color: #000;
-        color: #fff;
-    }
+main {
+    margin-block-start: 10vh;
 }
 
-main {
+main .grid {
     align-items: baseline;
     display: grid;
-    grid-template-columns: min-content 3fr;
+    gap: 0 2rem;
+    grid-template-columns: min-content fit-content(35%);
     grid-template-rows: repeat(2, max-content);
     grid-template-areas:
         "title blurb"
         "title nav";
-    grid-gap: 2rem;
-    margin-block-start: 10vh;
-    max-width: 800px;
+    padding-inline: 1em;
+    width: min-content;
 }
 @media (max-width: 450px) {
-    main {
+    main .grid {
         grid-template-columns: 1fr;
         grid-template-rows: repeat(3, max-content);
         grid-template-areas:
@@ -76,16 +51,6 @@ main {
 }
 
 main h1 {
-    background:
-        radial-gradient(circle at 20% 70%, var(--purple), transparent 40%),
-        radial-gradient(circle at 30% 30%, var(--lt-blue), var(--mid-blue) 20%, transparent 80%),
-        radial-gradient(ellipse at 95% 20%, var(--dk-blue), var(--mid-blue) 70%, transparent 80%),
-        radial-gradient(circle at 100% 100%, var(--purple), var(--lilac) 100%),
-        radial-gradient(circle at 45% 100%, var(--lilac), var(--purple) 60%),
-        radial-gradient(ellipse at 50% 50%, var(--dk-blue), transparent 80%);
-    background-clip: text;
-    color: transparent;
-    grid-area: title;
     letter-spacing: 0.025em;
     text-align: end;
 }
@@ -94,41 +59,57 @@ main h1 {
 }
 
 main nav {
-    align-items: center;
-    display: flex;
-    font-size: max(1rem, 75%);
-    font-variant: small-caps;
-    grid-area: nav;
-    height: 100%;
-    justify-content: center;
-    letter-spacing: 0.12em;
-    list-style: none;
-    text-transform: lowercase;
-}
-
-main nav li {
-    display: block;
-    margin-inline-end: 0.5em;
-}
-
-main nav li:first-child::before {
-    content: "";
-}
-
-main nav li::before {
-    content: "•";
-    font-size: 60%;
-    opacity: 80%;
-    margin-inline-end: 0.5em;
+    align-items: baseline;
 }
 
 main p {
-    grid-area: blurb;
     margin: 0;
-    padding: 0;
 }
 
-p {
-    letter-spacing: 0.025em;
-    line-height: 1.25;
+#title { grid-area: title; }
+#content { grid-area: blurb }
+#nav { grid-area: nav }
+
+#title, #content, #nav { overflow: none; }
+#title > *, #content > *, #nav > * { position: relative; }
+
+#title > * {
+    animation: left-fade-in var(--animation-duration) ease-in-out;
+}
+#content > *, #nav > * {
+    animation: right-fade-in var(--animation-duration) ease-in-out;
+}
+
+@keyframes left-fade-in {
+    from {
+        opacity: 0%;
+        left: var(--animation-left-offset);
+    }
+    33% {
+        opacity: 0%;
+        left: var(--animation-left-offset);
+    }
+    to {
+        opacity: 100%;
+        left: 0;
+    }
+}
+
+@keyframes right-fade-in {
+    from {
+        opacity: 0%;
+        left: calc(-1 * var(--animation-left-offset));
+    }
+    33% {
+        opacity: 0%;
+        left: calc(-1 * var(--animation-left-offset));
+    }
+    to {
+        opacity: 100%;
+        left: 0;
+    }
+}
+
+.platter {
+    padding: 1.5rem 3rem;
 }