/* ============================================================
   FLOATING HEADER — ported from ../isladjan-header-reference.html
   Two floating pill buttons (logo left, MENU right) pinned to the
   top corners, hovering over the parallax homepage.
   Reverse-engineered from isladjan.com/work/2/.
   ============================================================ */

/* Fonts are also declared in footer.css on this page; re-declaring the
   same family+src is a harmless no-op (the browser dedupes by source),
   and keeps the header self-contained. */
@font-face{
  font-display:fallback; font-family:vcr-osd-mono; font-style:normal; font-weight:400;
  src:url(assets/fonts/vcr_osd_mono01.woff2) format("woff2");
}
@font-face{
  font-display:fallback; font-family:ibm-plex-mono; font-style:normal; font-weight:400;
  src:url(assets/fonts/ibmplexmono.woff2) format("woff2");
}

/* ============================================================
   FLOATING HEADER SHELL
   Transparent, fixed, full width. The bar itself ignores the mouse
   (pointer-events:none) so it never blocks the parallax scroll; only
   the two buttons re-enable pointer events.
   z-index 100 keeps the pills ABOVE the pop-out menu overlay (menu.css
   --menu-z:90) so the button stays clickable to close; the pixel-grid
   (menu-z+20 = 110) still covers everything during the render flash.
   Tokens are scoped here (not :root) so they can't collide with
   footer.css's variables.
   ============================================================ */
.site-header{
  --salmon:#f9a392;   /* live header bg  rgb(249,163,146) */
  --ink:#000;
  --font1:"vcr-osd-mono", ui-monospace, Menlo, Consolas, monospace;
  --font2:"ibm-plex-mono", ui-monospace, Menlo, Consolas, monospace;

  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:18px clamp(16px, 3vw, 40px);
  pointer-events:none;
}
.site-header *{ box-sizing:border-box; }
.site-header .float-btn{ pointer-events:auto; }

/* ============================================================
   FLOATING BUTTON — shared chip styling (retro pixel float)
   square corners + hard offset shadow so it reads as "floating"
   ============================================================ */
.site-header .float-btn{
  --shadow:3px 3px 0 rgba(0,0,0,.85);
  display:inline-flex;
  align-items:center;
  height:38px;
  padding:0 16px;
  background:var(--salmon);
  color:var(--ink);
  border:2px solid var(--ink);
  box-shadow:var(--shadow);
  font-family:var(--font1);
  font-size:1.1rem;
  letter-spacing:1px;
  line-height:1;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, box-shadow .12s ease;
}
/* press-in on click for a tactile feel */
.site-header .float-btn:active{
  transform:translate(3px,3px);
  box-shadow:0 0 0 rgba(0,0,0,.85);
}
.site-header .float-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* ============================================================
   LOGO BUTTON — "[ CSURETTE.COM ]"; brackets visible at rest,
   slide apart ±10px on hover. Text scrambles in on load (header.js).
   ============================================================ */
.site-header .logo{
  display:flex;
  align-items:center;
}
.site-header .logo .scramble-text{
  margin:0 10px;              /* live: margin 0 10px */
  white-space:nowrap;
}
.site-header .logo .bracket{ transition:transform .3s; }
.site-header .logo:hover .bracket:first-child,
.site-header .logo:focus-visible .bracket:first-child{ transform:translateX(-10px); }
.site-header .logo:hover .bracket:last-child,
.site-header .logo:focus-visible .bracket:last-child{ transform:translateX(10px); }

/* ============================================================
   MENU BUTTON — "[ MENU ]" that opens into "[ ME X NU ]" on hover
   ============================================================ */
.site-header .menu-btn .text-btn{
  display:flex;
  align-items:center;
  letter-spacing:1px;
  line-height:.9;
}
/* DEFAULT "[ MENU ]": the X holds 16px of (invisible) width; ME/NU are
   pulled ±8px inward to close over it so the four letters read solid. */
.site-header .menu-btn .me{ transform:translateX(8px); max-width:2ch; transition:transform .3s, max-width .3s, opacity .3s; }
.site-header .menu-btn .nu{ transform:translateX(-8px); max-width:2ch; transition:transform .3s, max-width .3s, opacity .3s; }
.site-header .menu-btn .x-sign{
  font-family:var(--font2);
  font-size:1.2rem;
  font-weight:900;
  width:16px;                /* holds the seam; ME/NU pull ±8px to close it */
  text-align:center;
  opacity:0;
  transition:opacity .3s;
}
/* MENU brackets are always visible (unlike the logo's). */
.site-header .menu-btn .bracket{ opacity:1; transition:transform .3s; }
/* HOVER -> "[  ME X NU  ]": ME/NU release, the X fades in between them,
   and the brackets slide apart to frame the opened word. */
.site-header .menu-btn:hover .me,
.site-header .menu-btn:focus-visible .me{ transform:translateX(0); }
.site-header .menu-btn:hover .nu,
.site-header .menu-btn:focus-visible .nu{ transform:translateX(0); }
.site-header .menu-btn:hover .x-sign,
.site-header .menu-btn:focus-visible .x-sign{ opacity:1; }
.site-header .menu-btn:hover .bracket:first-child,
.site-header .menu-btn:focus-visible .bracket:first-child{ transform:translateX(-10px); }
.site-header .menu-btn:hover .bracket:last-child,
.site-header .menu-btn:focus-visible .bracket:last-child{ transform:translateX(10px); }

/* OPEN STATE — the button collapses "[ MENU ]" down to "[ X ]" (the
   hamburger->X morph). menu.js toggles .active on #menuBtnWrapper while
   the pop-out menu is open. Placed after the hover rules so it wins. */
.site-header .menu-btn-wrapper.active .me,
.site-header .menu-btn-wrapper.active .nu{ transform:none; max-width:0; opacity:0; overflow:hidden; }
.site-header .menu-btn-wrapper.active .x-sign{ opacity:1; }

/* The overlay menu itself now lives in the menu-handoff package
   (menu.css / menu.js, scoped under .header-nav). The old venetian-blind
   overlay CSS was removed when it was swapped out. */

/* ============================================================
   RESPONSIVE — trim the chips a touch on small screens
   ============================================================ */
@media (max-width:490px){
  .site-header{ padding:12px; }
  .site-header .float-btn{ height:34px; padding:0 12px; font-size:1rem; }
}