Platform 0.1.6 (contact security) + fidelity fixes from the port review

- .container back in @layer components so Tailwind's px-4 still wins; unlayered it had
  quietly widened the gutter on every page
- shadow-sm -> shadow-xs: Tailwind v4 renamed the scale, so the ported markup was giving
  every white card a heavier shadow than the live site
- route changes jump to the top again instead of smooth-scrolling
- preload the wordmark font and the hero image

frontend/index.html

@@ -7,6 +7,9 @@
   <link rel="icon" media="(prefers-color-scheme: dark)" href="/images/resources/logo_dark.png">
   <!-- Preconnect to the photo bucket so product images start loading a round-trip sooner. -->
   <link rel="preconnect" href="https://s3.thebennett.net" crossorigin>
+  <!-- The wordmark is set in these; without preloading they arrive late and the logo visibly reflows. -->
+  <link rel="preload" as="font" type="font/woff2" href="/src/fonts/raleway-latin.woff2" crossorigin>
+  <link rel="preload" as="image" href="https://s3.thebennett.net/itsthevine/images/gallery/Outside.webp" fetchpriority="high">
   <!-- PageMetaController rewrites the title and the four meta tags below per route, so crawlers and
        link-preview scrapers get real per-page metadata instead of one generic shell. Keep the
        attribute order and quoting as-is — it matches on them. -->

frontend/src/App.tsx

@@ -15,7 +15,9 @@ import NotFoundPage from '@/pages/NotFound';
 const ScrollToTop = () => {
   const { pathname, hash } = useLocation();
   useEffect(() => {
-    if (!hash) window.scrollTo(0, 0);
+    // 'instant' overrides the page's scroll-behavior:smooth, which is meant for the #visit
+    // anchor, not for landing on a new page.
+    if (!hash) window.scrollTo({ top: 0, behavior: 'instant' });
   }, [pathname, hash]);
   return null;
 };

frontend/src/index.css

@@ -70,18 +70,13 @@ body {
   }
 }
 
-/* Deliberately unlayered so it overrides Tailwind's own `container` utility — the site's gutters are
-   part of the layout, not the breakpoint default. */
-.container {
-  max-width: 80rem;
-  margin-inline: auto;
-  padding-inline: 1rem;
-}
-@media (min-width: 40rem) {
-  .container { padding-inline: 1.5rem; }
-}
-@media (min-width: 64rem) {
-  .container { padding-inline: 2rem; }
+/* In @layer components, matching the old site. That ordering matters: a utility like `px-4` — which
+   the markup applies alongside `container` on nearly every section — has to win over this, or every
+   gutter on the site silently widens. */
+@layer components {
+  .container {
+    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
+  }
 }
 
 ::selection {

frontend/src/pages/Contact.tsx

@@ -50,7 +50,7 @@ const ContactPage = () => {
 
       {/* Contact Form Section */}
       <div className="container mx-auto px-4 pb-16 md:pb-24">
-        <div className="max-w-2xl mx-auto bg-white p-8 md:p-10 rounded-3xl shadow-sm">
+        <div className="max-w-2xl mx-auto bg-white p-8 md:p-10 rounded-3xl shadow-xs">
           <h2 className="font-adbhashitha text-2xl md:text-3xl text-bakery-900 mb-2">Get in touch</h2>
           <p className="text-bakery-700 mb-8">
             Or call us: <a href="tel:+13097010660" className="underline underline-offset-4 hover:text-bakery-600">(309) 701-0660</a>

frontend/src/pages/Home.tsx

@@ -54,7 +54,7 @@ const HomePage = () => {
             {['Cinnamon Rolls', 'Sugar Cookies', 'Cakes'].map((item) => (
               <div
                 key={item}
-                className="group text-center bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-lg hover:-translate-y-1 transition duration-300"
+                className="group text-center bg-white rounded-3xl overflow-hidden shadow-xs hover:shadow-lg hover:-translate-y-1 transition duration-300"
               >
                 <div className="overflow-hidden">
                   <img

frontend/src/pages/Products.tsx

@@ -74,7 +74,7 @@ const ProductsPage = () => {
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
-                className="group bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-lg hover:-translate-y-1 transition duration-300"
+                className="group bg-white rounded-3xl overflow-hidden shadow-xs hover:shadow-lg hover:-translate-y-1 transition duration-300"
               >
                 {/* Image Container */}
                 <div className="relative w-full overflow-hidden">

pom.xml

@@ -7,7 +7,7 @@
     <parent>
         <groupId>net.thebennett.platform</groupId>
         <artifactId>platform-parent</artifactId>
-        <version>0.1.5</version>
+        <version>0.1.6</version>
         <relativePath/>
     </parent>
 
@@ -22,7 +22,7 @@
             <dependency>
                 <groupId>net.thebennett.platform</groupId>
                 <artifactId>platform-bom</artifactId>
-                <version>0.1.5</version>
+                <version>0.1.6</version>
                 <type>pom</type>
                 <scope>import</scope>
             </dependency>