/* ATHRTY / Problem Desk — canonical brand bar, release X-H09
   This file owns ALL header selectors. No duplicate responsive overrides elsewhere. */
:root{
  --header-height:56px;
  --header-gutter:clamp(22px,3.3vw,56px);
  --header-background:#0d1a31;
  --header-text:#f3f6f0;
  --header-accent:#c4dec8;
}
.topbar{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  max-width:1740px;
  height:var(--header-height);
  margin:0 auto;
  padding:0 var(--header-gutter);
  background:var(--header-background);
  border:0;
  color:var(--header-text);
  isolation:isolate;
}
.topbar::before,.topbar::after{content:none}
.topbar .brand{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  flex:0 0 auto;
  gap:9px;
  min-width:0;
  min-height:44px;
  border-radius:12px;
  color:var(--header-text);
  text-decoration:none;
  font-size:21px;
  font-weight:790;
  letter-spacing:-.065em;
  line-height:1;
  white-space:nowrap;
  transition:opacity .18s ease;
  transform:none;
}
.topbar .brand:hover{opacity:.86;transform:none}
.topbar .brand:focus-visible{outline:2px solid var(--header-accent);outline-offset:2px}
.topbar .brand-mark{
  display:block;
  flex:none;
  width:19px;
  height:19px;
  color:var(--header-accent);
}
.topbar .brand-name{display:inline-block;line-height:1}
.topbar .brand-end{color:var(--header-accent)}
.topbar .topbar-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-left:auto;
  color:#aec6ba;
  font-size:10px;
  font-weight:680;
  line-height:1;
  letter-spacing:.14em;
  white-space:nowrap;
}
@media(max-width:900px){
  :root{--header-height:50px;--header-gutter:24px}
  .topbar .brand{font-size:19px;gap:8px}
  .topbar .brand-mark{width:18px;height:18px}
  .topbar .topbar-right{font-size:9px}
}
@media(max-width:640px){
  :root{--header-height:46px;--header-gutter:20px}
  .topbar .brand{font-size:18px;gap:8px}
  .topbar .brand-mark{width:17px;height:17px}
  .topbar .topbar-right{font-size:9px;letter-spacing:.13em}
}
@media(max-width:360px){
  :root{--header-gutter:16px}
  .topbar .brand{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  .topbar .brand{transition:none}
}