/* One transparent PrevGame artwork across the entire experience. */
.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  line-height: 1;
  text-decoration: none;
}

/* Frame the artwork's transparent margins without stretching or recoloring it. */
.brand-art {
  display: block;
  position: relative;
  flex: 0 0 auto;
  width: var(--brand-width, 166px);
  max-width: 100%;
  aspect-ratio: 1845 / 578;
  overflow: hidden;
}
.brand-art > img {
  display: block;
  position: absolute;
  width: 112.086721%;
  max-width: none;
  height: auto;
  left: -7.533875%;
  top: -28.373702%;
}

body > header {
  flex-wrap: wrap;
  row-gap: 12px;
  padding-block: 14px;
}
body > header nav { margin-left: auto; }
body > header nav .badge { margin-top: 0; }
.question-preview > .brand-art { width: 148px; margin-bottom: 20px; }

@media (max-width: 1100px) {
  .topbar .edition,
  .topbar .tool-label { display: none; }
}
@media (max-width: 900px) {
  .topbar .brand-art { width: 148px; }
}
@media (max-width: 700px) {
  .topbar .brand-art { width: 134px; }
  body > header .brand-art { width: 156px; }
}
@media (max-height: 530px) and (orientation: landscape) {
  .topbar .brand-art { width: 122px; }
  .topbar .brand { min-height: 38px; }
  .topbar { padding-block: 5px; }
}
@media print {
  body > header {
    display: flex;
    position: static;
    padding: 0 0 20px;
    margin-bottom: 20px;
    background: transparent;
    border-bottom: 1px solid #ccc;
  }
  body > header nav { display: none; }
  body > header .brand-art { width: 180px; }
}