/* ============================================================
   HEADER
   ============================================================ */
/* content (not the section backgrounds) is masked off at the header line,
   so text simply ends there instead of sliding under the nav */
.masked{
  --sy:0px;
  --cut:calc(var(--header-h) - 12px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0 var(--cut),#000 var(--cut)),linear-gradient(#000,#000);
  mask-image:linear-gradient(to bottom,transparent 0 var(--cut),#000 var(--cut)),linear-gradient(#000,#000);
  -webkit-mask-size:100% 100vh,100% 100%;
  mask-size:100% 100vh,100% 100%;
  -webkit-mask-position:0 var(--sy),0 calc(var(--sy) + 100vh);
  mask-position:0 var(--sy),0 calc(var(--sy) + 100vh);
  -webkit-mask-repeat:no-repeat,no-repeat;
  mask-repeat:no-repeat,no-repeat;
}

.site-header.is-light{color:var(--black)}
.site-header.is-light a{color:var(--black)}
.site-header.is-light .header-cta__box{background:var(--black);color:var(--porcelain)}

.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  height:var(--header-h);
  background:transparent;
  display:flex;
  align-items:center;
}
.site-header .shell{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1.5rem;
}
.header__actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:clamp(.65rem,1.5vw,1.25rem);
}

/* the whole lockup is one bitmap: the wordmark is set in Britti Sans, which
   is not in the repo, so typesetting the name here rendered it in a fallback */
.brand{
  position:relative;
  display:flex;
  align-items:center;
  color:var(--fg-on-dark);
}
.brand:hover{color:var(--fg-on-dark)}
.brand img{height:22px;width:auto}
/* reset.css already does this site-wide; the standalone design pages load this
   file without it, and their own reset makes <picture> a block */
.brand picture{display:contents}
/* the two lockups share one slot: the dark one is stacked over the light one,
   so the brand keeps its width whichever is showing */
.brand__mark--dark{
  position:absolute;
  inset:0 auto auto 0;
  opacity:0;
  transition:opacity .25s var(--ease);
}
.site-header.is-light .brand__mark--dark{opacity:1}

.nav{
  display:flex;
  align-items:center;
  gap:clamp(2rem,4.5vw,5rem);
}
.nav a{
  color:var(--fg-on-dark);
  font-size:clamp(.95rem,.9rem + 0.25vw,1.1rem);
  letter-spacing:.005em;
  padding-block:.35rem;
  white-space:nowrap;
  transition:color .25s var(--ease);
}
.nav a:hover{color:var(--blaze)}
/* the page you are on, light header or not */
.site-header .nav a[aria-current="page"]{color:var(--blaze)}
/* six links: below this width the full gap pushes the 1fr columns (and the
   lockup in them) down to nothing */
@media (max-width:1240px){
  .nav{gap:1.5rem}
}

.locale-switcher{
  display:flex;
  align-items:center;
  gap:.45rem;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.locale-switcher a{
  color:var(--fg-on-dark-muted);
  padding:.35rem .1rem;
  transition:color .25s var(--ease);
}
.locale-switcher a:hover{color:var(--fg-on-dark)}
.header-cta{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  padding:.3rem .35rem .3rem .85rem;
  background:transparent;
  border-radius:6px;
  color:var(--fg-on-dark);
  font-size:clamp(.9rem,.87rem + 0.15vw,1rem);
  line-height:1;
  white-space:nowrap;
  transition:background .3s var(--ease);
}
.header-cta:hover{color:var(--fg-on-dark);background:transparent}
.header-cta__box{
  width:26px;height:26px;
  display:grid;place-items:center;
  background:var(--porcelain);
  color:var(--black);
  border-radius:4px;
  transition:transform .3s var(--ease);
}
.header-cta:hover .header-cta__box{transform:translateX(2px)}
.header-cta__box svg{width:10px;height:10px}

/* Compact header: the lockup and the call to action, nothing else. The nav
   links are dropped rather than folded into a drawer — the footer
   carries the same ones, and the page is a single scroll anyway. */
@media (max-width:1024px){
  .site-header .shell{grid-template-columns:1fr auto;gap:.5rem}
  .nav{display:none}
  .header__actions{gap:.6rem}
  .header-cta__label{display:none}
  .header-cta__box{width:40px;height:40px}
}
.site-header .shell{position:relative}