diff --git a/public/index.html b/public/index.html
index 79e45fb..7793c1d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -147,19 +147,25 @@
   .login-overlay {
     position: fixed; inset: 0; background: #F5F0EB;
     display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100;
-    overflow-y: auto; padding: 20px 16px;
+    overflow-y: auto; padding: 40px 16px;
+  }
+  @media (max-width: 520px) {
+    .login-overlay { justify-content: flex-start; padding-top: 24px; }
+    .login-hero img { max-width: 100%; }
+    .login-tagline { font-size: calc(var(--title-size) * 0.85); }
   }
   .login-hero {
     width: 100%; max-width: 420px; margin-bottom: 24px; text-align: center;
+    padding: 0 16px;
   }
   .login-hero img {
-    width: 100%; max-width: 380px;
+    width: 100%; max-width: 420px;
     border-radius: 0;
     filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
   }
   .login-tagline {
     font-family: 'Playfair Display', serif;
-    font-size: calc(var(--title-size) * 0.7);
+    font-size: calc(var(--title-size) * 0.75);
     font-weight: 600; color: #3A332D;
     line-height: 1.35; margin: 20px 0 6px;
     font-style: italic;
@@ -168,7 +174,7 @@
     font-size: var(--font-size); color: #8B7E74;
     line-height: 1.5; margin-bottom: 4px;
   }
-  .login-box { text-align: center; width: 300px; }
+  .login-box { text-align: center; width: 100%; max-width: 420px; padding: 0 16px; }
   .login-box input, .login-box select {
     padding: 10px 16px; border-radius: 8px; border: 1px solid #E8E0D8;
     font-size: var(--button-size); font-family: 'DM Sans', sans-serif; width: 100%;