diff --git a/web/app.js b/web/app.js
index 0df3c08..f301ea1 100644
--- a/web/app.js
+++ b/web/app.js
@@ -2132,8 +2132,8 @@ function renderCommitTypes() {
     for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
     return node;
   };
-  const W = 1000;
-  const H = 280;
+  const W = 560;
+  const H = 300;
   const margin = { left: 54, right: 14, top: 14, bottom: 30 };
   const plotW = W - margin.left - margin.right;
   const plotH = H - margin.top - margin.bottom;
@@ -2696,10 +2696,10 @@ function renderLandGap() {
     `author date → commit date, log scale · tangled changes by the day written, ${seriesLabel()}`;
   $("gap-stats").replaceChildren();
   if (gaps.length === 0) {
-    svg.setAttribute("viewBox", "0 0 1000 340");
+    svg.setAttribute("viewBox", "0 0 560 360");
     const empty = document.createElementNS("http://www.w3.org/2000/svg", "text");
-    empty.setAttribute("x", "500");
-    empty.setAttribute("y", "170");
+    empty.setAttribute("x", "280");
+    empty.setAttribute("y", "180");
     empty.setAttribute("text-anchor", "middle");
     empty.setAttribute("class", "chart-tick");
     empty.textContent = "No changes written in this period.";
@@ -2723,8 +2723,8 @@ function renderLandGap() {
     for (const [key, value] of Object.entries(attrs)) node.setAttribute(key, String(value));
     return node;
   };
-  const W = 1000;
-  const H = 340;
+  const W = 560;
+  const H = 360;
   const margin = { left: 52, right: 16, top: 34, bottom: 30 };
   const plotW = W - margin.left - margin.right;
   const plotH = H - margin.top - margin.bottom;
diff --git a/web/index.html b/web/index.html
index 16f3c7f..4961ea3 100644
--- a/web/index.html
+++ b/web/index.html
@@ -160,36 +160,26 @@
         </section>
       </div>
 
-      <section class="hero" aria-labelledby="share-label">
-        <div class="share-card">
-          <div class="share-head">
-            <p class="label" id="share-label">tangled</p>
-            <div class="share-periods period-picker" id="share-periods" role="group" aria-label="Period">
-              <button type="button" data-period="30d">30d</button>
-              <button type="button" data-period="90d">90d</button>
-              <button type="button" data-period="1y">1y</button>
-              <button type="button" data-period="all">all</button>
-            </div>
-          </div>
-          <p class="share-value" id="share-value">—</p>
-          <div class="meter" id="share-meter" role="img" aria-labelledby="share-label share-sub">
-            <div class="meter-track"></div>
-            <div class="meter-fill" id="share-fill"></div>
+      <section class="card chart-card timelines-card" aria-labelledby="timelines-title" hidden>
+        <div class="card-head">
+          <div>
+            <h2 id="timelines-title">project timelines</h2>
+            <p class="sub" id="timelines-sub">commits per day, smoothed, √ scale · busiest projects by first commit</p>
           </div>
-          <div class="share-trend" id="share-trend" hidden>
-            <svg id="share-spark" viewBox="0 0 400 40" preserveAspectRatio="none" role="img" aria-label="Share over the trailing 30 days, by day"></svg>
-            <span class="share-trend-label">trailing 30d, daily</span>
-            <div class="tooltip" id="share-tooltip" hidden></div>
+          <div class="controls">
+            <div class="segmented period-picker" role="group" aria-label="Period"></div>
+            <button id="timelines-table-toggle" class="ghost" type="button" aria-expanded="false" aria-controls="timelines-table">Table</button>
           </div>
-          <p class="sub" id="share-sub"></p>
         </div>
-        <div class="totals">
-          <p class="label" id="totals-label">commits</p>
-          <dl class="stat-row totals-list" id="kpis" aria-labelledby="totals-label"></dl>
+        <div class="chart-wrap timelines-wrap">
+          <div class="timelines" id="timelines" role="list" aria-labelledby="timelines-title timelines-sub"></div>
+          <div class="timelines-cursor" id="timelines-cursor" hidden></div>
+          <div class="tooltip" id="timelines-tooltip" hidden></div>
         </div>
+        <div class="table-view" id="timelines-table" hidden></div>
       </section>
 
-      <section class="card chart-card types-card" aria-labelledby="types-title" hidden>
+      <section class="card chart-card types-card half" aria-labelledby="types-title" hidden>
         <div class="card-head">
           <div>
             <h2 id="types-title">commit types</h2>
@@ -202,33 +192,14 @@
         </div>
         <ul class="legend" id="types-legend" aria-label="Commit types"></ul>
         <div class="chart-wrap types-wrap">
-          <svg id="types" viewBox="0 0 1000 280" role="img" aria-labelledby="types-title types-sub"></svg>
+          <svg id="types" viewBox="0 0 560 300" role="img" aria-labelledby="types-title types-sub"></svg>
           <div class="tooltip" id="types-tooltip" hidden></div>
         </div>
         <p class="sub types-note" id="types-note"></p>
         <div class="table-view" id="types-table" hidden></div>
       </section>
 
-      <section class="card chart-card timelines-card" aria-labelledby="timelines-title" hidden>
-        <div class="card-head">
-          <div>
-            <h2 id="timelines-title">project timelines</h2>
-            <p class="sub" id="timelines-sub">commits per day, smoothed, √ scale · busiest projects by first commit</p>
-          </div>
-          <div class="controls">
-            <div class="segmented period-picker" role="group" aria-label="Period"></div>
-            <button id="timelines-table-toggle" class="ghost" type="button" aria-expanded="false" aria-controls="timelines-table">Table</button>
-          </div>
-        </div>
-        <div class="chart-wrap timelines-wrap">
-          <div class="timelines" id="timelines" role="list" aria-labelledby="timelines-title timelines-sub"></div>
-          <div class="timelines-cursor" id="timelines-cursor" hidden></div>
-          <div class="tooltip" id="timelines-tooltip" hidden></div>
-        </div>
-        <div class="table-view" id="timelines-table" hidden></div>
-      </section>
-
-      <section class="card chart-card gap-card" aria-labelledby="gap-title" hidden>
+      <section class="card chart-card gap-card half" aria-labelledby="gap-title" hidden>
         <div class="card-head">
           <div>
             <h2 id="gap-title">written to landed</h2>
@@ -240,20 +211,49 @@
         </div>
         <div class="gap-layout">
           <div class="chart-wrap gap-wrap">
-            <svg id="gap" viewBox="0 0 1000 340" role="img" aria-labelledby="gap-title gap-sub"></svg>
+            <svg id="gap" viewBox="0 0 560 360" role="img" aria-labelledby="gap-title gap-sub"></svg>
             <div class="tooltip" id="gap-tooltip" hidden></div>
           </div>
           <dl class="stat-row gap-stats" id="gap-stats" aria-label="Written to landed stats"></dl>
         </div>
       </section>
 
-      <section class="card" aria-labelledby="repos-title">
+      <section class="hero" aria-labelledby="share-label">
+        <div class="share-card">
+          <div class="share-head">
+            <p class="label" id="share-label">tangled</p>
+            <div class="share-periods period-picker" id="share-periods" role="group" aria-label="Period">
+              <button type="button" data-period="30d">30d</button>
+              <button type="button" data-period="90d">90d</button>
+              <button type="button" data-period="1y">1y</button>
+              <button type="button" data-period="all">all</button>
+            </div>
+          </div>
+          <p class="share-value" id="share-value">—</p>
+          <div class="meter" id="share-meter" role="img" aria-labelledby="share-label share-sub">
+            <div class="meter-track"></div>
+            <div class="meter-fill" id="share-fill"></div>
+          </div>
+          <div class="share-trend" id="share-trend" hidden>
+            <svg id="share-spark" viewBox="0 0 400 40" preserveAspectRatio="none" role="img" aria-label="Share over the trailing 30 days, by day"></svg>
+            <span class="share-trend-label">trailing 30d, daily</span>
+            <div class="tooltip" id="share-tooltip" hidden></div>
+          </div>
+          <p class="sub" id="share-sub"></p>
+        </div>
+        <div class="totals">
+          <p class="label" id="totals-label">commits</p>
+          <dl class="stat-row totals-list" id="kpis" aria-labelledby="totals-label"></dl>
+        </div>
+      </section>
+
+      <section class="card half" aria-labelledby="repos-title">
         <p class="eyebrow period-fixed" title="All time; the period pickers don't change it">fixed · all time</p>
         <h2 id="repos-title">repositories</h2>
         <div id="repos"></div>
       </section>
 
-      <section class="card" aria-labelledby="recent-title">
+      <section class="card half" aria-labelledby="recent-title">
         <h2 id="recent-title">recent</h2>
         <ol class="recent" id="recent"></ol>
       </section>
diff --git a/web/style.css b/web/style.css
index c26e286..2522de3 100644
--- a/web/style.css
+++ b/web/style.css
@@ -139,11 +139,7 @@ a {
 }
 a:hover { color: var(--accent); text-decoration-color: currentColor; }
 
-.page {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 28px 20px 64px;
-}
+.page { margin: 0 auto; }
 
 /* --------------------------------------------------------------------------
    Header
@@ -1114,13 +1110,14 @@ td:first-child { color: var(--ink); }
   gap: 16px;
 }
 
+/* Cards marked .half pair up on main's grid; everything else spans it. */
+main {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+}
 
-
-
-
-
-
-
+main > * { grid-column: 1 / -1; }
+main > .half { grid-column: auto; min-width: 0; }
 
 .repo-row {
   display: grid;
@@ -1466,7 +1463,7 @@ body {
 }
 
 .page {
-  max-width: 1200px;
+  max-width: 1440px;
   padding: 30px 34px 80px;
 }
 
@@ -1755,6 +1752,13 @@ body {
   border-left: 1px solid var(--border);
 }
 
+.two-col > .card:has(+ .card:not([hidden])),
+.half:has(+ .half) { padding-right: 36px; }
+.half + .half { padding-left: 36px; border-left: 1px solid var(--border); }
+
+/* A card whose partner is hidden takes the whole row. */
+.half:has(+ .half[hidden]),
+.half[hidden] + .half { grid-column: 1 / -1; padding-right: 0; padding-left: 0; border-left: 0; }
 
 .repo-row { padding: 6px 0; }
 .repo-name { color: var(--ink); font-size: 13px; }
@@ -1799,10 +1803,13 @@ body {
 }
 
 @media (max-width: 860px) {
-  .hero, .two-col { grid-template-columns: 1fr; }
+  main, .hero, .two-col { grid-template-columns: 1fr; }
   .hero { gap: 0; }
   .totals { padding: 18px 0 20px; border-left: 0; border-top: 1px solid var(--border); }
-  .two-col > .card + .card { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); }
+  .two-col > .card + .card,
+  .half + .half { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); }
+  .two-col > .card:has(+ .card:not([hidden])),
+  .half:has(+ .half) { padding-right: 0; }
   .share-value { font-size: 58px; }
 }