:root{
  --nav-paper:#f7f7f4;
  --nav-ink:#151515;
  --nav-muted:#72726e;
}

.legacy-navbar{display:none!important}

.site-header{
  min-height:132px;
  padding:34px clamp(24px,4vw,72px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:48px;
  background:var(--nav-paper);
  color:var(--nav-ink);
}
.site-header *{box-sizing:border-box}
.site-header .brand{
  width:clamp(180px,18vw,290px);
  flex:0 0 auto;
  display:block;
  margin:0;
  padding:0;
}
.site-header .brand img{display:block;width:100%;height:auto}
.site-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(18px,2.5vw,44px);
  margin:0;
  font:400 11px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.site-nav a,.site-nav summary{color:inherit;text-decoration:none}
.site-nav>a,.site-nav>.work-menu>summary{
  position:relative;
  display:block;
  padding:9px 0;
  white-space:nowrap;
}
.site-nav>a:after,.site-nav>.work-menu>summary:after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:2px;
  height:1px;
  background:currentColor;
  transition:right .25s ease;
}
.site-nav>a:hover:after,.site-nav>a:focus-visible:after,.site-nav>a.active:after,
.site-nav>.work-menu:hover>summary:after,.site-nav>.work-menu:focus-within>summary:after,
.site-nav>.work-menu[open]>summary:after,.site-nav>.work-menu>summary.active:after{right:0}
.site-nav .work-menu{position:relative;margin:0}
.site-nav .work-menu>summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  padding-right:18px;
}
.site-nav .work-menu>summary::-webkit-details-marker{display:none}
.site-nav .work-menu>summary:before{
  content:"";
  position:absolute;
  right:1px;
  top:50%;
  width:5px;
  height:5px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:translateY(-70%) rotate(45deg);
  transition:transform .2s ease;
}
.site-nav .work-menu[open]>summary:before{transform:translateY(-20%) rotate(225deg)}
.site-nav .work-links{
  position:absolute;
  z-index:100;
  top:100%;
  left:-18px;
  min-width:165px;
  padding:18px;
  display:grid;
  gap:12px;
  background:var(--nav-paper);
  box-shadow:0 12px 28px rgba(21,21,21,.06);
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
.site-nav .work-menu:hover .work-links,.site-nav .work-menu:focus-within .work-links,
.site-nav .work-menu[open] .work-links{opacity:1;transform:none;pointer-events:auto}
.site-nav .work-links a{
  padding:2px 0;
  color:var(--nav-muted);
  font-size:9px;
  line-height:1.4;
  letter-spacing:.18em;
  white-space:nowrap;
}
.site-nav .work-links a:hover,.site-nav .work-links a:focus-visible{color:var(--nav-ink)}

@media(max-width:760px){
  .site-header{min-height:auto;padding:24px 18px 28px;align-items:flex-start;gap:24px}
  .site-header .brand{width:160px}
  .site-nav{gap:12px;flex-wrap:wrap;font-size:9px;letter-spacing:.12em}
  .site-nav .work-links{left:auto;right:0}
}
@media(max-width:480px){
  .site-header{display:block}
  .site-header .brand{margin-bottom:22px}
  .site-nav{justify-content:flex-start}
  .site-nav .work-links{left:0;right:auto}
}
@media(prefers-reduced-motion:reduce){.site-header *{transition:none!important}}