/* Compact top bars; desktop artwork fills the width at its original ratio. */
:root{--site-top-height:90px;--site-header-height:64px}
html{scroll-padding-top:calc(var(--site-header-height) + 8px)}
body>.announcement{min-height:26px;padding:1px 16px;gap:18px}
body>.announcement>span{line-height:1.3}
body>.announcement>span:first-child,body>.announcement>span:last-child{font-size:16px}
body>header{height:64px;min-height:64px}
body>header .wordmark{flex-basis:140px;width:140px}
body>header .wordmark svg{max-height:52px}
@media(max-width:640px){
 body>.announcement{min-height:26px;padding:2px 10px;gap:8px}
 body>header{height:auto;min-height:84px;padding:5px 5%;row-gap:2px}
 body>header .wordmark{width:128px}
 body>header .local-time{line-height:1.2}
}
@media(max-width:360px){body>header .wordmark{width:112px}}
@media(min-width:641px),(orientation:landscape){
 main>.hero>.scene-viewport{
  --scene-fit-height:max(140px,calc(100svh - var(--site-top-height)));
  display:flex;align-items:center;justify-content:center;
  height:var(--scene-fit-height);max-height:none;padding:0;
  overflow:hidden;background:var(--ink);
 }
 main>.hero>.scene-viewport>.scene{
  width:min(100%,calc(var(--scene-fit-height)*2.3232077764));
  max-width:none;flex:none;margin:0 auto;aspect-ratio:1912/823;
 }
}
@media(min-width:1101px),(min-width:641px) and (min-height:601px){
 main>.hero>.scene-viewport{height:auto;max-height:none}
 main>.hero>.scene-viewport>.scene{width:100%;max-width:none;margin:0}
}