:root {
  --pu-accent: #7a3f31;
  --pu-deep: #30231f;
  --pu-paper: #fbf6ed;
}

body::before {
  content: "PROBLEMAS UNIVERSALES · 50 PROBLEMAS · 7 ÁREAS";
  display: block;
  position: relative;
  z-index: 1000;
  padding: 9px 16px;
  background: linear-gradient(90deg, #2b211e, #724233, #2b211e);
  color: rgba(255,255,255,.9);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-align: center;
}

body[data-language="en"]::before,
html[lang^="en"] body::before {
  content: "UNIVERSAL PROBLEMS · 50 PROBLEMS · 7 AREAS";
}

.site-header .brand-mark {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  min-height: 34px;
  border: 1px solid rgba(122,63,49,.3);
  border-radius: 50%;
  color: var(--pu-accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .82rem;
  font-weight: 800;
}

.site-header .site-nav {
  align-items: center;
}

.pu-project-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-left: .35rem;
  border: 1px solid rgba(122,63,49,.24);
  border-radius: 999px;
  padding: .42rem .75rem;
  color: #6b382d;
  font-size: .72rem;
  font-weight: 850;
  text-decoration: none;
}

.pu-garden-link { opacity: .82; }

.pu-language-switcher {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  margin-left: .35rem;
  border-left: 1px solid rgba(60,50,43,.17);
  padding-left: .75rem;
  white-space: nowrap;
}

.pu-language-switcher a {
  color: #66594f;
  font-size: .76rem;
  font-weight: 900;
  text-decoration: none;
}

.pu-language-switcher a[aria-current="page"] {
  color: var(--pu-accent);
}

@media (max-width: 760px) {
  body::before {
    font-size: 9px;
    letter-spacing: .08em;
  }

  .pu-project-link,
  .pu-language-switcher {
    margin: .35rem 0;
  }

  .pu-language-switcher {
    border-left: 0;
    padding-left: 0;
  }
}