/* Approved homepage header, scoped to the reader so PDF typography stays intact.
   Authority: connected-library/index.html + style.css + homepage.css.
   site-consistency.css excludes .homepage; its older destination header rules
   must not override this copy of the actual homepage header. Navigation behavior
   uses the same ../site.js as the homepage. */
.site-header {
 --ink:#16232A;--ink-2:#22333B;--paper:#FFFDF8;--orange:#F28C28;--orange-2:#F79A3E;--orange-ink:#B3561A;
 --line:rgba(22,35,42,.14);--ease:cubic-bezier(.2,.7,.2,1);--header-h:64px;
 font:17px/1.55 "Avenir Next",Avenir,"Helvetica Neue",Helvetica,"Segoe UI",Arial,sans-serif;
 color:var(--ink);position:sticky;top:0;z-index:50;height:var(--header-h);
 background:rgba(247,241,230,.82);backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);
 border-bottom:1px solid var(--line);transition:box-shadow .5s var(--ease);
}
.site-header.scrolled{box-shadow:0 10px 30px -22px rgba(22,35,42,.5)}
.site-header .wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto;height:100%;display:flex;align-items:center;gap:22px}
.site-header a{color:inherit;text-underline-offset:auto}
.site-header :focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.site-header .brand{display:flex;align-items:center;text-decoration:none;flex:none}
.site-header .brand img{max-width:100%;display:block;height:34px;width:auto}
.site-header .site-nav{display:flex;gap:16px;margin-left:auto}
.site-header .site-nav a{text-decoration:none;font-size:14px;font-weight:600;color:var(--ink-2);opacity:.85;white-space:nowrap}
.site-header .site-nav a:hover{opacity:1;color:var(--orange-ink)}
.site-header .site-nav .nav-join{display:none;color:#a84212}
.site-header .header-join{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:13px;line-height:1;padding:10px 14px;border-radius:8px;border:1.5px solid #f28c2880;text-decoration:none;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,border-color .3s;background:linear-gradient(155deg,#fff 0%,#fffdf8 60%,#ffecd7 100%);color:#a84212;box-shadow:0 5px 14px #b3561a20,inset 0 1px 0 #fff}
.site-header .header-join:hover{background:#fff;color:#94380e;border-color:#f28c28;box-shadow:0 8px 20px #b3561a30;transform:translateY(-2px)}
.site-header .nav-toggle{display:none;align-items:center;gap:8px;background:transparent;border:1.5px solid rgba(22,35,42,.3);border-radius:8px;padding:8px 12px;font-size:13px;font-weight:600;cursor:pointer;margin-left:auto}
.site-header .nav-toggle-bars{width:16px;height:2px;background:var(--ink);box-shadow:0 -5px 0 var(--ink),0 5px 0 var(--ink);display:block}
@media(max-width:900px){
 .site-header .header-join{display:none}
 .site-header .nav-toggle{display:inline-flex}
 .site-header .site-nav{display:none;position:absolute;left:0;right:0;top:var(--header-h);flex-direction:column;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 20px 30px -20px rgba(22,35,42,.4);padding:8px 20px 12px;margin-left:0}
 .site-header .site-nav a{padding:12px 0;border-top:1px solid var(--line);font-size:16px;opacity:1}
 .site-header .site-nav .nav-join{display:block}
 .site-header.nav-open .site-nav{display:flex}
}
@media(max-width:420px){.site-header .brand img{height:26px}.site-header .wrap{gap:10px}.site-header .nav-toggle{padding:7px 9px}}
/* This later homepage override intentionally also applies below 420px. */
@media(max-width:1060px){.site-header .site-nav a{font-size:13px}.site-header .brand img{height:30px}}
@media(max-width:800px){.site-header nav{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.site-header,.site-header *{transition:none!important}.site-header .header-join{transform:none!important}}
@media print{.site-header{display:none}}