/* Responsive shell: stage grows to fill the viewport; footer stays in normal flow. */
html{min-height:100%}body{min-height:100svh;display:flex;flex-direction:column}main{flex:1;display:flex;flex-direction:column;min-width:0}.stage{flex:1;height:auto;min-height:420px;overflow:visible}iframe{display:block;height:100%;width:100%}.bar{margin:0;padding:8px 5% 12px;flex-wrap:wrap;gap:12px}.steady-logo{width:clamp(130px,13vw,180px)}nav{min-width:0}nav button{min-height:44px}.controls{flex-wrap:wrap;gap:18px}.controls button{min-height:44px}footer{padding:12px 5%;align-items:center;gap:6px 20px}footer a{display:inline-flex;align-items:center;min-height:44px}footer span{line-height:1.5}.fallback-links{padding:12px 5%;line-height:1.8}.fallback-links a{text-decoration:underline}
@media(max-width:700px),(max-width:900px) and (orientation:portrait){.stage{height:auto;min-height:calc(320px + 56.28vw)}.bar{margin:0;padding:8px 6%;display:block}nav{display:flex;width:100%;padding-top:12px}nav:before{display:none}nav button{flex:1;min-width:0;padding:10px 5px;font-size:8px}.controls{display:flex;justify-content:space-between;gap:8px;font-size:10px}.steady-logo{left:6%;top:26px;width:145px}footer{padding:10px 6%;font-size:9px}footer span:last-of-type{flex-basis:100%}}
@media(max-height:600px) and (orientation:landscape){.stage{min-height:240px}}

/* Draw arrows consistently, including on iOS emoji keyboards. */
.arrow-icon{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.1em}a .arrow-icon{margin-left:.3em}.copy>a>span{display:inline-flex}.copy>a>span .arrow-icon{margin-left:0}

@media(max-width:700px),(max-width:900px) and (orientation:portrait){
 .stage{min-height:calc(310px + 56.28vw)}
 .steady-logo{top:34px;width:clamp(120px,34vw,145px)}
 .bar{padding:4px 6% 6px}nav{padding-top:8px}nav button{padding:8px 5px;min-height:44px;line-height:1.4}nav button:before{font-size:7px;margin-bottom:4px}
 .controls{gap:6px}.controls button{min-height:44px}.time{min-width:86px}
 footer{display:grid;grid-template-columns:1fr auto;gap:0 10px;padding:6px 6%;font-size:9px}
 footer>span:first-child{grid-column:1;grid-row:1}footer>a:not(.whatsapp){grid-column:2;grid-row:1}
 footer>span:last-of-type{grid-column:1/-1;grid-row:2;padding:4px 0}
 footer>.whatsapp{grid-column:1/-1;grid-row:3}footer a{min-height:40px}
}

@media(max-width:700px),(max-width:900px) and (orientation:portrait){
 .steady-logo{top:18px;transform:translateY(calc((44px - clamp(105px,30vw,145px)*.23)/2));width:clamp(105px,30vw,145px)}
 footer{padding:4px 6%;gap:0 10px}footer a{min-height:36px}
 footer>span:last-of-type{padding:2px 0 4px}
}

/* Keep all footer items aligned on one baseline. */
@media(max-width:700px),(max-width:900px) and (orientation:portrait){footer{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px;padding:4px 6%;font-size:clamp(6px,1.7vw,9px)}footer>*{white-space:nowrap}footer>span:last-of-type{display:inline;flex-basis:auto;padding:0}footer a{min-height:36px}}

/* Homepage links work without JavaScript. */
a.steady-logo{pointer-events:auto;display:block}a.steady-logo>img{display:block;width:100%;height:auto}footer .footer-brand{grid-column:1;grid-row:1}footer>a:not(.whatsapp):not(.footer-brand){grid-column:2;grid-row:1}

footer .instagram-link{display:inline-flex;justify-content:center;flex:none;width:24px;min-width:24px}footer .instagram-link svg{display:block;width:14px;height:14px}@media(max-width:360px){footer{gap:5px}footer .instagram-link{width:20px;min-width:20px}}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}