frontend: rebuild shoploop.studio to Grip mood (cream/butter/lavender)

apps/shoploop-studio-site/app/globals.css

@@ -4,54 +4,61 @@
 
 :root {
   --font-deva: 'Noto Serif Devanagari', serif;
-  --font-display: 'IBM Plex Serif', Georgia, serif;
-  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
+  --font-display: 'Instrument Serif', 'IBM Plex Serif', Georgia, serif;
+  --font-body: 'Satoshi', 'Inter', 'IBM Plex Sans', system-ui, sans-serif;
   --ease: cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 html {
   scroll-behavior: smooth;
-  background: #0b2523;
+  background: #F5F3EE;
 }
 
 body {
-  background: #0b2523;
-  color: #f7f2e7;
+  background: #F5F3EE;
+  color: #0A0A0A;
   font-family: var(--font-body);
+  font-feature-settings: 'ss01', 'cv11';
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
 }
 
 ::selection {
-  background: #e8a33d;
-  color: #0b2523;
+  background: #F5F369;
+  color: #0A0A0A;
 }
 
 *:focus-visible {
-  outline: 2px solid #e8a33d;
+  outline: 2px solid #0A0A0A;
   outline-offset: 3px;
   border-radius: 2px;
 }
 
-.sec-label {
-  font-family: ui-monospace, SFMono-Regular, monospace;
-  font-size: 0.7rem;
-  letter-spacing: 0.22em;
+/* Label caps — Grip nav / eyebrow pattern */
+.label-caps {
+  font-family: var(--font-body);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
   text-transform: uppercase;
-  color: #e8a33d;
 }
 
-.grain::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  opacity: 0.05;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
+/* Isometric shadow used under illustrations inside color panels */
+.iso-shadow {
+  filter: drop-shadow(3px 4px 0 #0A0A0A);
+}
+
+/* Buttercream / lavender / coral panels get the 32px signature radius */
+.panel {
+  border-radius: 32px;
+  padding: 48px;
 }
 
-.hairline {
-  border-color: rgba(247, 242, 231, 0.12);
+@media (max-width: 640px) {
+  .panel {
+    padding: 28px;
+    border-radius: 24px;
+  }
 }
 
 @keyframes marquee {
@@ -63,10 +70,6 @@ body {
 }
 .marquee-track:hover { animation-play-state: paused; }
 
-@keyframes dashflow {
-  to { stroke-dashoffset: -1000; }
-}
-
 @media (prefers-reduced-motion: reduce) {
   html { scroll-behavior: auto; }
   .marquee-track { animation: none; }

apps/shoploop-studio-site/app/layout.tsx

@@ -98,7 +98,11 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
         <link
           rel="stylesheet"
-          href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;1,400&family=Noto+Serif+Devanagari:wght@400;600;700&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&family=IBM+Plex+Serif:wght@400;500;600&family=Noto+Serif+Devanagari:wght@400;600;700&display=swap"
+        />
+        <link
+          rel="stylesheet"
+          href="https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap"
         />
         <script
           type="application/ld+json"