modified: style.css

html/style.css

@@ -44,9 +44,10 @@ body {
   color: var(--text);
   height: 100vh;
   display: grid;
-  grid-template-rows: 1fr var(--footer-h);
   overflow: hidden;
   font-size: 16px;
+  grid-template-rows: auto auto;
+  padding: 0.5vh;
 }
 
 /* ─── .main ─────────────────────────────────────────────────── */
@@ -75,7 +76,7 @@ body {
   border-radius: var(--r-lg) var(--r-lg) 0 0;
   box-shadow: var(--glow-soft);
   overflow: hidden;
-  height: 100%;
+  align-self: start;
 }
 
 /* ─── .conditions ───────────────────────────────────────────── */
@@ -270,7 +271,7 @@ img.logo {
 /* ─── Video panel ───────────────────────────────────────────── */
 .video {
   grid-area: video;
-  height: 100%;
+  height: auto;
   overflow: hidden;
   min-height: 0;
   position: relative;
@@ -281,7 +282,7 @@ img.logo {
 
 .video img {
   width: 100%;
-  height: 100%;
+  height: auto;
   object-fit: contain;
   display: block;
   padding: 4px;
@@ -290,14 +291,12 @@ img.logo {
 
 /* ─── Footer ────────────────────────────────────────────────── */
 .footer {
-  height: var(--footer-h);
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
   grid-row: -1;
-  align-self: end;
+  padding: 1vh;
 }
 
 .footer p, .footer a {
@@ -314,9 +313,6 @@ img.logo {
    Switch .conditions to a single-column stacked list
    ════════════════════════════════════════════════════════════════ */
 @media (orientation: landscape) {
-  body {
-    grid-template-rows: 1fr var(--footer-h); /* ← restore stretch in landscape */
-  }
 
   .main {
     grid-template-rows: 1fr;
@@ -355,7 +351,6 @@ img.logo {
     justify-content: unset;
     height: 100%;
     width: 100%;
-    aspect-ratio: 16 / 9;
   }
   
   .video img {
@@ -397,7 +392,7 @@ img.logo {
    ════════════════════════════════════════════════════════════════ */
 @media (orientation: portrait) {
 
-  .main { border-radius: var(--r-sm); }
+  .main { border-radius: var(--r-sm) var(--r-sm) 0 0; }
 
   img.logo { max-height: 56px; }