fix: move .page-container into @layer utilities — resolves padding cascade conflict

Root cause: .page-container was declared outside any CSS layer, giving it higher
specificity than Tailwind's @layer utilities classes. This caused all py-, px-,
gap- utilities on elements that also had .page-container to be overridden.

Fix: wrap .page-container and its responsive breakpoints inside @layer utilities
so the cascade order is: base < components < utilities (correct Tailwind v4 order).

src/style.css

@@ -54,13 +54,8 @@
   --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
 }
 
-/* ─── Base Reset ────────────────────────────────────────── */
-*, *::before, *::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
+/* ─── Base overrides ─────────────────────────────────────── */
+@layer base {
   html {
     scroll-behavior: smooth;
   }
@@ -72,8 +67,10 @@ body {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+}
 
-/* ─── Page Container ────────────────────────────────────── */
+/* ─── Custom component utilities ─────────────────────────── */
+@layer utilities {
   .page-container {
     max-width: 1440px;
     margin-inline: auto;
@@ -97,3 +94,4 @@ body {
       padding-inline: 24px;
     }
   }
+}