diff --git a/src/scss/base.scss b/src/scss/base.scss
index 8f78bab..b1f6601 100644
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@@ -37,11 +37,12 @@
   --font-family-headings: "Secular One", serif;
 
   --font-size: 18px;
-  --text-line-height: 1.5em;
+  --text-line-height: 1.5;
+  --link-inset-box-shadow: 1.5rem;
 
   --paragraph-margin: 1rem;
 
-  --textblock-max-width: 36rem;
+  --textblock-max-width: 34rem;
   --refimage-max-width: 50rem;
 
   --container-spacing-top-safe: max(1rem, env(safe-area-inset-top));
@@ -68,6 +69,9 @@
 
   --navigation-cutout: 0 0
     calc(var(--navigation-size) + env(safe-area-inset-bottom)) 0;
+  --navigation-cutout-bottom: calc(
+    var(--navigation-size) + env(safe-area-inset-bottom)
+  );
 
   --navigation-link-display-hover: none;
   --navigation-link-flex: 1 0 var(--navigation-size);
@@ -100,15 +104,15 @@
   --timeline-item-margin-odd: 0 0 0 calc(50% - var(--timeline-circle-size) / 2);
   --timeline-item-margin-even: 0 calc(50% - var(--timeline-circle-size) / 2) 0 0;
 
-  --table-max-width: 36rem;
   --table-border-radius: 1rem;
   --table-outer-spacing: 0 var(--container-spacing-right-safe) 0
     var(--container-spacing-left-safe);
-  --table-cell-padding: 0.375rem 0.375rem;
+  --table-cell-padding: 0.25rem 0.5rem;
 }
 
 /* semantic color variables for this project */
 :root {
+  --page-background-image: url(@/assets/layered-waves-light.svg);
   --color-background: var(--theme-c-antique-white);
 
   --color-border: var(--theme-c-crystal-blue);
@@ -119,8 +123,7 @@
   --color-link-text-hover: var(--theme-c-text-dark);
   --color-link-text-underline: var(--theme-c-text-light);
 
-  --color-header-bar: var(--theme-c-deep-oak-translucent);
-  --color-header-bar-title: var(--theme-c-text-dark);
+  --color-footer-background: var(--theme-c-desert-sand);
 
   --color-navigation-toggle: var(--theme-c-antique-white);
   --color-navigation-background: var(--theme-c-walnut-brown);
@@ -142,6 +145,7 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
+    --page-background-image: url(@/assets/layered-waves-dark.svg);
     --color-background: var(--theme-c-dark-grey-blue);
 
     --color-border: var(--theme-c-desert-sand);
@@ -152,6 +156,8 @@
     --color-link-text-hover: var(--theme-c-text-light);
     --color-link-text-underline: var(--theme-c-text-dark);
 
+    --color-footer-background: var(--theme-c-deep-oak);
+
     --table-row-background-hover: var(--theme-c-walnut-brown);
     --table-heading-background: var(--theme-c-deep-oak);
     --table-heading-text-color: var(--theme-c-text-dark);
@@ -165,9 +171,15 @@
   }
 }
 
+@media (min-width: 35em) {
+  :root {
+    --table-cell-padding: 0.5rem 1rem;
+    --font-size: 20px;
+  }
+}
+
 @media (min-width: 50em) {
   :root {
-    --font-size: 20px;
     --color-table-color-cell-width: 10rem;
     --textblock-padding: 0 var(--container-spacing-right-safe) 0
       var(--container-spacing-left-safe);
@@ -205,13 +217,18 @@
 
 @media (min-width: 64em) {
   :root {
-    --font-size: 24px;
     --timeline-stroke-length: calc(100% - var(--timeline-circle-size));
   }
 }
 
-@media (min-width: 125em) {
+@media (min-width: 80em) {
   :root {
     --font-size: 24px;
   }
 }
+
+@media (min-width: 120em) {
+  :root {
+    --font-size: 28px;
+  }
+}
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 0b28065..5f1aecf 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -32,13 +32,31 @@ body {
 }
 
 main {
-  margin: var(--navigation-cutout);
   transition: 0.4s;
+
+  &:after {
+    display: block;
+
+    content: "";
+    position: sticky;
+    right: 0;
+    bottom: var(--navigation-cutout-bottom);
+    left: 0;
+
+    height: 13rem;
+
+    background: var(--page-background-image);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center bottom;
+
+    z-index: -1;
+  }
 }
 
 section {
   max-width: var(--textblock-max-width);
-  margin: auto;
+  margin: 0 auto;
   padding: var(--textblock-padding);
 
   p {
@@ -71,19 +89,20 @@ a {
   color: var(--color-link-text);
   transition: 0.4s;
 
-  box-shadow: inset 0 calc(var(--text-line-height) * -0.125) 0 0 var(--color-link-text-underline);
+  box-shadow: inset 0 calc(var(--link-inset-box-shadow) * -0.125) 0 0
+    var(--color-link-text-underline);
 
   &:hover {
     color: var(--color-link-text-hover);
-    box-shadow: inset 0 calc(var(--text-line-height) * -1) 0 0 var(--color-link-text-underline);
+    box-shadow: inset 0 calc(var(--link-inset-box-shadow) * -1) 0 0
+      var(--color-link-text-underline);
   }
 }
 
 table {
-  border-collapse: separate;
   border-spacing: 0;
   width: 100%;
-  max-width: var(--table-max-width);
+  max-width: 34rem;
   margin: 2rem auto;
   padding: var(--table-outer-spacing);