/* Evil Eye Labs — shared header + footer for every page.
   Layout and behaviour mirror the Evil Eye Pictures site (header, family links,
   mobile menu, footer columns); colours and logos stay Evil Eye Labs.
   Page-specific styles stay inline in each page. */

.site-header,.site-footer{
  --ch-bg:#08090c;
  --ch-fg:#f0f0ee;
  --ch-muted:#888884;
  --ch-dim:#555552;
  --ch-accent:#d1ff00;
  --ch-line:rgba(240,240,238,0.1);
  --ch-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ch-body:"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ch-display:"Anton", "Impact", "Arial Narrow", sans-serif;
  --ch-gutter:clamp(16px, 4vw, 24px);
  --ch-max:1280px;
  --ch-head:64px;   /* keep in sync with --header-h on index.html / rec.html */
}

/* ---------- Header brand: eye mark + spelled-out name (EEL ID "eye only" + label, as on EEP) ---------- */
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;text-decoration:none;transition:opacity .2s ease-out;}
.brand:hover{opacity:0.85;}
.brand img{display:block;width:39px;height:24px;}   /* eel-logo.svg is 79.94 × 49.13 and ignores aspect — keep this ratio */
.brand span{font:400 .7rem/1.6 var(--ch-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ch-fg);white-space:nowrap;}

/* ---------- Footer lockup (type + mark, geometry is load-bearing — see HANDOFF Gotcha 5) ---------- */
.lockup{position:relative;display:block;flex-shrink:0;height:40px;width:calc(40px * 1.478);text-decoration:none;transition:opacity .2s ease-out;}
.lockup:hover{opacity:0.85;}
.lockup .type{position:absolute;left:0;top:0;width:43.78%;height:100%;}
.lockup .mark{position:absolute;left:39.76%;top:6.14%;width:60.24%;height:54.73%;}
.lockup img{display:block;width:100%;height:100%;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;width:100%;
  background:rgba(8,9,12,0.8);border-bottom:1px solid var(--ch-line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.site-header-inner{
  display:flex;align-items:center;gap:32px;height:var(--ch-head);
  width:100%;max-width:var(--ch-max);margin:0 auto;padding:0 var(--ch-gutter);
}
.site-nav{display:flex;align-items:center;margin-left:auto;}
.site-nav > a{
  font:400 .75rem/1.3 var(--ch-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  color:var(--ch-muted);padding:8px 16px;border-bottom:1px solid transparent;
  transition:color .2s ease-out, border-color .2s ease-out;
}
.site-nav > a:hover{color:var(--ch-fg);}
.site-nav > a[aria-current="page"]{color:var(--ch-accent);border-bottom-color:var(--ch-accent);}

/* Studio family — sister-site links, separated from the menu by a hairline */
.family{display:flex;gap:16px;padding-left:24px;border-left:1px solid var(--ch-line);}
.family a,.site-nav .family-m a{
  font:400 .6875rem/1.3 var(--ch-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  color:var(--ch-muted);white-space:nowrap;transition:color .2s ease-out;
}
.family a:hover,.site-nav .family-m a:hover{color:var(--ch-accent);}
.site-nav .family-m{display:none;}

.menu-btn{
  display:none;margin-left:auto;background:none;border:1px solid var(--ch-line);color:var(--ch-fg);
  font:400 .75rem/1 var(--ch-mono);letter-spacing:.1em;text-transform:uppercase;padding:10px 14px;cursor:pointer;
}
.site-header a:focus-visible,.site-header button:focus-visible,.site-footer a:focus-visible{
  outline:2px solid var(--ch-accent);outline-offset:3px;
}

/* Same breakpoints as the EEP site: family links drop out first, then the menu collapses */
@media (max-width:1120px){ .family{display:none;} }

/* Mobile: Menu button opens a full-screen list (same pattern as the EEP site) */
@media (max-width:860px){
  .menu-btn{display:block;}
  /* absolute, not fixed: the header's backdrop-filter makes it the containing block */
  .site-nav{
    position:absolute;top:100%;left:0;right:0;
    height:calc(100vh - var(--ch-head));height:calc(100dvh - var(--ch-head));
    flex-direction:column;align-items:flex-start;gap:0;margin:0;
    background:var(--ch-bg);padding:24px var(--ch-gutter);display:none;overflow:auto;
  }
  .site-nav.open{display:flex;}
  .site-nav > a{font:400 2.5rem/1.25 var(--ch-display);letter-spacing:.01em;color:var(--ch-fg);padding:4px 0;border:0;}
  .site-nav > a[aria-current="page"]{color:var(--ch-accent);}
  .site-nav .family-m{
    display:flex;flex-direction:column;gap:12px;width:100%;
    margin-top:32px;padding-top:24px;border-top:1px solid var(--ch-line);
  }
  .site-nav .family-m a{font-size:.75rem;}
}

/* ---------- Footer ---------- */
.site-footer{padding:64px 0 32px;border-top:1px solid var(--ch-line);background:var(--ch-bg);}
.site-footer-inner{width:100%;max-width:var(--ch-max);margin:0 auto;padding:0 var(--ch-gutter);}
.site-footer .top{
  display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:32px;
  padding-bottom:48px;border-bottom:1px solid var(--ch-line);
}
.site-footer .lockup{height:64px;width:calc(64px * 1.478);}
.site-footer .foot-h{
  margin:0 0 16px;font:400 .7rem/1.6 var(--ch-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ch-dim);
}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.site-footer ul a{font:400 .875rem/1.65 var(--ch-body);text-decoration:none;color:var(--ch-muted);transition:color .2s ease-out;}
.site-footer ul a:hover{color:var(--ch-accent);}
.site-footer .base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;}
.site-footer .base p{margin:0;font:400 .7rem/1.6 var(--ch-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ch-dim);}
.site-footer .base a{color:inherit;text-decoration:none;transition:color .2s ease-out;}
.site-footer .base a:hover{color:var(--ch-accent);}
@media (max-width:860px){
  .site-footer .top{grid-template-columns:1fr 1fr;}
  .site-footer .top > :first-child{grid-column:1/-1;}
}

/* ---------- Generative art (assets/art.js) ----------
   A section with class "art-host" gets a <canvas class="eel-art" data-art="…"> behind its
   content. isolation keeps the canvas above the section's background but under its text. */
.art-host{position:relative;overflow:hidden;isolation:isolate;}
.art-host > .eel-art{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block;}
/* clear a soft hole behind centred copy */
.eel-art.mask-center{
  -webkit-mask-image:radial-gradient(ellipse 44% 50% at 50% 46%, transparent 38%, rgba(0,0,0,.3) 66%, #000 100%);
          mask-image:radial-gradient(ellipse 44% 50% at 50% 46%, transparent 38%, rgba(0,0,0,.3) 66%, #000 100%);
}
/* keep left-aligned copy clean; art lives on the right */
.eel-art.mask-left{
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.15) 38%, #000 72%);
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.15) 38%, #000 72%);
}
/* document pages: full-width band around the title, a little taller than the title itself */
.doc-head{padding-bottom:40px;min-height:200px;}
@media (max-width:760px){
  .eel-art.mask-left{opacity:.5;}
  .eel-art.mask-center{opacity:.75;}
}

@media (prefers-reduced-motion:reduce){
  .site-header *,.site-footer *{transition:none !important;}
}