/* HEADER
   Cabecalho fixo, barra utilitaria, marca e controle de efeitos. */

.site-header {
  position:relative;
  z-index:20;
  background:rgba(10,10,13,.95);
  border-bottom:1px solid var(--line)
}
.utility {
  height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:.18em;
  color:#b4a9a3;
  border-bottom:1px solid rgba(255,255,255,.06)
}
.utility>div {
  display:flex;
  align-items:center;
  gap:32px
}
.locale {
  display:flex;
  gap:10px;
  align-items:center
}
.locale i {
  height:9px;
  width:1px;
  background:#4e4040
}
.effects-control {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.12em;
  padding:6px 0
}
.effects-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 8px #c5a77380
}
.effects-control[aria-pressed=false] .effects-dot {
  background:#777;
  box-shadow:none
}
#effects-state {
  color:var(--gold-light);
  margin-left:3px
}
.nav-wrap {
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.brand {
  display:flex;
  gap:14px;
  align-items:center;
  font-family:var(--serif);
  font-weight:700;
  font-size:22px;
  line-height:1.2;
  letter-spacing:.025em;
  flex-shrink:0
}
.brand b {
  color:var(--gold)
}
.brand small {
  font-family:var(--sans);
  display:block;
  font-size:7px;
  font-weight:500;
  letter-spacing:.38em;
  margin-top:7px;
  color:#aaa099
}
.brand-sigil {
  width:40px;
  height:48px;
  display:grid;
  place-items:center;
  background:linear-gradient(150deg,#cbaa731a,#b4233215);
  border:1px solid #ad815646;
  clip-path:polygon(0 0,100% 0,100% 73%,50% 100%,0 73%);
  color:var(--gold-light)
}
.brand-sigil svg {
  width:25px;
  height:25px
}
.nav-wrap nav {
  display:flex;
  gap:32px;
  height:100%;
  align-items:center
}
.nav-wrap nav>a {
  position:relative;
  font-size:11px;
  font-weight:500;
  color:#b2aaac;
  padding-block:29px;
  transition:color .25s
}
.nav-wrap nav>a:hover,.nav-wrap nav>a.active {
  color:var(--gold-light)
}
.nav-wrap nav>a::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:14px;
  width:4px;
  height:4px;
  background:var(--gold);
  transform:rotate(45deg) scale(0);
  transition:transform .25s
}
.nav-wrap nav>a.active::after {
  transform:rotate(45deg) scale(1)
}
.account-link {
  border:1px solid #7c61583d;
  padding:10px 18px;
  font-size:11px;
  transition:border-color .2s,background .2s
}
.account-link span {
  color:var(--gold);
  padding-left:18px
}
.account-link:hover {
  border-color:var(--gold);
  background:#c5a7730c
}
.menu-toggle,.mobile-account {
  display:none
}