please (#1317)

web/views/timeline.ejs

@@ -36,6 +36,20 @@
             min-height: 100vh;
         }
 
+        /* Hero spacing as page-local CSS, NOT Tailwind utilities: the project
+           ships a pre-built output.css with unused classes purged, so new
+           lg:pt-* / lg:pb-* utilities don't exist and silently apply nothing. */
+        .timeline-hero {
+            padding-top: 7rem;      /* clears the fixed 64px nav + gap */
+            padding-bottom: 2rem;
+        }
+        @media (min-width: 1024px) {
+            .timeline-hero {
+                padding-top: 7.5rem;
+                padding-bottom: 3.25rem;   /* room between hero text and row 1 */
+            }
+        }
+
         .gradient-text {
             background: linear-gradient(135deg, #F5F5DC 0%, #90EE90 100%);
             -webkit-background-clip: text;
@@ -111,7 +125,7 @@
 
         @media (min-width: 1024px) {
             .timeline {
-                margin-top: 1.5rem;
+                margin-top: 2.5rem;
             }
             .timeline-grid {
                 grid-template-columns: repeat(3, 1fr);
@@ -290,7 +304,7 @@
     <%- include('partials/nav', { activePage: 'timeline' }) %>
 
     <!-- Header -->
-    <section class="pt-28 pb-8 lg:pt-36 lg:pb-10">
+    <section class="timeline-hero">
         <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>