/* ============ SITE HEADER — floating solid-black pill (2026-11-03) ============
   Sami's ruling: the glass header is retired. The nav is now a floating
   pill in the "wrot" reference style — SOLID near-black bar, centred,
   the existing links inside it, and the "View work" CTA as a white pill
   button at the right end of the bar. The name "Mohammed Sami" rides in
   its own small black chip at the top-left corner (the site's identity —
   restored in the final review pass); the pill itself is unchanged.
   No backdrop-filter, no translucency anywhere (header or panel). */

.site-header{
  position:fixed;
  top:16px;
  left:0; right:0;
  z-index:200;
  display:flex;
  justify-content:center;
  padding:0 16px;
  pointer-events:none;
  font-family:"Manrope",system-ui,-apple-system,sans-serif;
}
.site-header > *{pointer-events:auto}

/* ---------- desktop / tablet pill ---------- */
.pill-nav{
  display:flex;
  align-items:center;
  gap:2px;
  background:#0B0B0C;
  border-radius:999px;
  padding:6px;
  box-shadow:0 14px 34px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.28);
}
.pill-nav a{
  color:#EDEDEA;
  text-decoration:none;
  font-size:15px;
  font-weight:600;
  line-height:1;
  padding:10px 16px;
  border-radius:999px;
  white-space:nowrap;
  transition:background .25s ease,color .25s ease;
}
.pill-nav a:hover{background:rgba(255,255,255,.10)}
.pill-nav a:focus-visible{outline:2px solid #c9a96a;outline-offset:2px}
.pill-nav a[aria-current="page"]{background:rgba(255,255,255,.13);color:#fff}
/* the CTA: white pill, black text, sits inside the black bar (reference) */
.pill-nav a.nav-cta{
  background:#fff;
  color:#0B0B0C;
  font-weight:700;
  padding:11px 20px;
  margin-left:6px;
}
.pill-nav a.nav-cta:hover{background:#E9E2CF}

/* ---------- desktop name chip: top-left corner, aligned with the pill ----------
   Solid black chip in the same language as the pill, so the name stays
   legible over the dark portal hero AND the cream sections alike.
   Hidden below 1200px, where the centred pill would crowd it (the
   burger bar carries the name at mobile widths anyway). */
.brand-chip{
  position:absolute;
  top:0; left:24px;
  display:flex;
  align-items:center;
  background:#0B0B0C;
  color:#F4F1EA;
  text-decoration:none;
  font-family:"Allura",cursive;
  font-size:28px;
  font-weight:400;
  letter-spacing:0;
  line-height:1;
  padding:10px 22px;
  border-radius:999px;
  white-space:nowrap;
  box-shadow:0 14px 34px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.28);
  transition:background .25s ease;
}
.brand-chip:hover{background:#1B1B1E}
.brand-chip:focus-visible{outline:2px solid #c9a96a;outline-offset:2px}
@media (max-width:1200px){
  .brand-chip{display:none}
}

/* ---------- mobile trigger: same black pill language ---------- */
.pill-burger{
  display:none;
  align-items:center;
  gap:12px;
  background:#0B0B0C;
  color:#EDEDEA;
  border:0;
  border-radius:999px;
  padding:13px 20px;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 14px 34px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.28);
}
.pill-burger .blines{display:flex;flex-direction:column;gap:5px}
.pill-burger .blines span{
  display:block;width:18px;height:2px;border-radius:2px;background:#EDEDEA;
  transition:transform .3s ease,opacity .3s ease;
}
.pill-burger[aria-expanded="true"] .blines span:first-child{transform:translateY(3.5px) rotate(45deg)}
.pill-burger[aria-expanded="true"] .blines span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.pill-burger:focus-visible{outline:2px solid #c9a96a;outline-offset:2px}

/* ---------- mobile panel: solid black card under the trigger ---------- */
.mobile-panel{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  width:min(400px,calc(100vw - 32px));
  transform:translate(-50%,-8px);
  background:#0B0B0C;
  border-radius:24px;
  padding:10px;
  box-shadow:0 24px 48px rgba(0,0,0,.45);
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease,transform .28s ease,visibility .28s;
}
.mobile-panel.open{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mobile-panel a{
  display:block;
  color:#EDEDEA;
  text-decoration:none;
  font-size:16px;
  font-weight:600;
  padding:12px 16px;
  border-radius:14px;
  transition:background .2s ease;
}
.mobile-panel a:hover{background:rgba(255,255,255,.09)}
.mobile-panel a[aria-current="page"]{background:rgba(255,255,255,.12);color:#fff}
.mobile-panel a.nav-cta{
  background:#fff;color:#0B0B0C;font-weight:700;
  text-align:center;border-radius:999px;
  margin-top:6px;padding:13px 16px;
}
.mobile-panel a.nav-cta:hover{background:#E9E2CF}

@media (max-width:900px){
  .pill-nav{display:none}
  /* fix pass (Sami, amendment D): the mobile bar carries his name on
     the LEFT and the hamburger alone on the RIGHT — the "Menu" word
     is gone; the burger's line animation above is untouched. */
  .pill-burger{display:flex;width:100%;justify-content:space-between;padding:14px 22px}
  .pill-burger .brand-name{
    font-family:"Allura",cursive;
    font-size:25px;font-weight:400;letter-spacing:0;color:#F4F1EA;
  }
}
@media (prefers-reduced-motion:reduce){
  .pill-nav a,.mobile-panel,.mobile-panel a,.pill-burger .blines span{transition:none}
}