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 <noreply@anthropic.com>

README.md

@@ -37,7 +37,19 @@ k5bss.com/
 - Plain HTML5 / CSS3 — no JavaScript frameworks or build step
 - Fonts: [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) and [IBM Plex Sans](https://fonts.google.com/specimen/IBM+Plex+Sans) via Google Fonts
 - Sticky sidebar with scroll-spy nav via `IntersectionObserver`
-- Responsive at 768px breakpoint (sidebar stacks above content on mobile)
+- Fully responsive across three breakpoints (see below)
+
+## Responsive Design
+
+The layout adapts across three breakpoints defined in `css/style.css`:
+
+| Breakpoint | Behavior |
+|---|---|
+| `≤1024px` (tablet) | Sidebar narrows from 280px to 230px; main content padding reduced |
+| `≤768px` (mobile) | Sidebar unsticks and stacks above content; nav links reflow into a horizontal wrapping row; contact grid collapses to one column |
+| `≤480px` (small phone) | Tighter padding and font sizes; skills grid columns shrink to `minmax(140px, 1fr)` |
+
+All other components — tags, socials, and the skills grid — use `flex-wrap` or `auto-fill` and reflow fluidly without breakpoints.
 
 ## Deployment
 

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; }