please (#1315)

web/views/timeline.ejs

@@ -41,6 +41,11 @@
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
+            color: #F5F5DC; /* fallback if background-clip:text unsupported */
+            /* line-height + padding give the gradient paint box room to cover
+               glyph descenders (e.g. the 'g' in Italian "La cronologia"). */
+            line-height: 1.2;
+            padding-bottom: 0.12em;
         }
 
         .text-accent { color: #F5F5DC; }
@@ -106,7 +111,13 @@
 
         @media (min-width: 1024px) {
             .timeline {
-                margin-top: 10.2vh;
+                margin-top: 1.25rem;
+                /* Approx height of everything above row 1's bottom (header +
+                   margin + row 1 cards). The row-1→row-2 gap is computed as
+                   100vh minus this, so row 2 always lands just below the fold
+                   on any viewport height. THIS is the one knob to tune: raise
+                   it if there's too much empty void, lower it if row 2 peeks. */
+                --row1-fold-offset: 700px;
             }
             .timeline-grid {
                 grid-template-columns: repeat(3, 1fr);
@@ -150,9 +161,15 @@
             .timeline-node:nth-child(4)  { grid-area: 2 / 3; }
             .timeline-node:nth-child(5)  { grid-area: 2 / 2; }
             .timeline-node:nth-child(6)  { grid-area: 2 / 1; }
+            /* Push row 2 below the fold so it stays hidden on load; the
+               connector line snakes down through this gap. Self-adjusts to
+               viewport height: bigger void on 1440, smaller on 1080, with a
+               3rem floor. Subtract 10rem for the grid's own row gap. */
             .timeline-node:nth-child(4),
             .timeline-node:nth-child(5),
-            .timeline-node:nth-child(6)  { margin-top: 3rem; }
+            .timeline-node:nth-child(6)  {
+                margin-top: max(3rem, calc(100vh - var(--row1-fold-offset) - 10rem));
+            }
             .timeline-node:nth-child(7)  { grid-area: 3 / 1; }
             .timeline-node:nth-child(8)  { grid-area: 3 / 2; }
             .timeline-node:nth-child(9)  { grid-area: 3 / 3; }
@@ -282,7 +299,7 @@
     <%- include('partials/nav', { activePage: 'timeline' }) %>
 
     <!-- Header -->
-    <section class="pt-32 pb-10 lg:pt-40 lg:pb-14">
+    <section class="pt-24 pb-6 lg:pt-28 lg:pb-8">
         <div class="max-w-[1400px] mx-auto px-6 lg:px-8 text-center">
             <p class="text-muted text-sm font-semibold tracking-[0.25em] uppercase mb-4"><%= t('timeline.eyebrow') %></p>
             <h1 class="text-4xl lg:text-6xl font-extrabold mb-5 gradient-text"><%= t('timeline.heading') %></h1>