/* 404meanings — shared identity strip.
   Option B: the only chrome the four sections have in common. Deliberately
   ~34px so each section's own design is untouched below it. Pure CSS + HTML,
   no JS, so it survives JS-off and reduced-motion (floors 1 and 2).

   Each section pins its own <header> to top:0, so the strip both sits above
   them (z-index) and pushes them down. `top` has no effect on a static
   element, so the header rule is a no-op wherever a header isn't positioned. */
:root { --x404-strip: 34px; }

body { padding-top: var(--x404-strip) !important; }
header { top: var(--x404-strip) !important; }

.x404-strip {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--x404-strip);
  z-index: 99999;
  display: flex; align-items: center; gap: .75rem;
  padding: 0 clamp(.75rem, 4vw, 1.6rem);
  background: #000;
  border-bottom: 1px solid rgba(255, 26, 52, .34);
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: #8d9099;
  -webkit-font-smoothing: antialiased;
}
.x404-strip a { color: #f2f3f5; text-decoration: none; }
.x404-strip a:hover, .x404-strip a:focus-visible { color: #ff1a34; }
.x404-strip a:focus-visible { outline: 2px solid #ff1a34; outline-offset: 3px; }
.x404-strip .x404-slash { color: #ff1a34; }
.x404-strip .x404-sep { color: #3d4048; }
.x404-strip .x404-here { color: #b8bcc4; }
.x404-strip .x404-back { margin-left: auto; }

@media (max-width: 480px) {
  .x404-strip { font-size: 10px; letter-spacing: .08em; }
  .x404-strip .x404-back { display: none; }
}
@media print { .x404-strip { display: none; } body { padding-top: 0 !important; } }