diff --git a/html/style.css b/html/style.css
index 0c030dd..b1b8203 100644
--- a/html/style.css
+++ b/html/style.css
@@ -43,11 +43,12 @@ body {
   background-color: var(--bg);
   color: var(--text);
   height: 100vh;
+  height: 100dvh;
   display: grid;
-  overflow: hidden;
   font-size: 16px;
-  grid-template-rows: auto auto;
+  grid-template-rows: 1fr auto;
   padding: 0.5vh;
+  overflow: hidden;
 }
 
 /* ─── .main ─────────────────────────────────────────────────── */
@@ -77,6 +78,8 @@ body {
   box-shadow: var(--glow-soft);
   overflow: hidden;
   align-self: start;
+  max-height: 100%;
+  min-height: 0;
 }
 
 /* ─── .conditions ───────────────────────────────────────────── */
@@ -276,17 +279,16 @@ img.logo {
   min-height: 0;
   position: relative;
   z-index: 0;
-  min-height: 0;
   overflow: hidden;
 }
 
 .video img {
   width: 100%;
-  height: auto;
+  height: 100%;
   object-fit: contain;
+  object-position: top;
   display: block;
   padding: 4px;
-  max-height: 100%;
 }
 
 /* ─── Footer ────────────────────────────────────────────────── */
@@ -313,6 +315,9 @@ img.logo {
    Switch .conditions to a single-column stacked list
    ════════════════════════════════════════════════════════════════ */
 @media (orientation: landscape) {
+  body {
+    grid-template-rows: 1fr auto;
+  }
 
   .main {
     grid-template-rows: 1fr;
@@ -320,6 +325,7 @@ img.logo {
     grid-template-areas: "conditions video";
     border-radius: var(--r-lg) 0 0 var(--r-lg);
     justify-content: center;
+    height: 100%;
   }
 
   /* Single column — everything stacks top-to-bottom */
@@ -346,11 +352,13 @@ img.logo {
   }
 
   .video {
-    display: block;
-    align-items: unset;
-    justify-content: unset;
-    height: 100%;
-    width: 100%;
+    height: min(100%, calc((100vw - 180px) * 9 / 16));
+    #height: 100%;
+    max-width: calc(100vw - 180px);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    align-self: center;
   }
   
   .video img {