:root { --header-gutter: 48px; --header-height: 90px; --header-logo: 192px; }
@media (max-width: 900px) { :root { --header-gutter: 24px; } }
@media (max-width: 700px) {
  :root { --header-gutter: 22px; --header-height: 76px; --header-logo: 150px; }
}
.page > header, header > .wrap {
  width: min(1240px, calc(100% - 2 * max(var(--header-gutter), env(safe-area-inset-left), env(safe-area-inset-right))));
  height: var(--header-height);
  margin-inline: auto;
  padding-inline: 0;
}
header .brand { width: var(--header-logo); flex: none; line-height: 0; }
header .brand svg { display: block; width: 100%; height: auto; }

header .brand { margin-right: auto; }
header .language-switch { display: inline-flex; align-items: center; gap: 0.55em; margin-left: clamp(10px, 1.6vw, 24px); padding-left: 0.8em; border-left: 1px solid #8290aa; color: white; font: inherit; font-size: 14px; line-height: 1; flex: none; }
header .language-switch a { display: inline-flex; align-items: center; min-height: 32px; color: #c5cede; text-decoration: none; }
header .language-switch a[aria-current], header .language-switch a:hover { color: #65e0e5; }

/* Use the link's text color so the envelope also works on dark panels. */
a[href^="mailto:" i]::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  margin-inline-end: .35em;
  vertical-align: -.14em;
  background-color: currentColor;
  --mail-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='1'/%3E%3Cpath d='m3 6 9 7 9-7'/%3E%3C/svg%3E");
  -webkit-mask: var(--mail-icon) center / contain no-repeat;
  mask: var(--mail-icon) center / contain no-repeat;
}