diff --git a/html/style.css b/html/style.css
index b3e33c3..0c030dd 100644
--- a/html/style.css
+++ b/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; }