/* The site's one top bar. The markup is injected by /site/nav.js, so every
   page gets the same bar: wordmark, the five links in the owner's order, the
   "Let's build something" button, the motion toggle (on pages with motion)
   and the phone menu. Pages must not restyle .masthead or its parts. */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:700;font-display:swap;src:url(../studio/assets/blog-v2/font-1.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:800;font-display:swap;src:url(../studio/assets/blog-v2/font-1.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../studio/assets/blog-v2/font-0.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../studio/assets/blog-v2/font-0.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(../studio/assets/blog-v2/font-0.woff2) format("woff2")}

:root{--bbb-nav-h:72px}

.masthead{position:fixed;z-index:70;top:0;left:0;right:0;box-sizing:border-box;display:flex;align-items:center;gap:24px;padding:19px 3.2vw;background:#050914e8;border-bottom:1px solid #a6bcdb22;font:14px/1 Inter,Arial,Helvetica,sans-serif;color:#f2f6fd}
/* Pages whose content flows under the bar (the still versions, contact) keep
   it in the flow; the fixed-stage pages keep it over the stage. */
body:not(.is-motion) .masthead{position:sticky}
.masthead *{box-sizing:border-box}
.masthead a:focus-visible,.masthead button:focus-visible{outline:3px solid #a8e9ff;outline-offset:4px}

.wordmark{display:flex;align-items:center;gap:8px;font:750 21px/1 "Inter Tight",Arial,sans-serif;letter-spacing:-.7px;color:#f2f6fd;text-decoration:none;white-space:nowrap}
.wordmark>span{color:#8399b3}
.wordmark i{width:7px;height:7px;border-radius:50%;background:#fb9c43;margin:1px 0 0 4px}

.site-menu{display:contents}
.site-links{display:flex;align-items:center;gap:20px;margin-left:auto}
.site-links a{position:relative;font-size:13px;color:#dfe8f5;text-decoration:none;padding:6px 0;white-space:nowrap}
.site-links a:hover{color:#a8e9ff}
.site-links a[aria-current=page]{color:#fff}
.site-links a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:#a8e9ff}

.masthead .contact{order:3;display:inline-flex;align-items:center;gap:30px;background:#eef4fd;color:#0b1220;padding:10px 16px;border-radius:4px;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap}
.masthead .contact:hover{background:#a8e9ff}
.motion-toggle{order:4;font-size:10px;color:#b8c7db;white-space:nowrap;text-decoration:underline;text-underline-offset:5px}
.motion-toggle:hover{color:#fff}

.menu-toggle{display:none;order:5}

@media(max-width:1050px){
  .masthead{gap:16px}
  .site-links{gap:14px}.site-links a{font-size:11px}
  .wordmark{font-size:18px;gap:5px}
  .masthead .contact{font-size:10px;gap:15px;padding:9px 12px}
}

/* Phones and small tablets: wordmark, button and a menu; the links and the
   motion toggle drop down from the bar. */
@media(max-width:900px){
  .masthead{padding:14px 18px;gap:12px}
  .wordmark{font-size:17px}
  .masthead .contact{margin-left:auto;font-size:10px;padding:9px 10px;gap:10px}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:34px;padding:0;border:1px solid #3b4a5e;border-radius:6px;background:#0b1119;color:#e8eef8;cursor:pointer}
  .menu-icon{display:block;width:14px;height:10px;background:linear-gradient(#e8eef8 0 2px,#0000 2px 4px,#e8eef8 4px 6px,#0000 6px 8px,#e8eef8 8px 10px)}
  .masthead.is-open .menu-icon{background:linear-gradient(45deg,#0000 calc(50% - 1px),#e8eef8 calc(50% - 1px) calc(50% + 1px),#0000 calc(50% + 1px)),linear-gradient(-45deg,#0000 calc(50% - 1px),#e8eef8 calc(50% - 1px) calc(50% + 1px),#0000 calc(50% + 1px));width:12px;height:12px}
  .site-menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;padding:4px 18px 16px;background:#050914f7;border-bottom:1px solid #a6bcdb22;box-shadow:0 24px 40px -20px #000}
  .masthead.is-open .site-menu{display:flex}
  .site-links{flex-direction:column;align-items:stretch;gap:0;margin:0}
  .site-links a{font-size:15px;padding:13px 0;border-bottom:1px solid #a6bcdb1a}
  .site-links a[aria-current=page]{color:#a8e9ff;padding-left:12px;border-left:2px solid #a8e9ff}
  .site-links a[aria-current=page]::after{display:none}
  .motion-toggle{align-self:flex-start;margin-top:14px;font-size:12px}
}
@media(max-width:360px){
  .masthead{padding:12px 14px;gap:10px}
  .wordmark{font-size:15px}
  .masthead .contact{font-size:9px;padding:8px 8px}
}