/* ============================================================
   shared/header.css — the shared site header
   ------------------------------------------------------------
   The header (//mark, name, handle, subhead, nav, glitch effect)
   appears on every page of every site. Visual identity of the
   header is shared; only the --accent colour of the // mark
   and the active nav indicator changes per site.

   Markup contract (every page must include this exactly):

     <div class="page">
       <header class="site-head">
         <div class="identity">
           <h1 class="glitch" id="name">
             <span class="mark">//</span>Eddie Brinton-Quinn
             <span class="handle">ghostwire</span>
           </h1>
           <p class="subhead">2nd Line Support Engineer · 24/7 tinkerer · united kingdom</p>
         </div>
         <nav class="site-nav">
           <a href="..." [aria-current="page"]>label</a>
           ...
         </nav>
       </header>
       <main>...</main>
     </div>

   The shared/header.js script targets #name for the glitch.
   ============================================================ */

/* ---------- header wrapper ---------- */
.site-head {
  display: block;                  /* nav moved below; row 1 = identity */
  padding-bottom: 1.5rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--hairline);
}

/* ---------- identity block ---------- */
.identity h1 {
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-bright);
  line-height: 1.1;
  margin: 0;
  white-space: nowrap;
}
/* The // brand mark. Each site sets its own --accent; the mark
   inherits that colour. Launcher uses red, portfolio uses amber,
   blog uses cyan. Same shape, three colours, one brand. */
.identity h1 .mark {
  color: var(--accent);
  margin-right: 0.35em;
  font-weight: 400;
}
.identity h1 .handle {
  font-weight: 400;
  font-size: 0.45em;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--ink-faint);
  margin-left: 0.5em;
}
.identity .subhead {
  margin: 0.55rem 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}

/* NOTE: identity h1 and .handle have NO font-family declaration here.
   Each site's main.css declares --display, --mono, --sans at :root
   and uses selectors like .identity h1 { font-family: var(--display); }
   to assign them. The blog and portfolio both set --display and --mono
   at site root and override .identity h1 / .identity h1 .handle /
   .identity .subhead font-family in their main.css.

   If a site forgets to override, the header falls back to inherited
   sans (body default in base.css). That's intentional — the header
   type family is site identity, the header layout is shared. */

/* ---------- nav ---------- */
.site-nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin-top: 1.5rem;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
}
.site-nav a {
  color: var(--ink-faint);
  text-align: left;
  /* fixed prefix slot so active-page // doesn't shift siblings */
  padding-left: 1.5em;
  position: relative;
}
.site-nav a::before {
  content: "//";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ink-faint);
  pointer-events: none;
}
.site-nav a:hover { color: var(--accent); }
.site-nav a:hover::before { color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--ink-bright); }
.site-nav a[aria-current="page"]::before { color: var(--accent); }

/* ---------- glitch (shared behaviour) ----------
   The scramble script in shared/header.js targets #name, sets
   data-scrambling="true" during scramble, and swaps character
   text inside the span it inserts. These rules describe the
   visual behaviour during scramble: the noise passes through
   the heading at light weight so the clean semibold reads as
   solid letters dissolving into static and re-emerging.
   The colour during scramble is each site's --accent. */
.glitch { position: relative; display: inline-block; }
.glitch[data-scrambling="true"] { color: var(--accent); }
.glitch[data-scrambling="true"] .glitch-text {
  font-weight: 300;
  letter-spacing: 0.02em;
}