/* Site shell: header, menu and search. Self-contained and scoped to .px-* so it can sit on the design-system page,
   which has its own styles. */
/* Clepso Pixel (display) and Clepso Mono (text): the project's own faces, design/brand/fonts. */
@font-face { font-family: "Clepso Pixel"; src: url("/design-system/brand/fonts/ClepsoPixel-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Clepso Pixel"; font-weight: 700; src: url("/design-system/brand/fonts/ClepsoPixel-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Clepso Mono"; src: url("/design-system/brand/fonts/ClepsoMono-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Clepso Mono"; font-weight: 500 600; src: url("/design-system/brand/fonts/ClepsoMono-Medium.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Clepso Mono"; font-weight: 700; src: url("/design-system/brand/fonts/ClepsoMono-Bold.woff2") format("woff2"); font-display: swap; }
:root { --p-bg:#060907; --p-surface:#0D1410; --p-muted:#16211A; --p-line:#2C4034; --p-text:#EAF7EE; --p-text2:#93B9A0;
  --p-accent:#4DFF8F; --p-amber:#FFC04D; --p-rust:#FF6B5E; --p-cream:#F3F1E7; --p-ink:#06130B;
  --p-pixel:"Clepso Pixel", ui-monospace, monospace; --p-mono: "Clepso Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --p-head: 76px; }

.px-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--p-accent); color: var(--p-ink);
  font: 700 14px var(--p-mono); padding: 10px 14px; text-decoration: none; }
.px-skip:focus { top: 12px; }

/* Floating glass pill (T1 Energy) with boxed mono buttons (SOTF). */
.px-head { position: sticky; top: 0; z-index: 60; height: var(--p-head); display: flex; align-items: center; gap: 12px;
  padding: 0 max(16px, calc((100vw - 1240px) / 2)); font-family: var(--p-mono); box-sizing: border-box;
  background: rgba(6,9,7,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(44,64,52,.6); }
.px-head *, .px-menu *, .px-search * { box-sizing: border-box; }
.px-brand { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 10px; color: var(--p-text);
  text-decoration: none; font: 700 15px var(--p-pixel); letter-spacing: .08em; border: 1px solid var(--p-line); background: rgba(13,20,16,.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); white-space: nowrap; }
.px-brand small { font: 400 11px var(--p-mono); color: var(--p-text2); letter-spacing: .1em; text-transform: uppercase; }
.px-brand svg { width: 22px; height: 22px; display: block; }
.px-pill { display: flex; gap: 2px; margin: 0 auto; padding: 4px; border: 1px solid var(--p-line); border-radius: 999px;
  background: rgba(13,20,16,.72); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.px-pill a { padding: 8px 14px; border-radius: 999px; color: var(--p-text2); text-decoration: none; font-size: 13px; letter-spacing: .03em; white-space: nowrap; }
.px-pill a:hover { color: var(--p-text); background: rgba(77,255,143,.08); }
.px-pill a[aria-current="page"] { color: var(--p-ink); background: var(--p-accent); }
.px-actions { display: flex; gap: 6px; margin-left: auto; }
.px-pill + .px-actions { margin-left: 0; }
.px-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 1px solid var(--p-line);
  background: rgba(13,20,16,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--p-text);
  font: 12px var(--p-mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.px-btn:hover { border-color: var(--p-accent); }
.px-btn kbd { font: 11px var(--p-mono); color: var(--p-text2); border: 1px solid var(--p-line); padding: 1px 5px; }
.px-burger { display: grid; gap: 3px; } .px-burger i { display: block; width: 14px; height: 2px; background: currentColor; }
.px-head a:focus-visible, .px-head button:focus-visible, .px-menu a:focus-visible, .px-menu button:focus-visible,
.px-search input:focus-visible, .px-search a:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 3px; }

/* Full-screen numbered menu (BitcoinOS), the art panel is the dithered sphere. */
.px-menu { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px;
  padding: 16px; background: rgba(6,9,7,.97); font-family: var(--p-mono); color: var(--p-text); }
.px-menu[hidden], .px-search[hidden] { display: none; }
.px-menu-art { position: relative; border: 1px solid var(--p-line); overflow: hidden; background: #030504;
  clip-path: polygon(0 0, 46% 0, 52% 4%, 100% 4%, 100% 100%, 0 100%); }
.px-menu-art canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.px-menu-art p { position: absolute; left: 16px; bottom: 12px; margin: 0; color: var(--p-text2); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.px-menu-list { display: flex; flex-direction: column; justify-content: center; padding: 48px 8px 24px; overflow-y: auto; }
.px-menu-group { margin: 18px 0 6px; color: var(--p-text2); font-size: 12px; letter-spacing: .12em; }
.px-menu-list a { display: grid; grid-template-columns: 40px 1fr auto; align-items: baseline; gap: 12px; padding: 10px 12px;
  border-top: 1px solid var(--p-line); color: var(--p-text); text-decoration: none; }
.px-menu-list a:last-of-type { border-bottom: 1px solid var(--p-line); }
.px-menu-list a span { color: var(--p-text2); font-size: 12px; }
.px-menu-list a b { font: 400 clamp(20px, 3.4vw, 34px)/1.1 var(--p-pixel); letter-spacing: .04em; text-transform: uppercase; }
.px-menu-list a i { font-style: normal; color: var(--p-text2); }
.px-menu-list a:hover, .px-menu-list a[aria-current="page"] { background: var(--p-surface); }
.px-menu-list a:hover b, .px-menu-list a[aria-current="page"] b { color: var(--p-accent); }
.px-menu-list a:hover i { color: var(--p-accent); }
.px-close { position: absolute; top: 16px; right: 16px; }

/* ⌘K search. */
.px-search { position: fixed; inset: 0; z-index: 95; display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh 16px 16px; background: rgba(3,5,4,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--p-mono); }
.px-search-box { width: min(640px, 100%); background: var(--p-surface); border: 1px solid var(--p-accent);
  box-shadow: 0 0 0 4px rgba(77,255,143,.08), 0 24px 80px rgba(0,0,0,.6); }
.px-search label { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--p-line); }
.px-search label span { color: var(--p-accent); font: 14px var(--p-pixel); }
.px-search input { flex: 1; min-width: 0; height: 56px; background: transparent; border: 0; color: var(--p-text); font: 16px var(--p-mono); }
.px-search input::placeholder { color: var(--p-text2); }
.px-search input:focus-visible { outline: none; }
.px-search ul { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow-y: auto; }
.px-search li a { display: block; padding: 10px 12px; color: var(--p-text); text-decoration: none; }
.px-search li a small { display: block; color: var(--p-text2); font-size: 12px; margin-top: 2px; }
.px-search li a em { font-style: normal; color: var(--p-accent); }
.px-search li[aria-selected="true"] a { background: var(--p-muted); box-shadow: inset 3px 0 0 var(--p-accent); }
.px-search .px-empty { padding: 14px 12px; color: var(--p-text2); }
.px-search-hint { margin: 0; padding: 10px 16px; border-top: 1px solid var(--p-line); color: var(--p-text2); font-size: 12px; }

@media (max-width: 900px) { .px-pill { display: none; } .px-actions, .px-pill + .px-actions { margin-left: auto; } .px-btn .px-label { display: none; } }
@media (max-width: 720px) { .px-menu { grid-template-columns: 1fr; } .px-menu-art { display: none; } .px-brand small { display: none; } }
@media (prefers-reduced-motion: reduce) { .px-search, .px-menu { backdrop-filter: none; } }