/* Each locale keeps its own wordmark proportions and original editorial copy. */
:is(.site-header,.site-footer) .brand .brand-wordmark {
  width:123px;
  height:auto;
  flex:0 0 auto;
}
html[data-lang=en] :is(.site-header,.site-footer) .brand .brand-wordmark,
html[lang=en] :is(.site-header,.site-footer) .brand .brand-wordmark {
  width:164px;
}
html[data-lang] .hero .hero-brand {
  max-width:none;
  margin:0;
  font-size:0;
  line-height:0;
  letter-spacing:normal;
}
.hero-brand .hero-word {
  display:inline-block;
  max-width:100%;
}
.hero .hero-wordmark {
  width:min(460px,100%);
  height:auto;
  margin-inline:auto;
}
html[data-lang=en] .hero .hero-wordmark {
  width:min(640px,100%);
}
@media(max-width:800px) {
  :is(.site-header,.site-footer) .brand .brand-wordmark {width:113px}
  html[data-lang=en] :is(.site-header,.site-footer) .brand .brand-wordmark,
  html[lang=en] :is(.site-header,.site-footer) .brand .brand-wordmark {width:148px}
  .hero .hero-wordmark {width:min(390px,100%)}
  html[data-lang=en] .hero .hero-wordmark {width:min(560px,100%)}
}
@media(max-width:600px) {
  :is(.site-header,.site-footer) .brand {gap:9px}
  :is(.site-header,.site-footer) .brand .brand-wordmark {width:103px}
  html[data-lang=en] :is(.site-header,.site-footer) .brand .brand-wordmark,
  html[lang=en] :is(.site-header,.site-footer) .brand .brand-wordmark {width:135px}
  .hero .hero-wordmark {width:min(320px,100%)}
  html[data-lang=en] .hero .hero-wordmark {width:min(355px,100%)}
}