/* Shared site header. */
.site-header {
  position: sticky; top: 0; z-index: 100; height: 62px;
  max-width: var(--max); margin: auto; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 31px; height: 31px; border: 1px solid var(--accent);
  overflow: hidden; border-radius: 3px;
}
.brand-mark i {
  display: block; width: 3px; height: 21px; background: var(--accent);
  transform: skewX(-20deg); opacity: .55;
}
.brand-mark b {
  display: block; width: 2px; height: 25px; background: var(--text);
  transform: skewX(-20deg); margin: 0 3px;
}
.brand-copy { display: flex; flex-direction: column; line-height: .82; letter-spacing: .12em; }
.brand-copy strong { font: 600 9px var(--mono); color: var(--text); }
.brand-copy em {
  font: 700 14px var(--heading); font-style: normal;
  color: var(--accent); letter-spacing: .08em;
}
.header-tools { display: flex; align-items: center; gap: 14px; }
nav {
  display: flex; gap: 22px; font: 400 9px var(--mono);
  color: var(--body); text-transform: uppercase;
}
nav a:hover { color: var(--text); }
.font-picker { display: flex; align-items: center; gap: 5px; }
.font-picker span { font: 500 8px var(--mono); color: var(--muted); letter-spacing: .1em; }
.font-picker select, .theme-toggle {
  border: 1px solid var(--line); border-radius: 4px; background: var(--panel);
  color: var(--text); padding: 5px 7px; font: 400 8px var(--mono);
  text-transform: uppercase; cursor: pointer;
}
.font-picker select { min-width: 135px; }
.theme-toggle { background: transparent; }
.font-picker select:hover, .theme-toggle:hover { border-color: var(--accent); }
.header-identity { display: flex; align-items: center; gap: 18px; min-width: 0; }
.header-dbh-logo {
  display: block; width: auto; height: 65px; max-width: 150px;
  object-fit: contain; flex: 0 0 auto;
}
@media(max-width:900px) {
  .header-tools { gap: 7px; } .font-picker span { display: none; }
  .font-picker select { min-width: 110px; } nav { gap: 11px; }
  .header-dbh-logo { height: 30px; max-width: 130px; }
  .header-identity { gap: 12px; }
}
@media(max-width:760px) {
  nav { display: none; } .site-header { padding: 0 20px; }
  .font-picker select { min-width: 98px; }
}
@media(max-width:700px) { .header-dbh-logo { display: none; } }