/* ===== G Wraps OC — shared header (single source of truth for every page) =====
   Uses only design tokens defined by BOTH systems (home inline :root and site.css :root):
   --bg --bg2 --surface --line --line2 --red --red-hi --ink --muted --disp --mono --ease --pad */

header{position:fixed;inset:0 0 auto 0;width:100%;z-index:100;background:transparent;border-bottom:1px solid transparent;transition:background .3s var(--ease),border-color .3s,backdrop-filter .3s}
header.solid,header.fixed{background:rgba(10,8,7,.85);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px var(--pad);max-width:1560px;margin:0 auto}
.brand{display:flex;align-items:center;gap:11px}
.mono-badge{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;font-family:var(--disp);font-size:20px;color:#fff;background:var(--red)}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand .b1{font-family:var(--disp);font-weight:400;letter-spacing:.03em;font-size:19px;color:var(--ink);line-height:1}
.brand .b1 span{color:var(--red)}
.brand .b2{font-family:var(--mono);font-weight:500;letter-spacing:.24em;font-size:9px;color:var(--muted);margin-top:4px;text-transform:uppercase}
nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
nav a.nl{position:relative;font-family:var(--mono);font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:12.5px;color:var(--muted);padding:6px 0;transition:color .2s;background:none;border:0;cursor:pointer}
nav a.nl::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
nav a.nl:hover,nav a.nl.active{color:var(--ink)}
nav a.nl:hover::after,nav a.nl.active::after{transform:scaleX(1);transform-origin:left}
.navquote{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--mono);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13.5px;color:#fff;background:var(--red);padding:16px 28px;border-radius:8px;border:1px solid transparent;transition:background .2s;cursor:pointer}
.navquote:hover{background:var(--red-hi)}
.menu{display:none}
nav .has-sub{position:relative;display:flex;align-items:center}
nav .has-sub .caret{font-style:normal;font-size:9px;margin-left:6px;opacity:.7}
.subnav{position:absolute;top:calc(100% + 16px);left:50%;min-width:240px;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line2);border-radius:10px;box-shadow:0 18px 44px rgba(0,0,0,.5);padding:8px 0;z-index:105;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(6px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s}
nav .has-sub:hover .subnav,nav .has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.subnav a{padding:11px 22px;font-family:var(--mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--muted);white-space:nowrap;border-left:2px solid transparent;transition:color .15s,border-color .15s,background .15s}
.subnav a:hover{color:var(--ink);border-color:var(--red);background:var(--bg2)}
.subnav a.active{color:var(--ink);border-color:var(--red)}

/* mobile: hamburger + inline dropdown */
@media(max-width:900px){
  nav .nl,.navquote,nav .has-sub{display:none}
  .menu{display:inline-flex;align-items:center;font-family:var(--mono);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:12px;background:transparent;border:1px solid var(--line2);border-radius:7px;color:var(--ink);padding:10px 16px;cursor:pointer}
  #hdr.menu-open{background:rgba(10,8,7,.98);backdrop-filter:blur(14px)}
  #hdr.menu-open nav{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:100%;left:0;width:100%;background:rgba(10,8,7,.98);border-top:1px solid var(--line);border-bottom:1px solid var(--line2)}
  #hdr.menu-open nav .nl,#hdr.menu-open nav .navquote{display:flex;padding:16px var(--pad);border:0;border-bottom:1px solid var(--line);font-size:16px;text-align:left;background:transparent;color:var(--ink);border-radius:0;justify-content:flex-start}
  #hdr.menu-open nav .nl::after{display:none}
  #hdr.menu-open nav .navquote{color:var(--red)}
  #hdr.menu-open .has-sub{display:block;width:100%}
  #hdr.menu-open .has-sub .caret{display:none}
  #hdr.menu-open .subnav{display:flex;position:static;transform:none;opacity:1;visibility:visible;min-width:0;background:transparent;border:0;border-radius:0;box-shadow:none;padding:0}
  #hdr.menu-open .subnav a{display:block;padding:14px var(--pad) 14px calc(var(--pad) + 18px);border:0;border-bottom:1px solid var(--line);font-size:15px;color:var(--muted)}
}