/* Canonical public-site logo sizing. Loaded after every page stylesheet. */
.brand{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  padding:20px 16px 10px!important;
  text-decoration:none;
}

.brand .site-logo{
  display:block;
  box-sizing:border-box;
  height:auto!important;
  padding:15px;
  border:1px solid #22324a;
  border-radius:20px;
  background:rgba(15,26,43,.80);
  box-shadow:0 0 15px rgba(0,255,150,.20),0 0 30px rgba(0,255,150,.15);
  transition:transform .2s ease,box-shadow .2s ease;
  object-fit:contain;
}

.brand .site-logo:hover{
  transform:scale(1.02);
  box-shadow:0 0 22px rgba(0,255,150,.32),0 0 40px rgba(0,255,150,.22);
}

/* Desktop, tablet and mobile landscape use the full banner logo. */
.brand .site-logo--full{
  display:block!important;
  width:min(570px,92vw)!important;
  max-width:570px!important;
}

/* Portrait phones use the dedicated compact logo. */
.brand .site-logo--icon{
  display:none!important;
  width:min(250px,72vw)!important;
  max-width:250px!important;
}

html[data-theme="light"] .brand .site-logo{
  background:rgba(255,255,255,.92);
  border-color:var(--border);
  box-shadow:0 8px 24px rgba(18,32,51,.10);
}

@media (max-width:700px) and (orientation:portrait){
  .brand{padding:14px 12px 8px!important}
  .brand .site-logo--full{display:none!important}
  .brand .site-logo--icon{display:block!important}
}

@media (max-width:900px) and (orientation:landscape){
  .brand{padding:12px 12px 8px!important}
  .brand .site-logo--full{
    display:block!important;
    width:min(450px,70vw)!important;
    max-width:450px!important;
  }
  .brand .site-logo--icon{display:none!important}
}