/* Shared Alquist blog chrome — header and pill buttons, used by the blog home and every post.
   Relies on the page defining the "Alquist Switzer" font face. */
:root{
  --site-header-h:64px;
  --site-header-gutter:32px;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Set rendering here rather than inheriting it, so the header and pills look
   the same whatever page they sit on. */
.site-skip,.site-header,.alq-pill{
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-kerning:normal;font-synthesis:none;text-rendering:optimizeLegibility;
}
.site-header *,.site-header *::before,.site-header *::after{box-sizing:border-box}

.site-skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#1e1c1b;color:#fff;padding:8px 12px;border-radius:1000px;font:500 15px/21px "Alquist Switzer",Switzer,Arial,sans-serif;text-decoration:none}
.site-skip:focus{left:8px}

.site-header{
  position:sticky;top:0;z-index:50;box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:var(--site-header-h);padding:0 var(--site-header-gutter);
  background:color-mix(in srgb,#f2ece2 88%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(30,28,27,.08);
  color:#1e1c1b;
}
.site-header__brand{display:flex;align-items:center;gap:14px;color:inherit;text-decoration:none}
.site-header__brand svg{display:block;width:113px;height:21px}
.site-header__label{
  padding-left:14px;border-left:1px solid rgba(30,28,27,.25);
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;font-weight:500;line-height:16px;letter-spacing:.12em;text-transform:uppercase;
}
.site-header a:focus-visible{outline:2px solid #1e1c1b;outline-offset:4px;border-radius:4px}

/* Pill button — matches alquistrobotics.com's .alq-btn */
.alq-pill{
  display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;height:32px;padding:0 12px;
  border-radius:1000px;background:#1e1c1b;color:#fff;
  font-family:"Alquist Switzer",Switzer,Arial,sans-serif;font-size:15px;font-weight:500;line-height:21px;
  letter-spacing:0;white-space:nowrap;text-decoration:none;transition:background-color .2s ease;
}
.alq-pill:hover,a:hover>.alq-pill{background:#3a3634}
.alq-pill:focus-visible{outline:2px solid #1e1c1b;outline-offset:3px;border-radius:1000px}
/* Beat the article's generic link colour and underline */
.alq-article a.alq-pill,.alq-article a.alq-pill:hover{color:#fff;text-decoration:none}

/* Posts: keep the article's sticky contents and anchor targets below the header */
body .alq-article{--article-header-offset:var(--site-header-h)}

@media (max-width:767px){
  :root{--site-header-h:56px;--site-header-gutter:20px}
}
@media (max-width:479px){
  .site-header__brand{gap:10px}
  .site-header__brand svg{width:96px;height:18px}
  .site-header__label{padding-left:10px}
}
@media print{
  .site-header{display:none}
}