From 187e9446681e90303595c20315564af6405a6e9e Mon Sep 17 00:00:00 2001
From: Cory Locklear <corylocklear@gmail.com>
Date: Thu, 11 Jun 2026 10:14:59 -0400
Subject: [PATCH] Keep museum path side-by-side on iPad portrait.

Use a compact two-column layout up to 50rem and only stack on narrow phones.
---
 src/App.css | 127 ++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 119 insertions(+), 8 deletions(-)

diff --git a/src/App.css b/src/App.css
index 5917fa2..e54c7a2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -456,10 +456,128 @@
   width: 100%;
 }
 
-@media (max-width: 52rem) {
+/* iPad portrait and narrow tablets — stay side-by-side, compact */
+@media (max-width: 50rem) {
+  .museum-path-scene {
+    padding: 0 0.5rem;
+  }
+
+  .museum-path-panel {
+    padding: 1.25rem 0.75rem 1.5rem;
+  }
+
+  .museum-path__layout {
+    gap: 0.65rem;
+  }
+
+  .museum-path__header h1 {
+    font-size: clamp(1.25rem, 4vw, 1.5rem);
+  }
+
+  .lock-subtitle {
+    white-space: normal;
+    font-size: 0.82rem;
+  }
+
+  .museum-path__section-title {
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .artifact-bank {
+    padding: 0.55rem;
+  }
+
+  .artifact-bank__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.5rem;
+  }
+
+  .artifact-card {
+    padding: 0.3rem;
+    gap: 0.25rem;
+  }
+
+  .artifact-card__image {
+    width: 3.5rem;
+    height: 3.5rem;
+  }
+
+  .artifact-card__name {
+    font-size: 0.68rem;
+    line-height: 1.2;
+  }
+
+  .artifact-card--overlay {
+    width: 6.5rem;
+  }
+
+  .artifact-card--overlay .artifact-card__image {
+    width: 3.5rem;
+    height: 3.5rem;
+  }
+
+  .path-slots {
+    gap: 0.4rem;
+  }
+
+  .path-slot {
+    min-height: 4.25rem;
+    padding: 0.4rem 0.45rem;
+    gap: 0.4rem;
+  }
+
+  .path-slot__number {
+    width: 1.25rem;
+    font-size: 0.95rem;
+  }
+
+  .path-slot__placeholder {
+    font-size: 0.72rem;
+  }
+
+  .path-slot .artifact-card {
+    gap: 0.4rem;
+    padding: 0.25rem 0.35rem;
+  }
+
+  .path-slot .artifact-card__image {
+    width: 2.75rem;
+    height: 2.75rem;
+  }
+
+  .path-slot .artifact-card__name {
+    font-size: 0.72rem;
+  }
+}
+
+/* Phones only — stack vertically */
+@media (max-width: 30rem) {
   .museum-path__layout {
     grid-template-columns: 1fr;
   }
+
+  .artifact-bank__grid {
+    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
+  }
+
+  .artifact-card__image {
+    width: 4.5rem;
+    height: 4.5rem;
+  }
+
+  .artifact-card__name {
+    font-size: 0.8rem;
+  }
+
+  .path-slot {
+    min-height: 5rem;
+  }
+
+  .path-slot .artifact-card__image {
+    width: 3.5rem;
+    height: 3.5rem;
+  }
 }
 
 .museum-path__section-title {
@@ -491,13 +609,6 @@
   gap: 0.75rem;
 }
 
-@media (max-width: 52rem) {
-  .artifact-bank__grid {
-    /* More columns in portrait — shorter bank, no inner scroll trap on iPad */
-    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
-  }
-}
-
 .path-slots {
   display: flex;
   flex-direction: column;