/* gautham.co design system: the floating nav bar, shared by every page (gautham.co, the client hub, each project site).
   One white bar, hairline border, where-you-are on the left, this place's pages in the middle, your account on the right. */
:root{--ds-ink:#111;--ds-grey:#6F6F6F;--ds-line:#E7E7E5;--ds-fill:#F4F4F3;--ds-fill2:#ECECEA;--ds-out:cubic-bezier(.23,1,.32,1)}
header.ab{position:sticky;top:12px;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:20px;height:48px;width:min(1520px,calc(100vw - 2*clamp(12px,3vw,40px)));margin:12px auto 0;padding:0 8px 0 18px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid var(--ds-line);border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.03);font:400 14px/1.4 "Inter Tight",system-ui,sans-serif;color:var(--ds-ink);-webkit-font-smoothing:antialiased;inset:auto}
header.ab a,header.ab button{color:inherit;text-decoration:none}
header.ab .mark{justify-self:start;font-weight:500;font-size:14.5px;white-space:nowrap;view-transition-name:ab-mark}
header.ab .mark .mk-g,header.ab .mark .mk-s{color:var(--ds-grey);transition:color .2s ease}
@media (hover:hover){header.ab .mark .mk-g:hover{color:var(--ds-ink)}}
.ab-pages{display:flex;gap:2px;view-transition-name:ab-pages}
.ab-pages a{position:relative;display:flex;align-items:center;gap:7px;padding:6px 11px;border-radius:9px;color:var(--ds-grey)!important;white-space:nowrap;transition:color .2s ease,background-color .2s ease}
.ab-pages a::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:0;margin-left:-12px;transition:opacity .2s ease,margin .3s var(--ds-out)}
.ab-pages a.on{color:var(--ds-ink)!important}
.ab-pages a.on::before{opacity:1;margin-left:0;view-transition-name:ab-on}
@media (hover:hover){.ab-pages a:not(.on):hover{color:var(--ds-ink)!important;background:var(--ds-fill)}}
.ab-acct{justify-self:end;display:flex;gap:6px;align-items:center;white-space:nowrap}
.ab-acct a,.ab-acct button{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:9px;background:var(--ds-fill);color:var(--ds-ink);font-size:13.5px;transition:background-color .2s ease}
.ab-acct .av{width:20px;height:20px;border-radius:50%;background:var(--ds-ink);color:#fff;display:grid;place-items:center;font-size:10.5px;font-weight:600;margin-left:-4px}
.ab-acct button.quiet{background:none;color:var(--ds-grey);padding:6px 8px}
@media (hover:hover){.ab-acct a:hover{background:var(--ds-fill2)}.ab-acct button.quiet:hover{color:var(--ds-ink)}}
header.ab a:focus-visible,header.ab button:focus-visible{outline:2px solid rgba(17,17,17,.35);outline-offset:2px}
@view-transition{navigation:auto}
::view-transition-group(ab-on){animation-duration:.34s;animation-timing-function:var(--ds-out)}
::view-transition-old(root){animation:ab-out .14s ease-in both}
::view-transition-new(root){animation:ab-in .3s var(--ds-out) both}
@keyframes ab-out{to{opacity:0}}
@keyframes ab-in{from{opacity:0;filter:blur(3px)}}
@media (max-width:820px){header.ab{grid-template-columns:auto 1fr;height:auto;padding:8px 8px 8px 14px;row-gap:6px}.ab-pages{grid-column:1/-1;grid-row:2;overflow-x:auto;margin:0 -4px}.ab-pages a{padding:6px 9px}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
@media (max-width:820px){header.ab>span:empty{display:none}}