/* A shared sticky menu on the portfolio and map, including narrow screens. */
:root { --header-offset:166px; }
.header, .home .header {
  position:sticky;
  top:0;
  z-index:1100;
  width:100%;
  margin:0;
  padding-inline:max(5%, calc((100% - 1440px) / 2));
  background:var(--brand-background);
}
html { scroll-padding-top:var(--header-offset); }
[id], .portfolio-section { scroll-margin-top:0; }
.header nav { flex-wrap:wrap; }
@media(max-width:620px) {
  :root { --header-offset:141px; }
  .header, .home .header { height:auto; min-height:125px; padding-block:16px; gap:12px; flex-wrap:wrap; }
  .header nav, .home .header nav { gap:8px 15px; max-width:210px; justify-content:flex-end; }
  .header nav a, .home .header nav a { padding:8px 0; }
}
@media(max-width:359px) {
  :root { --header-offset:200px; }
  .header nav, .home .header nav { max-width:none; width:100%; justify-content:space-between; gap:5px 12px; }
}

/* Both languages share the same header; mobile puts the switch next to the logo. */
.header-actions { display:flex; align-items:center; gap:28px; }
.header .language-switch { display:flex; flex:none; gap:8px; width:auto; max-width:none; font-size:12px; white-space:nowrap; }
.header .language-switch span { margin:0; color:var(--muted); }
.header .language-switch a { padding:9px 2px; }
@media(max-width:900px) {
 .header, .home .header { height:auto; min-height:125px; flex-wrap:wrap; padding-block:16px; gap:12px; }
 .header-actions { display:contents; }
 .header .wordmark { order:0; }
 .header .language-switch { order:1; margin-left:auto; }
 .header .header-actions > nav:not(.language-switch) { order:2; width:100%; max-width:none; justify-content:space-between; gap:8px 15px; }
}