/* Use the supplied reconstructed Barriverse wordmark, with its original
   transparent padding cropped in CSS. The PNG itself stays unchanged. */
/* Reuse the actual B/A shapes for the large decorative monogram. */
.watermark {
  width: clamp(430px, 30vw, 720px);
  aspect-ratio: 446 / 191;
  font-size: 0;
  opacity: 1;
  pointer-events: none;
  transform: skewX(-12deg);
  transform-origin: left bottom;
}
.watermark::before,
.watermark::after {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-mask-image: url('barriverse-logo.png?v=1');
  mask-image: url('barriverse-logo.png?v=1');
  -webkit-mask-size: 486.9955% 379.0576%;
  mask-size: 486.9955% 379.0576%;
  -webkit-mask-position: 3.8239% 50.0938%;
  mask-position: 3.8239% 50.0938%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.watermark::before { background: #10131a; opacity: .085; }
.watermark::after {
  background: #6ab3ff;
  opacity: .38;
  /* Follow the diagonal color boundary so the left A stroke stays gray. */
  clip-path: polygon(79.6% 0, 100% 0, 100% 100%, 62.3% 100%);
}

.header .brand {
  display: block;
  flex: 0 0 auto;
  width: clamp(220px, 16vw, 335px);
}
.brand-logo {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 2045 / 191;
  overflow: hidden;
}
.brand-logo img {
  position: absolute;
  display: block;
  width: 106.2103%;
  height: auto;
  max-width: none;
  left: -3.2274%;
  top: -139.7906%;
}
.header .brand-sub {
  display: block;
  margin: 10px 0 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: .65em;
}
@media (max-width: 1100px) {
  .header .brand { width: 220px; }
  .header .brand-sub { font-size: 10px; letter-spacing: .55em; }
}
@media (max-width: 600px) {
  .header .brand { width: min(43vw, 190px); }
  .header .brand-sub { font-size: 8px; letter-spacing: .5em; margin-top: 8px; }
}

.language { align-items: center; gap: 10px; flex-shrink: 0; }
.language button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-bottom: 2px solid transparent;
}
.language-flag {
  display: block;
  width: 18px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 12%);
}
.language-separator { line-height: 1; letter-spacing: 0; opacity: .6; }
@media (max-width: 600px) {
  .header { gap: 10px; }
  .header-actions { gap: 10px; }
  .language { gap: 5px; }
  .language button { gap: 4px; }
  .language-flag { width: 14px; height: 10px; border-radius: 2px; }
  .header .brand { width: min(40vw, 190px); }
}