Refine dashboard hero, mobile nav, animations and touch polish

- Stack the /me dashboard hero (avatar + info) on small screens instead of
  crowding them side by side; center the avatar and info on mobile
- Respect prefers-reduced-motion in the Reveal scroll animation
- Make the desktop pitch-in (NavDropdown) and mobile menu more consistent;
  give the mobile menu a max-height with overscroll containment so long
  navs scroll instead of overflowing on small phones
- Add safe-area insets for notched devices on header, nav and footer
- Polish whole-link content-cards (community tiles) with hover lift and a
  visible focus ring
- Enforce a comfortable min touch height on all .btn buttons

src/app/globals.css

@@ -551,6 +551,7 @@ a:hover {
 	font-weight: 700;
 	font-size: 14px;
 	cursor: pointer;
+	min-height: 40px;
 	transition: all 0.18s ease;
 	background: color-mix(
 		in srgb,
@@ -892,6 +893,23 @@ tbody tr:hover {
 	padding: 1.1rem;
 }
 
+/* content-card used as a whole clickable element (e.g. community tiles) */
+a.content-card {
+	text-decoration: none;
+}
+a.content-card:hover {
+	transform: translateY(-3px);
+}
+a.content-card:focus-visible {
+	outline: 2px solid var(--color-primary-readable, var(--color-primary));
+	outline-offset: 2px;
+}
+a.content-card {
+	transition:
+		box-shadow 0.2s ease,
+		transform 0.2s ease;
+}
+
 /* Responsive card grids (atom: 1 / sm2 / md3 / lg4). */
 .card-grid {
 	display: grid;
@@ -1392,6 +1410,16 @@ tbody tr:hover {
 	}
 }
 
+/* Safe-area insets for notched phones (header/nav/footer sit at screen edges) */
+@supports (padding: max(0px)) {
+	.site-header,
+	nav,
+	footer {
+		padding-left: max(env(safe-area-inset-left), 0px);
+		padding-right: max(env(safe-area-inset-right), 0px);
+	}
+}
+
 /* ── Admin (HK) semantic token remap ──────────────────────────────────────
    Shared shadcn UI primitives (Button, Badge, Input, Select, Card, Table,
    Tabs, Dialog, Switch, Checkbox, Tooltip, …) are built on the site's