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]>

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