/* One approved compact lockup, with context-based sizing and clear space. */
:root {
  --brand-logo-height: 52px;
  --brand-clear-space: 12px;
}

.brand-lockup {
  display: block;
  width: calc(var(--brand-logo-height) * 1206 / 528);
  height: var(--brand-logo-height);
  max-width: none;
  object-fit: contain;
  flex: none;
}

.brand-identity {
  display: grid;
  width: max-content;
  gap: 6px;
  flex: none;
}

.brand-identity .brand-subtitle {
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 3px 6px;
  border: 1px solid #4ed9f429;
  border-radius: 4px;
  background: #4ed9f40b;
  color: var(--accent, #4ed9f4);
  text-align: center;
  font-size: 10px;
  font-weight: 740;
  line-height: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Paper sizing stays fixed even in a phone's horizontally scrolling preview. */
.report-brand-logo {
  --brand-logo-height: 48px;
  width: calc(var(--brand-logo-height) * 1206 / 528);
  height: var(--brand-logo-height);
  flex: none;
}
.report-brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.report-brand,
.wr-header .report-brand { gap: var(--brand-clear-space); }

@media screen and (max-width: 760px) {
  :root { --brand-logo-height: 40px; }
  .brand-identity .brand-subtitle { display: none; }
}