feat: improve responsive design with tablet and small-screen breakpoints

Add 1024px tablet breakpoint with narrower sidebar, expand mobile styles
with horizontal nav reflow, and add 480px small-phone breakpoint with
tighter spacing. Document all three breakpoints in README.

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>

css/style.css

@@ -455,20 +455,56 @@ footer {
   margin-left: 3px;
 }
 
+/* ── Tablet ── */
+@media (max-width: 1024px) {
+  .layout { grid-template-columns: 230px 1fr; }
+  main { padding: 2.5rem 2rem; }
+}
+
 /* ── Mobile ── */
 @media (max-width: 768px) {
   .layout { grid-template-columns: 1fr; }
+
   aside {
     position: relative;
     height: auto;
     border-right: none;
     border-bottom: 1px solid var(--border);
+    padding: 1.5rem 1.2rem;
   }
+
+  /* Flatten the nav into a horizontal wrapping row to save vertical space */
+  nav {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.3rem;
+    flex: none;
+    margin: 0.8rem 0;
+  }
+
+  nav a {
+    display: inline-flex;
+    font-size: 0.72rem;
+    padding: 0.3rem 0.6rem;
+    margin-bottom: 0;
+  }
+
+  .socials { padding-top: 1rem; }
+
   main { padding: 2rem 1.5rem; }
   h1 { font-size: 1.7rem; }
   .contact-grid { grid-template-columns: 1fr; }
 }
 
+/* ── Small mobile (≤480 px) ── */
+@media (max-width: 480px) {
+  main { padding: 1.5rem 1rem; }
+  h1 { font-size: 1.4rem; }
+  section { margin-bottom: 2.5rem; }
+  .hero-sub { font-size: 0.92rem; }
+  .skills-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
+}
+
 /* ── Fade-in animation ── */
 @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
 section { animation: fadeUp 0.5s ease both; }