/* Shared banner branding: the homepage and all guide pages use these rules. */
.nav-brand{--wordmark-width:280px;display:flex;align-items:center;gap:14px;text-decoration:none;white-space:nowrap;flex-shrink:0}
.nav-brand .brand-logo{height:auto;width:var(--wordmark-width);max-width:none;display:block;flex-shrink:0}
.nav-brand .brand-pixie{height:52px;width:auto;max-width:none;display:block;flex-shrink:0}
.nav-brand .byline{font:italic 500 16px/1 Georgia,serif;color:#948775}
.nav-brand .logo-pop-wrap,.nav-brand .pixie-pop-wrap{position:relative;display:inline-flex;flex-shrink:0;cursor:default}
.nav-brand .brand-pop{--plate-w:240px;position:absolute;top:calc(100% + 14px);left:50%;width:var(--plate-w);background:#000;border:1px solid #342d3b;border-radius:10px;padding:10px;box-shadow:0 24px 50px -16px #000b;opacity:0;pointer-events:none;z-index:80;transform:translateX(-50%) translateY(-6px) scale(.94);transition:opacity .18s ease,transform .18s ease}
.nav-brand .brand-pop img{display:block;width:100%;height:auto;border-radius:6px}
.nav-brand .logo-pop-wrap .brand-pop{width:calc(var(--wordmark-width) + 22px)}
.nav-brand .logo-pop-wrap .brand-pop img{background:#f8f7f4}
.nav-brand .brand-pop::before{content:"";position:absolute;top:-7px;left:50%;margin-left:-7px;width:13px;height:13px;background:#000;transform:rotate(45deg);border-left:1px solid #342d3b;border-top:1px solid #342d3b;border-radius:3px}
.nav-brand .logo-pop-wrap:hover .brand-pop,.nav-brand .pixie-pop-wrap:hover .brand-pop{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
@media(max-width:640px){.nav-brand{--wordmark-width:150px;gap:10px}.nav-brand .brand-logo{height:auto}.nav-brand .brand-pixie{height:30px}.nav-brand .byline{font-size:14px}.nav-brand .brand-pop{--plate-w:180px}}
@media(prefers-reduced-motion:reduce){.nav-brand .brand-pop{transition:none}}
/* Give both wordmarks the same dark canvas on every page. */
header.site,.guide-header{background:#0a090b}