/* Header identity. Keep the wordmark as text for accessibility and crisp scaling. */
.brand {
  display:flex;
  align-items:center;
  flex-shrink:0;
  gap:12px;
  color:#f4f1e9;
  font-size:22px;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.65px;
  white-space:nowrap
}
.brand-mark {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:34px;
  height:40px;
  border:1px solid #d9b67599;
  border-radius:8px 2px;
  background:linear-gradient(145deg,#d9b67520,#d9b67505);
  box-shadow:inset 0 0 0 3px #080f16,0 3px 14px #0003;
  color:var(--gold);
  font:italic 27px var(--heading);
  transform:rotate(-6deg)
}
.brand-wordmark {
  display:inline-flex;
  align-items:baseline
}
.brand-hyphen {
  margin:0 2px;
  color:#b89c6f;
  font-weight:500
}
.brand-tcg {
  color:var(--gold);
  font-size:.8em;
  font-weight:700;
  letter-spacing:1.1px
}
@media(max-width:900px) {
  .brand {font-size:20px;gap:10px}
  .brand-mark {width:29px;height:35px;font-size:24px}
}
@media(max-width:600px) {
  .brand {font-size:18px;letter-spacing:-.5px}
  .brand-mark {display:none}
  .brand-tcg {letter-spacing:.8px}
}
@media(max-width:360px) {
  .brand {font-size:16px}
}