style(website): widen the mobile page gutter to 24px

The wordmark and the hero mark sat 18px off the edge, close enough to read as
flush against it on a phone. The nav bar and Wrap carry the same gutter, so
both move together.

website/src/components/layout/nav.tsx

@@ -14,7 +14,7 @@ const ITEMS = [
 
 export const Nav = () => (
   <header className="sticky top-0 z-50 border-b border-hairline bg-[color-mix(in_srgb,var(--bg-base)_88%,transparent)] backdrop-blur-[8px]">
-    <div className="mx-auto flex max-w-[1140px] flex-wrap items-center gap-x-4 gap-y-3 px-[18px] pt-2.5 sm:h-[60px] sm:flex-nowrap sm:gap-6 sm:px-7 sm:pt-0">
+    <div className="mx-auto flex max-w-[1140px] flex-wrap items-center gap-x-4 gap-y-3 px-6 pt-2.5 sm:h-[60px] sm:flex-nowrap sm:gap-6 sm:px-7 sm:pt-0">
       <NavLink
         to="/"
         aria-label="soulseek-rs home"

website/src/components/ui/layout.tsx

@@ -6,7 +6,7 @@ interface WrapProps {
 }
 
 export const Wrap = ({ children, className }: WrapProps) => (
-  <div className={cn('mx-auto w-full max-w-[1140px] px-[18px] sm:px-7', className)}>
+  <div className={cn('mx-auto w-full max-w-[1140px] px-6 sm:px-7', className)}>
     {children}
   </div>
 )