/* Pinned site header shared by the static pages and the blog. Self-contained: no dependency on page variables. */
:root{--rr-h:64px}
html{scroll-padding-top:calc(var(--rr-h) + 8px)}
.rr-head{position:sticky;top:0;z-index:1000;height:var(--rr-h);background:rgba(14,14,17,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid #2a2a32;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.2;text-align:left}
.rr-head *{box-sizing:border-box}
.rr-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1120px;height:100%;margin:0 auto;padding:0 24px}
.rr-lockup{display:flex;align-items:center;gap:10px;color:#f4f4f6;text-decoration:none;min-width:0}
.rr-icon{width:36px;height:36px;border-radius:9px;display:block;flex-shrink:0}
.rr-word{height:30px;width:auto;display:block}
.rr-sect{font-size:15px;font-weight:600;color:#a0a0ab;padding-left:12px;margin-left:4px;border-left:1px solid #2a2a32;line-height:24px}
.rr-nav{display:flex;align-items:center;gap:24px}
.rr-nav a,.rr-nav summary{color:#a0a0ab;text-decoration:none;cursor:pointer;background:none;border:0;padding:8px 0;font:inherit;white-space:nowrap}
.rr-nav a:hover,.rr-nav summary:hover,.rr-nav a:focus-visible,.rr-nav summary:focus-visible,.rr-dd[open]>summary,.rr-nav a[aria-current="page"]{color:#f4f4f6}
.rr-nav a:focus-visible,.rr-nav summary:focus-visible,.rr-lockup:focus-visible{outline:2px solid #ff6b6b;outline-offset:3px;border-radius:4px}
.rr-dd{display:block}
.rr-dd summary{list-style:none;display:flex;align-items:center;gap:6px}
.rr-dd summary::-webkit-details-marker{display:none}
.rr-dd summary svg{width:12px;height:12px;transition:transform .15s}
.rr-dd[open] summary svg{transform:rotate(180deg)}
.rr-menu{position:absolute;top:calc(100% - 6px);right:24px;min-width:240px;padding:8px;background:#1a1a20;border:1px solid #2a2a32;border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.55);display:flex;flex-direction:column}
.rr-menu a{display:block;padding:10px 12px;border-radius:8px}
.rr-menu a:hover,.rr-menu a:focus-visible{background:#222229}
@media(max-width:820px){
:root{--rr-h:56px}
.rr-in{padding:0 16px}
.rr-menu{right:16px}
.rr-icon{width:30px;height:30px;border-radius:7px}
.rr-word{height:24px}
.rr-nav{gap:16px}
}
@media(max-width:560px){.rr-sect{display:none}}
@media(max-width:400px){.rr-word{display:none}.rr-nav{gap:14px}}
/* Homepage: the hero already shows the big lockup, so the bar starts with links only and no border, and the
   small lockup fades in once the hero lockup scrolls under the bar (site-header.js adds .rr-shown). */
.rr-quiet{transition:background-color .2s,border-color .2s}
.rr-quiet .rr-lockup{transition:opacity .2s}
.rr-quiet:not(.rr-shown){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
.rr-quiet:not(.rr-shown) .rr-lockup{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.rr-quiet,.rr-quiet .rr-lockup{transition:none}}