From 7071858390f5087d7f3ba00c4f53d9e3243e4fd6 Mon Sep 17 00:00:00 2001
From: Olov Johansson <johansson.olov@gmail.com>
Date: Sat, 8 Aug 2026 20:54:27 +0200
Subject: [PATCH] fix rules page columns + hover; sub-timeline click zones

---
 game.html  |  2 +-
 index.html | 21 ++++++++++++++-------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/game.html b/game.html
index edc02c5..ed303f0 100644
--- a/game.html
+++ b/game.html
@@ -674,7 +674,7 @@
     .tl-project-evt-dot.light { background: var(--paper); border-color: var(--brass); }
     .tl-project-evt-dot.dark  { background: var(--rust);  border-color: var(--void); }
     .tl-bar-add-overlay {
-      position: absolute; top: 16px; bottom: 0;
+      position: absolute; top: 0; height: 16px; /* rail area only */
       z-index: 2; cursor: crosshair; background: transparent;
     }
 
diff --git a/index.html b/index.html
index 9e77db4..db74b1f 100644
--- a/index.html
+++ b/index.html
@@ -137,12 +137,16 @@
 
     .project {
       display: grid;
-      grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.6fr);
+      grid-template-columns: minmax(200px, 0.68fr) minmax(0, 1fr);
       gap: clamp(2rem, 5vw, 5rem);
       align-items: start;
       margin: 0 0 7rem;
     }
-    .project:nth-of-type(even) .project-image { order: 2; }
+    /* Explicit column placement so text always gets the wider side */
+    .project .project-image { grid-column: 1; grid-row: 1; }
+    .project .project-copy  { grid-column: 2; grid-row: 1; }
+    .project:nth-of-type(even) .project-image { grid-column: 2; order: initial; }
+    .project:nth-of-type(even) .project-copy  { grid-column: 1; }
     .project-image {
       position: sticky;
       top: 5.3rem;
@@ -258,12 +262,15 @@
         transition-delay: 0.06s;
       }
 
-      /* Project images: contained zoom on hover */
-      .project-image { overflow: hidden; }
-      .project-image img {
-        transition: transform 0.6s cubic-bezier(0.22,1,.36,1);
+      /* Project images: whole frame lifts (no clipping of the inner border) */
+      .project-image {
+        transition: transform 0.6s cubic-bezier(0.22,1,.36,1),
+                    box-shadow 0.6s cubic-bezier(0.22,1,.36,1);
+      }
+      .project-image:hover {
+        transform: scale(1.015) translateY(-4px);
+        box-shadow: 0 40px 80px rgba(0,0,0,.62);
       }
-      .project-image:hover img { transform: scale(1.04); }
 
       /* Divider: fade in with slight width expansion */
       img.divider[data-reveal] {