From 5c935a3b861dcfb3917e3f96ce2b06de053dcb23 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Wed, 18 Mar 2026 18:05:07 -0700
Subject: [PATCH] Improve mobile responsiveness for The Last Draw

Stack character cards vertically, fix image sizing, adjust typography,
footer link, and theme tags for mobile. Add 400px breakpoint for very
small devices.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 index.html | 92 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 90 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index aea330f..cd42aed 100644
--- a/index.html
+++ b/index.html
@@ -842,23 +842,111 @@
                 z-index: 101;
             }
 
+            .hero {
+                min-height: 80vh;
+            }
+
+            .hero-title {
+                font-size: clamp(3rem, 14vw, 6rem);
+            }
+
             section, .full-bleed {
-                padding: 5rem 1.5rem;
+                padding: 4rem 1.2rem;
             }
 
             .question-section, .closing-section {
-                padding: 6rem 1.5rem;
+                padding: 5rem 1.2rem;
+            }
+
+            .question, .closing-question {
+                font-size: clamp(1.2rem, 4vw, 1.8rem);
             }
 
             .comps-grid {
                 grid-template-columns: 1fr;
             }
 
+            .comp-card img {
+                height: 220px;
+            }
+
+            .character-grid {
+                gap: 1rem;
+            }
+
+            .character-row-top,
+            .character-row-bottom {
+                flex-direction: column;
+                align-items: center;
+            }
+
             .character-row-top .character-card,
             .character-row-bottom .character-card {
                 width: 100%;
                 max-width: 400px;
             }
+
+            .character-photo {
+                height: auto;
+                max-height: 300px;
+            }
+
+            .img-break img {
+                height: auto;
+                max-height: 50vh;
+                object-fit: cover;
+            }
+
+            .world-images img {
+                height: auto;
+                max-height: 300px;
+            }
+
+            .synopsis-text, .inspiration-text, .themes-text, .tone-text, .world-text {
+                font-size: 0.95rem;
+            }
+
+            .creator-bio {
+                font-size: 0.9rem;
+            }
+
+            .team-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .team-card img {
+                height: auto;
+                max-height: 300px;
+            }
+
+            .footer-link {
+                font-size: 0.7rem;
+                padding: 0.5rem 1rem;
+            }
+
+            .theme-tags {
+                gap: 0.5rem;
+            }
+
+            .theme-tag {
+                font-size: 0.65rem;
+                padding: 0.4rem 0.8rem;
+            }
+        }
+
+        /* SMALL MOBILE */
+        @media (max-width: 400px) {
+            section, .full-bleed {
+                padding: 3rem 1rem;
+            }
+
+            .hero-title {
+                font-size: 3rem;
+            }
+
+            .character-photo {
+                max-height: 250px;
+            }
         }
     </style>
 </head>