@font-face {
  font-family: "Roboto Condensed";
  src: url("/mentiras/fonts/roboto-condensed-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

:where(h1, h2, h3, .eyebrow, button, .button, .pill, .timer, .room-code, .stage-question, .stage-answer, .score, .metric strong, .rank, .brand-section) {
  font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
  font-style: italic;
}

:where(h1, h2, .stage-question, .stage-answer, .room-code) { font-weight: 900; }
:where(h3, .eyebrow, button, .button, .pill, .timer, .score, .metric strong, .rank, .brand-section) { font-weight: 800; }

.brand { min-width: 0; gap: 10px; }
.brand-logo {
  display: block;
  width: clamp(138px, 16vw, 230px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px #0008);
}
.brand-section {
  color: var(--white);
  font-size: clamp(.7rem, 1.2vw, 1rem);
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-left: 2px solid var(--pink);
  padding-left: 10px;
}
body[data-page="stage"] .brand-logo { width: clamp(120px, 9vw, 165px); }
body[data-page="play"] .brand-logo { width: clamp(140px, 42vw, 190px); }
body[data-page="admin"] .brand-logo { width: clamp(150px, 17vw, 215px); }

@media (max-width: 560px) {
  .brand-section { display: none; }
  body[data-page="play"] .brand-logo { width: min(44vw, 170px); }
}