/* Keep the navigation header on the same visual grid as the page below. */
:root{--site-frame:1540px;--site-gutter:34px;--site-inner:1472px}
.topbar{
  display:grid;
  grid-template-columns:240px minmax(520px,880px) 288px;
  justify-content:center;
  column-gap:32px;
  padding-inline:var(--site-gutter);
}
.topbar .brand{
  min-width:0;
  width:240px;
  height:64px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding-left:14px;
}
.topbar .brand img{width:148px;height:34px;object-position:left center;flex:0 0 auto}
.topbar .brand-tagline{
  display:flex;
  align-items:center;
  align-self:center;
  margin:0;
  width:62px;
  max-width:62px;
  min-height:29px;
  padding-left:10px;
  border-left:1px solid #d8d7cf;
  white-space:normal;
  font-size:8.5px;
  line-height:1.12;
  letter-spacing:.12px;
}
.topbar .search{width:100%;max-width:none}
.topbar .topnav{width:100%;margin:0;justify-content:flex-end}
.app-shell{
  width:min(100%,var(--site-frame));
  grid-template-columns:240px minmax(520px,880px) 288px;
  justify-content:center;
}

/* All full-page experiences share the header's frame and gutters. */
.profile-page,.jobs-page,.article-topbar,.article-layout{
  width:min(100%,var(--site-frame));
  max-width:var(--site-frame);
  padding-left:var(--site-gutter);
  padding-right:var(--site-gutter);
}
.firms-page{padding-left:var(--site-gutter);padding-right:var(--site-gutter)}
.firms-page-top,.firms-directory,.firm-detail{width:min(100%,var(--site-inner));max-width:var(--site-inner);margin-left:auto;margin-right:auto}
@media(max-width:1150px){
  .topbar{display:flex;gap:24px}
  .topbar .brand{width:190px;flex:0 0 190px}
  .topbar .brand-tagline{display:none}
  .topbar .search{max-width:620px}
  .app-shell{grid-template-columns:210px minmax(500px,1fr);justify-content:stretch}
}
@media(max-width:800px){
  :root{--site-gutter:14px}
  .topbar{display:flex;gap:12px;padding-inline:14px}
  .topbar .brand{width:142px;height:58px;flex:0 0 142px}
  .topbar .brand img{width:142px;height:39px}
}
@media(max-width:560px){
  .topbar .brand{width:116px;flex-basis:116px}
  .topbar .brand img{width:116px}
}
