/* Header: centered logo over a one-row nav that keeps every destination
   visible. The link row sits on a light tint of the flavour accent
   (--nav-tint), between thin ink rules like the rules used across the
   site. The homepage switcher retints the row as the flavour changes. */
.masthead{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-end;
  gap:0;
  padding:16px 0 0;
}
.home .masthead{padding:12px 0 0;}
.masthead .lockup{order:1;flex:0 0 100%;margin:0 0 12px;justify-self:center;text-align:center;}
.masthead .nav.left{order:2;}
.masthead .nav.right{order:3;}
.masthead .nav{
  flex:0 0 auto;
  position:relative;z-index:1;
  display:flex;flex-direction:row;flex-wrap:nowrap;
  align-items:center;justify-content:center;
  height:46px;padding-top:0;gap:0;
}
/* Thin rules above and below the link row, full width. */
.masthead::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:46px;
  background:var(--nav-tint);
  border-top:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);
  transition:background .4s ease;
  pointer-events:none;
}
.masthead .nav > a{height:auto;}
.masthead .nav a{
  white-space:nowrap;
  font-size:15px;letter-spacing:.09em;
  color:var(--ink);
  padding:4px 0;
}
.masthead .nav a:hover,.masthead .nav a:focus-visible,
.masthead .nav a.here{border-bottom-color:var(--accent);}
.masthead .nav .pin{width:18px;height:18px;}
/* Pipes between the three destinations. */
.masthead .nav.left a::after{content:"|";margin-left:16px;color:rgba(39,38,29,.35);}
.masthead .nav.right a{margin-left:24px;}
.masthead .nav.right a:first-child::after{content:"|";margin-left:16px;color:rgba(39,38,29,.35);}
@media (max-width:760px){
  .masthead{padding-top:12px;}
  .masthead .lockup{margin-bottom:10px;}
  .masthead .nav{height:44px;}
  .masthead::after{height:44px;}
  .masthead .nav a{font-size:14px;letter-spacing:.06em;}
  .masthead .nav .pin{width:17px;height:17px;}
}
@media (max-width:360px){
  .masthead .nav a{font-size:12.5px;letter-spacing:.04em;}
  .masthead .nav.left a::after,
  .masthead .nav.right a:first-child::after{margin-left:10px;}
  .masthead .nav.right a{margin-left:18px;}
}