diff --git a/template/assets/css/scientific-python.css b/template/assets/css/scientific-python.css
index 8edb5e5..f54078d 100644
--- a/template/assets/css/scientific-python.css
+++ b/template/assets/css/scientific-python.css
@@ -14,6 +14,20 @@ main {
    * doesn't grow <main> to push the footer offscreen.
    */
   min-height: 0;
+
+  /* Align main content with the navbar (2rem padding, max 1440px).
+   * text starts under the logo, and the page contents starts near the search box.
+   */
+  @media (min-width: 1024px) {
+    grid-template-columns:
+      [screen-start] calc(max(2rem, 50% - 720px) + 1.25rem)
+      [screen-inset-start page-start page-inset-start body-outset-start body-start body-inset-start middle-start gutter-left-start gutter-left-end gutter-right-start]
+      1fr
+      [gutter-right-end middle-end body-inset-end body-end body-outset-end]
+      20.5rem
+      [page-inset-end page-end screen-inset-end] max(2rem, 50% - 720px)
+      [screen-end];
+  }
 }
 
 .footer {
@@ -33,8 +47,9 @@ main {
 
   /* Outer content grid */
   & .outer-grid {
-    /* logo, project description, link columns, social icons */
-    grid-template-columns: 2fr 6fr 8fr 3fr;
+    /* logo, project description, link columns, social icons;
+     * all but the description are "auto" for better whitespace distribution */
+    grid-template-columns: auto 1fr auto auto;
     column-gap: 4rem;
     align-items: center;
     margin: 0rem 4rem;
@@ -44,10 +59,27 @@ main {
     }
   }
 
-  @media (max-width: 640px) {
+  /* Tighten spacing on mid-size screens to give the columns more room */
+  @media (max-width: 1279px) {
+    & .outer-grid {
+      column-gap: 2rem;
+      margin: 0;
+    }
+  }
+
+  /* Stack everything vertically below the theme's large breakpoint */
+  @media (max-width: 1023px) {
     & .outer-grid {
       grid-template-columns: 1fr;
-      justify-items: start;
+      justify-items: center;
+      text-align: center;
+    }
+
+    /* One centered, wrapping row of icons instead of a 2-column grid */
+    & .footer-icons {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
     }
   }
 
@@ -70,6 +102,12 @@ main {
     column-gap: 1.5rem;
     line-height: normal;
 
+    /* Two columns that hug the link text, so no dead space sits beside them
+     * (handles case where longest link in one col is much longer than in other col) */
+    @media (min-width: 1024px) {
+      grid-template-columns: repeat(2, max-content);
+    }
+
     & a {
       color: white;
       text-decoration-color: white;
@@ -89,6 +127,18 @@ main {
     column-gap: 3rem;
     row-gap: 1rem;
 
+    /* One row, or two rows if there are 5+ icons, with as many columns as
+     * the icons need (adapts to the number of icons, and keeps them from
+     * overflowing their column) */
+    @media (min-width: 1024px) {
+      grid-template-columns: none;
+      grid-auto-flow: column;
+
+      &:has(> :nth-child(5)) {
+        grid-template-rows: repeat(2, auto);
+      }
+    }
+
     & img {
       filter: invert(100%);
       margin-bottom: 0.1rem;
@@ -138,4 +188,10 @@ h4 {
 
 .copyright {
   font-size: smaller;
+
+  /* Don't widen the socials column to fit the copyright text; wrap to the icons' width
+   * instead (only when not stacked, so it can stay on one line on narrow screens) */
+  @media (min-width: 1024px) {
+    contain: inline-size;
+  }
 }