/* TraceCivic brand layer. Colours come ONLY from assets/brand/brand-tokens.css (--tc-*), so a
   refreshed asset set drops in. To switch the wordmark typeface change ONLY --font-brand. */
@font-face { font-family: "Outfit"; src: url("../assets/fonts/Outfit-VF.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
:root {
  --font-brand: "Outfit", var(--font-body);
  /* serif option: --font-brand: "Merriweather", var(--font-display);  (needs its own @font-face) */
}
.site-header { background: var(--tc-bg); }
.brand { gap: 10px; }
.brand__mark { width: auto; height: 38px; display: block; }
.brand__name { font-family: var(--font-brand); font-weight: 600; font-size: 1.4rem; letter-spacing: 0; line-height: 1; }
.brand__trace { color: var(--tc-cream); }
.brand__civic { color: var(--tc-gold); }
@media (max-width: 760px) { .brand__mark { height: 36px; } .brand__name { font-size: 1.25rem; } }
/* Tablet widths: inline nav plus the longer wordmark must still fit on one row. */
@media (min-width: 761px) and (max-width: 940px) {
  .site-header__inner { gap: var(--s3); }
  .brand__name { font-size: 1.2rem; }
  .brand__mark { height: 34px; }
  .site-nav a { padding: 8px 8px; }
  .header-search { max-width: 200px; }
}