/* Shared company-site navigation, including the Faynt article. */
:root{--site-nav-height:90px;--site-content-gutter:4.3vw}
html{scroll-padding-top:calc(var(--site-nav-height) + 24px)}
.site-nav{height:var(--site-nav-height);padding:0 var(--site-content-gutter);display:flex;align-items:center;justify-content:space-between;gap:40px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;font-size:18px;letter-spacing:-.045em;font-weight:600}
.brand img{width:41px;height:auto;object-fit:contain}
.desktop-nav{display:flex;gap:33px;margin-left:auto;margin-right:auto;font-size:16px;font-weight:550}
.desktop-nav a{position:relative;padding:14px 0}
.desktop-nav a:after{content:'';height:1px;position:absolute;bottom:5px;left:0;width:0;background:currentColor;transition:width .2s}
.desktop-nav a:hover:after,.desktop-nav a[aria-current]:after{width:100%}
.nav-contact{font-size:16px;font-weight:550;line-height:1.2;min-height:48px;border:1px solid var(--line);padding:13px 22px;border-radius:3px;display:flex;gap:22px;align-items:center}
.nav-on-dark{position:fixed;top:0;left:0;right:0;color:#fff;border-color:#ffffff21}
.nav-on-dark .brand img,.site-footer .brand img{filter:none}
.nav-on-dark .nav-contact{border-color:#ffffff6b}
.mobile-nav{display:none}
@media(min-width:1700px){:root{--site-content-gutter:max(4.3vw,calc((100vw - 1535px)/2))}}
@media(max-width:800px){.site-nav{height:76px;gap:20px}
.desktop-nav{gap:20px;font-size:16px}
.nav-contact{display:none}
.brand{font-size:17px}}
@media(max-width:900px){:root{--site-nav-height:72px;--site-content-gutter:24px}.site-nav{height:var(--site-nav-height)}
.brand{font-size:17px;gap:9px}
.brand img{width:35px}
.desktop-nav{display:none}
.nav-contact{display:none}
.mobile-nav{display:block}
.mobile-nav summary{list-style:none;width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.mobile-nav summary::-webkit-details-marker{display:none}
.mobile-nav summary span{width:26px;height:2px;background:currentColor}
.mobile-nav nav{position:absolute;top:calc(var(--site-nav-height) - 1px);left:0;right:0;max-height:calc(100svh - var(--site-nav-height));overflow-y:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line);padding:22px 24px 30px;box-shadow:0 18px 35px #10212b18}
.mobile-nav nav a{display:block;padding:16px 0;font-size:18px;border-bottom:1px solid var(--line)}}
@media(max-width:800px){.desktop-nav{gap:17px}}
/* One navigation system, including an explicit Home tab. */
.site-nav{
  background:transparent;
  color:var(--ink);
  box-shadow:none;
  transition:background-color .9s ease-in-out,box-shadow .9s ease-in-out,
    border-color .9s ease-in-out,color .9s ease-in-out;
}
.site-nav .nav-contact{border-color:var(--line)}
.desktop-nav{gap:28px}
.mobile-nav nav a[aria-current]{color:var(--orange)}
@media(max-width:900px){.desktop-nav{gap:19px}
.site-nav{gap:12px}}
@media(max-width:800px){.desktop-nav{gap:17px}}
/* Fade from transparent to solid navy after scrolling away from the top. */
.site-nav.nav-on-dark{position:fixed;background:transparent;color:#fff;border-color:#ffffff21}
.site-nav.is-scrolled,.site-nav.nav-on-dark.is-scrolled{background:#091923;color:#fff;border-color:#ffffff26;box-shadow:inset 0 1px 0 #ffffff0a,0 8px 24px #05132033}
.site-nav.is-scrolled .nav-contact{border-color:#ffffff6b}
.site-nav.nav-on-dark .brand img{filter:none}
.site-nav.nav-on-dark .nav-contact{border-color:#ffffff6b}
/* Leave room for the persistent header above article navigation and sidebars. */
.article-toc,.job-facts,.toc-inner{top:calc(var(--site-nav-height) + 24px)}
.article-toc,.toc-inner{max-height:calc(100svh - var(--site-nav-height) - 48px);overflow-y:auto}
.mobile-contents{top:var(--site-nav-height)}
@media(prefers-reduced-motion:reduce){.site-nav,.site-nav.nav-on-dark{transition:none}}

/* Native page transitions preserve links, history, and a stationary header. */
@view-transition{navigation:auto}
.site-nav{view-transition-name:site-navigation}
::view-transition{pointer-events:none}
::view-transition-group(root){z-index:0}
::view-transition-group(site-navigation){z-index:1}
::view-transition-group(*){animation-duration:320ms;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root),::view-transition-new(root),
::view-transition-old(site-navigation),::view-transition-new(site-navigation){mix-blend-mode:normal}
::view-transition-old(root){animation:page-fade-out 320ms cubic-bezier(.22,1,.36,1) both}
::view-transition-new(root){animation:page-fade-in 320ms cubic-bezier(.22,1,.36,1) both}
::view-transition-old(site-navigation){animation:page-fade-out 200ms ease-out both}
::view-transition-new(site-navigation){animation:page-fade-in 200ms ease-out both}
html:active-view-transition-type(forwards){--page-travel:clamp(24px,5vw,72px)}
html:active-view-transition-type(backwards){--page-travel:clamp(-72px,-5vw,-24px)}
html:active-view-transition-type(forwards,backwards)::view-transition-old(root){animation-name:page-slide-out}
html:active-view-transition-type(forwards,backwards)::view-transition-new(root){animation-name:page-slide-in}
@keyframes page-fade-out{to{opacity:0}}
@keyframes page-fade-in{from{opacity:0}}
@keyframes page-slide-out{to{opacity:0;transform:translateX(calc(-1 * var(--page-travel)))}}
@keyframes page-slide-in{from{opacity:0;transform:translateX(var(--page-travel))}}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* Allow for the transparent glow around the ribbon mark. */
.brand { gap: 12px; }
.brand .logo-mark {
  display: block;
  width: auto;
  height: 2.5rem;
  margin-inline: -.25rem;
  flex-shrink: 0;
}
.brand .logo-text {
  font-family: 'Chillax', Arial, sans-serif;
  /* Reserve the finished wordmark width even before its font is available. */
  display: block;
  flex: 0 0 5.92em;
  width: 5.92em;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: lowercase;
  color: inherit;
}
@media(max-width:560px){
  .brand .logo-mark{height:2.125rem}
  .brand .logo-text{font-size:clamp(1.625rem,6.9vw,2rem)}
}