Add power conversion entries and responsive nav tweaks

hdyc-svelte/src/app.css

@@ -468,11 +468,15 @@ a:hover {
 }
 .category-grid {
   width: min(1160px, 100%);
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
-  gap: clamp(0.75rem, 1.3vw, 1.25rem);
+  display: flex;
+  flex-wrap: wrap;
   justify-content: center;
-  justify-items: stretch;
+  gap: clamp(0.75rem, 1.3vw, 1.25rem);
+}
+.category-grid .category-card {
+  flex: 0 1 clamp(180px, 22vw, 220px);
+  min-width: 180px;
+  max-width: 220px;
 }
 
 /* ─── Calculator List (category page) ────────────────────── */
@@ -600,10 +604,17 @@ a:hover {
 
 /* ─── Responsive ─────────────────────────────────────────── */
 
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
   .hamburger {
     display: block;
   }
+  .site-body {
+    gap: 1rem;
+    padding-inline: 1rem;
+  }
+}
+
+@media (max-width: 768px) {
   .main-content {
     padding: 1.25rem;
   }
@@ -618,8 +629,11 @@ a:hover {
   }
   .category-grid {
     width: min(960px, 100%);
-    grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
-    justify-content: center;
+  }
+  .category-grid .category-card {
+    flex: 0 1 clamp(150px, 40vw, 200px);
+    min-width: 150px;
+    max-width: 200px;
   }
   .stats-row {
     gap: 1.5rem;