style: improve layout, typography, and hero scroll animation

- Increase base font size from 18px to 20px
- Widen page container from 1120px to 1320px (padding 28px → 40px)
- Expand hero to 100vh so Research Directions appear below the fold
- Remove border between news items
- Smooth hero image animation: extend range to 15% hero height, add ease-in-out curve, add will-change hint

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: jokester-zzz

assets/css/main.css

@@ -48,7 +48,7 @@
 
 /* ── Reset & Base ── */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-html { font-size: 18px; scroll-behavior: smooth; }
+html { font-size: 20px; scroll-behavior: smooth; }
 
 body {
   font-family: var(--font-body);
@@ -67,7 +67,7 @@ a:hover { text-decoration: none; }
 img { max-width: 100%; height: auto; display: block; }
 
 /* ── Layout ── */
-.container { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
+.container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
 .page-content { padding: 56px 0 96px; }
 
 /* ── Page load animation ── */
@@ -249,7 +249,7 @@ img { max-width: 100%; height: auto; display: block; }
   width: 100vw;
   margin-left: calc(-50vw + 50%);
   margin-top: -116px;
-  min-height: 85vh;
+  min-height: 100vh;
   display: flex;
   align-items: flex-start;
   position: relative;
@@ -279,6 +279,7 @@ img { max-width: 100%; height: auto; display: block; }
   z-index: 0;
   border-radius: var(--radius-lg);
   background: linear-gradient(145deg, var(--accent) 0%, var(--accent-mid) 60%, var(--accent-light) 100%);
+  will-change: top, bottom, right, width, border-radius;
 }
 
 .hero-bg-img {
@@ -293,7 +294,7 @@ img { max-width: 100%; height: auto; display: block; }
   position: relative;
   z-index: 2;
   width: 100%;
-  max-width: 1120px;
+  max-width: 1320px;
   margin: 0 auto;
   padding: 400px 28px 60px;
 }
@@ -405,10 +406,8 @@ img { max-width: 100%; height: auto; display: block; }
   gap: 20px;
   align-items: baseline;
   padding: 14px 0;
-  border-bottom: 1px solid var(--border-light);
   transition: padding-left 0.2s;
 }
-.news-item:last-child { border-bottom: none; }
 .news-item:hover { padding-left: 4px; }
 
 .news-date {

assets/js/hero.js

@@ -15,6 +15,7 @@
     var rafId = null;
 
     function lerp(a, b, t) { return a + (b - a) * t; }
+    function ease(t) { return t < 0.5 ? 2*t*t : -1+(4-2*t)*t; } // ease-in-out quad
 
     function update() {
       rafId = null;
@@ -27,7 +28,7 @@
 
       var scrollY = window.scrollY || window.pageYOffset;
       var heroH   = section.offsetHeight;
-      var t = Math.max(0, Math.min(1, scrollY / (heroH * 0.10)));
+      var t = ease(Math.max(0, Math.min(1, scrollY / (heroH * 0.15))));
 
       // Measure actual DOM positions at current zoom level — stays correct at any scale
       var heroRect  = section.getBoundingClientRect();