/* CUBELinux universal header — one file, every page. 2026-10-24
   Everything the header needs lives here: layout, palette scope, and the
   CUBE-to-body-margin alignment rule. Pages must NOT define header CSS of
   their own; load this after their page CSS so it wins the cascade. */
*,*::before,*::after{box-sizing:border-box}
/* ---- default site header (from index.html), scoped so page-level header rules cannot fight it ---- */
header.siteheader{display:block;position:relative;overflow:hidden;border-bottom:1px solid var(--line,rgba(216,175,104,.18));padding:clamp(1rem,3vw,1.75rem) clamp(1rem,4vw,2.5rem);background:radial-gradient(60ch 30ch at 12% 30%,rgba(57,215,255,.10),transparent 70%),radial-gradient(40ch 22ch at 6% 40%,rgba(216,175,104,.08),transparent 70%),linear-gradient(180deg,#11151d 0%,var(--bg,#0b0e14) 100%)}
header.siteheader::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(216,175,104,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(216,175,104,.055) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(80% 120% at 8% 40%,#000 0%,transparent 75%);mask-image:radial-gradient(80% 120% at 8% 40%,#000 0%,transparent 75%);pointer-events:none}
header.siteheader .bar{position:relative;z-index:1;max-width:none;width:100%;padding:0 clamp(16px,4vw,72px);display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;margin:0}
header.siteheader .brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0;filter:drop-shadow(0 0 18px rgba(57,215,255,.20)) drop-shadow(0 1px 2px rgba(0,0,0,.6))}
header.siteheader .brand img{display:block;height:clamp(38px,6vw,52px);width:auto}
header.siteheader .brand:focus-visible{outline:2px solid var(--cyan,#39d7ff);outline-offset:6px;border-radius:4px}
header.siteheader nav{margin-left:auto;display:flex;gap:.35rem;flex-wrap:wrap}
header.siteheader nav a{display:inline-flex;align-items:center;min-height:44px;padding:.5rem .9rem;color:var(--mute,#8b98a5);text-decoration:none;font-size:.92rem;border:1px solid transparent;border-radius:6px}
header.siteheader nav a:hover{color:var(--ink,#e8eaeb);border-color:var(--line,rgba(216,175,104,.18));background:rgba(216,175,104,.05)}
header.siteheader .hamb{display:none;margin-left:auto;background:rgba(216,175,104,.06);border:1px solid var(--line,rgba(216,175,104,.18));border-radius:8px;padding:10px;cursor:pointer;align-self:center}
header.siteheader .hamb span{display:block;width:22px;height:2px;background:var(--gold,#d8af68);margin:3px 0;border-radius:2px;transition:transform .2s}
header.siteheader .hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
header.siteheader .hamb[aria-expanded="true"] span:nth-child(2){opacity:0}
header.siteheader .hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media (max-width:880px){
  header.siteheader nav{display:none;width:100%;flex-direction:column;gap:0;margin:8px 0 0}
  header.siteheader nav.open{display:flex}
  header.siteheader nav a{width:100%;min-height:46px;border-bottom:1px solid var(--line,rgba(216,175,104,.18));justify-content:flex-start}
  header.siteheader .hamb{display:block}
}
/* pages whose old in-page banner was demoted: keep the title block, styled like before */
.pagebanner{padding:clamp(1.4rem,3vw,2.2rem) clamp(1rem,4vw,2.5rem) .8rem;border-bottom:1px solid var(--line,rgba(216,175,104,.18))}

/* palette scope: the header always uses the site palette, whatever the page's :root says */
header.siteheader{--line:rgba(216,175,104,.18);--mute:#8b98a5;--ink:#e8eaeb;--bg:#0b0e14}
/* one font for the header on every page, so link widths never drift with the page body font */
header.siteheader{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,sans-serif;line-height:1.65}
/* logo: the CUBE's left edge sits on the body text's left margin (the body margin is unchanged) */
header .brand, header.siteheader .brand{margin-left:calc(-1 * clamp(1rem,4vw,2.5rem) - 0.1042 * clamp(38px,6vw,52px))}