5.1.1

Tidy simple view card spacing and locations.
Make simple view fonts bigger
Fix quick view memory

assets/css/table.css

@@ -2410,15 +2410,23 @@
 }
 
 .fsc-card {
+  /* One fixed width at every hour interval — a 4h card is not a wider card,
+     just a card with more space either side of it. It spans 2*bucket grid
+     tracks (see fscPlot in app.js) and is centred within that span, so it
+     stays over its landing hour and keeps lining up with the curve below
+     however wide the span gets. Must match FSC_CARD_W in app.js. */
+  width: 92px;
+  /* Kept alongside the fixed width: .fsc-feel is nowrap, so a long band label
+     ("Very Strong Heat Stress") gives the card a ~146px min-content. Left to
+     the automatic minimum that can push the tracks it spans wider than their
+     neighbours', and the grid stops being uniform — which is the one thing
+     the connector-line maths (hourAt in app.js) assumes. */
   min-width: 0;
+  justify-self: center;
   text-align: center;
   border: none;
   background: transparent;
   padding: 10px 8px 12px;
-  /* 2px each side = 4px between neighbouring cards. Done with margin rather
-     than a grid gap so the cards stay centred on their landing hour and keep
-     lining up with the curve below. */
-  margin: 0 2px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -2433,11 +2441,14 @@
   z-index: 1;
 }
 
+/* Same display serif as the hour cell in the Detailed and Table views
+   (.utci-time) — the time reads as the same thing in all three. Now the
+   cards are a fixed 92px this can carry the full 16px too. */
 .fsc-time {
-  font-family: JetBrains Mono, monospace;
-  font-size: 12px;
-  font-weight: 700;
-  color: #4a3218;
+  font-family: Fraunces, serif;
+  font-size: 16px;
+  font-weight: 500;
+  color: #1e1208;
   line-height: 1;
 }
 .fsc-card--now .fsc-time {
@@ -2482,11 +2493,14 @@
 }
 .fsc-meta-row {
   font-family: Manrope, sans-serif;
-  font-size: 10px;
+  font-size: 12px;
   font-weight: 600;
-  line-height: 1.2;
+  line-height: 1.25;
   color: #6b5230;
-  opacity: 0.8;
+  /* Was 0.8 at 10px, which read as grey-on-cream mush. The wider cards have
+     the room, and these three lines are the only numbers on the card besides
+     the temperature — they should be legible, not decorative. */
+  opacity: 0.9;
 }
 .fsc-card--now .fsc-meta-row { opacity: 1; color: #4a3218; }
 .fsc-meta-rain { color: #2a6a90; }
@@ -2538,7 +2552,9 @@
 
 @media (max-width: 600px) {
   .fsc-card {
-    min-width: 55px;
+    /* Width holds at 92px on mobile too — the row scrolls horizontally, so
+       narrowing the cards buys nothing and costs legibility. Only the inner
+       padding tightens. */
     padding: 8px 4px 10px;
     gap: 5px;
   }