The fonts are better, maybe one more try for the "normal" font section that still seems a bit boring. But the big problem is the logo: make it an svg, because the current use of naked html elements and CSS is catastropic.

index.html

@@ -44,16 +44,17 @@
         <!-- Logo -->
         <div class="absolute top-8 left-8 z-20 group">
             <a href="#">
-                <div class="relative w-20 h-20 border border-zinc-300 rounded-full group-hover:border-zinc-100 transition-all duration-300">
-                    <svg viewBox="0 0 64 64" class="w-full h-full">
-                        <circle cx="32" cy="32" r="30" fill="none" stroke="currentColor" stroke-width="1.5" class="text-zinc-300 group-hover:text-zinc-100 transition-colors duration-300"/>
-                        <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" font-family="EB Garamond" font-size="28" font-weight="500" fill="currentColor" class="text-zinc-300 group-hover:text-zinc-100 transition-colors duration-300">
-                            <tspan x="32" dy="0">S</tspan>
-                            <tspan fill="none" stroke="currentColor" stroke-width="1.5">/</tspan>
-                            <tspan x="32" dy="0" style="text-decoration: line-through; text-decoration-color: rgba(0,0,0,0.3);">O</tspan>
+                <svg viewBox="0 0 120 120" class="w-20 h-20 rounded-full border border-zinc-300 group-hover:border-zinc-100 transition-all duration-300">
+                    <circle cx="60" cy="60" r="58" fill="none" stroke="currentColor" stroke-width="1.5" class="text-zinc-300 group-hover:text-zinc-100 transition-colors duration-300"/>
+                    <g font-family="EB Garamond" font-size="48" font-weight="500" fill="currentColor" class="text-zinc-300 group-hover:text-zinc-100 transition-colors duration-300">
+                        <text x="60" y="70" text-anchor="middle" dominant-baseline="middle">S</text>
+                        <path d="M72 60 L72 60" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                        <text x="60" y="70" text-anchor="middle" dominant-baseline="middle">
+                            <tspan>O</tspan>
+                            <tspan x="60" y="70" stroke="currentColor" stroke-width="1">/</tspan>
                         </text>
-                    </svg>
-                </div>
+                    </g>
+                </svg>
             </a>
         </div>
 <!-- Navigation -->

script.js

@@ -2,28 +2,39 @@
 document.addEventListener('DOMContentLoaded', () => {
     // Animate the logo on hover
     const logo = document.querySelector('.group');
+    const logoCircle = logo.querySelector('circle');
+    const logoText = logo.querySelector('g');
+    
     logo.addEventListener('mouseenter', () => {
         gsap.to(logo.querySelector('svg'), {
             rotation: 360,
             duration: 1.5,
             ease: 'elastic.out(1, 0.5)'
         });
-        gsap.to(logo.querySelector('circle'), {
+        gsap.to(logoCircle, {
             strokeWidth: 2.5,
+            duration: 0.5
+        });
+        gsap.to(logoText, {
+            scale: 1.1,
             duration: 0.5,
-            ease: 'power2.out'
+            transformOrigin: 'center center'
         });
     });
+    
     logo.addEventListener('mouseleave', () => {
         gsap.to(logo.querySelector('svg'), {
             rotation: 0,
             duration: 1,
             ease: 'back.out(1.7)'
         });
-        gsap.to(logo.querySelector('circle'), {
+        gsap.to(logoCircle, {
             strokeWidth: 1.5,
-            duration: 0.5,
-            ease: 'power2.out'
+            duration: 0.5
+        });
+        gsap.to(logoText, {
+            scale: 1,
+            duration: 0.5
         });
     });
 // Smooth scrolling for anchor links

style.css

@@ -1,13 +1,12 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-
 body {
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 300;
-    line-height: 1.6;
-    letter-spacing: 0.5px;
+    font-family: 'EB Garamond', serif;
+    font-weight: 400;
+    line-height: 1.7;
+    letter-spacing: 0.3px;
+    font-size: 1.125rem;
 }
-
 h1, h2, h3, h4, h5, h6 {
     font-family: 'Cormorant Garamond', serif;
     font-weight: 500;