mobile: rules + game pages responsive at 640px and 480px

index.html

@@ -283,6 +283,48 @@
         filter: opacity(0.9) blur(0px);
       }
     }
+
+    /* ── Mobile ─────────────────────────────────────────────────── */
+    @media (max-width: 640px) {
+
+      /* Hero: less top padding, tighter leading */
+      .hero-copy { padding: 4rem 0 2.5rem; }
+      h1 { line-height: 1; }
+
+      /* Nav links: slightly smaller gap, still scrollable */
+      nav .shell { gap: 1rem; }
+
+      /* Reduce section spacing */
+      main { padding: 3rem 0 5rem; }
+      .project { margin: 0 0 4rem; }
+
+      /* Intro lead text: smaller on very narrow */
+      .intro .lead { font-size: 1.15rem; }
+
+      /* Meta grid: single column below 480px */
+      .meta { grid-template-columns: 1fr; }
+
+      /* Document: less padding */
+      .document { padding: 1.4rem; }
+      .document::before { display: none; }
+      .document::after { display: none; }
+
+      /* Blockquote: tighter */
+      blockquote { margin: 1.2rem 0 0; font-size: .88rem; }
+
+      /* Touch targets for nav */
+      nav a { padding: .9rem 0; }
+    }
+
+    @media (max-width: 480px) {
+      /* Masthead: less height on very small screens */
+      .masthead { min-height: 55vh; }
+      .masthead::after { display: none; }
+      .hero-copy h1 { font-size: clamp(2.6rem, 12vw, 4rem); }
+
+      /* Hide extra nav items, show only essentials */
+      nav .shell { gap: .8rem; }
+    }
   </style>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>