/* The top bar of every 42pixels page (owner, 31 Oct 2026: "all pages related to 42 pixels ... reuse our header"), as the
   home page's, laid out like the reference's: the mark on the left, the places in the middle, on the right whether
   Talgat's agent is online and "Message me". 36 px of black with a hairline under it, Geist 12/16 semibold in #e6e6e6, a
   count in small grey beside some places, and a link turning orange the instant it is pointed at (owner, 30 Oct 2026:
   "make header exact same as ref same text effect, same height") and blinking back three times as the reference's, the
   page you are on in orange (owner, 1 Nov 2026: "go all do end to end pixel perfect all"; the blink measured frame by
   frame, see the 42pixels-site-design skill). Geist: SIL Open Font License (fonts/Geist-OFL.txt).
   Phones: the places in a menu under the bar (header.js on the pages; the home page's own script there). */
@font-face { font-family: "Geist"; src: url(/fonts/Geist-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url(/fonts/Geist-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
header { position: fixed; inset: 0 0 auto 0; z-index: 8; display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 16px 0 14px; background: #000; box-shadow: 0 1px 0 rgba(255,255,255,.1); font: 600 12px/16px "Geist", system-ui, sans-serif; color: #e6e6e6; }
header a, header button { color: inherit; transition: none; }
header a:hover, header button:hover, header a:focus-visible, header button:focus-visible, header a[aria-current] { color: #ff5c26; }
@keyframes bar-blink {                                 /* 60 ms to half, then back, half, back, half, back: steady at 330 ms */
  0% { opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  16.667% { opacity: .5; animation-timing-function: step-end; } 25% { opacity: 1; animation-timing-function: step-end; }
  41.667% { opacity: .5; animation-timing-function: step-end; } 58.333% { opacity: 1; animation-timing-function: step-end; }
  75% { opacity: .5; animation-timing-function: step-end; } 91.667%, 100% { opacity: 1; }
}
@media (hover: hover) { header a:hover, header button:hover { animation: bar-blink 360ms forwards; } }
header a:focus-visible, header button:focus-visible { animation: bar-blink 360ms forwards; }
header a:active, header button:active { animation: none; }
@media (prefers-reduced-motion: reduce) { header a, header button { animation: none !important; } }
/* Phones: the logo and Menu are words 16 px tall; a finger gets 44 px around each, and the bar looks the same (owner,
   1 Nov 2026, "ok go" to the audit's "make the logo and Menu easier to tap"). */
@media (pointer: coarse) {
  header .logo, header .menu-btn { position: relative; }
  header .logo::after, header .menu-btn::after { content: ""; position: absolute; inset: -14px -8px; }
}
.menu { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 20px; }
.menu button, .menu a { border: 0; background: none; padding: 0; font: inherit; text-decoration: none; cursor: pointer; }
.menu sup { margin-left: 3px; font-size: 9px; font-weight: 600; line-height: 0; color: #757575; vertical-align: 5px; }   /* the reference's count: 9 px, #757575 (4.6:1) */
.menu .menu-only { display: none; }
.bar-right { display: flex; align-items: center; gap: 20px; }
.online { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.online i { width: 6px; height: 6px; border-radius: 50%; background: var(--warm, #ffb47a); box-shadow: 0 0 8px var(--warm, #ffb47a); }
.contact { border: 0; background: none; padding: 0; font: inherit; text-decoration: none; cursor: pointer; }
.menu-btn { display: none; border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
.logo { display: inline-flex; align-items: center; font-size: 15px; letter-spacing: -0.01em; text-decoration: none; }   /* our name alone (owner, 31 Oct 2026: "only 42pixels") */
@media (max-width: 860px) {
  header { padding: 0 16px; }
  .online, .contact { display: none; }
  .menu-btn { display: inline-block; }
  .menu { display: none; position: fixed; left: 0; right: 0; top: 36px; transform: none; flex-direction: column; gap: 0; padding: 8px 16px 16px; background: rgba(6,6,7,.96); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
  .menu.open { display: flex; }
  .menu button, .menu a { padding: 14px 0; font-size: 17px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.06); }
  .menu .menu-only { display: block; }
}