/* The site's header and footer, ONE copy for every page (the landing included).
   Loaded by the landing (next to site.css) and by every other page (next to Tailwind),
   so the header never changes from page to page (owner, 02.11.2026). Its own tokens, so
   it looks the same whatever stylesheet the page has. */
.ak-head, .ak-foot {
  --ak-bg: oklch(0.175 0.011 65);
  --ak-surface: oklch(0.215 0.013 65);
  --ak-surface-2: oklch(0.25 0.015 65);
  --ak-line: oklch(0.32 0.016 65);
  --ak-line-soft: oklch(0.27 0.014 65);
  --ak-text: oklch(0.95 0.016 85);
  --ak-muted: oklch(0.77 0.02 80);
  --ak-faint: oklch(0.66 0.02 75);
  --ak-ball: oklch(0.91 0.19 116);
  --ak-sans: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ak-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-family: var(--ak-sans);
  color: var(--ak-text);
}
.ak-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); box-sizing: border-box; }

/* header */
.ak-head {
  position: sticky; top: 0; z-index: 20;
  background: oklch(0.175 0.011 65 / 0.88);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--ak-line-soft);
}
.ak-head-in { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.ak-brand {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ak-text);
  font-weight: 750; font-size: 1.15rem; letter-spacing: -0.02em; margin: 0; line-height: 1;
}
.ak-brand svg { width: 26px; height: 26px; color: var(--ak-ball); fill: currentColor; flex: none; }
.ak-nav { display: flex; align-items: center; gap: 6px; }
.ak-link {
  text-decoration: none; color: var(--ak-muted); padding: 8px 12px; border-radius: 8px;
  font-weight: 550; font-size: 0.95rem; line-height: 1.2;
}
.ak-link:hover { color: var(--ak-text); background: var(--ak-surface); }
.ak-link[aria-current="page"] { color: var(--ak-text); }
.ak-gh {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ak-text);
  padding: 7px 12px; border: 1px solid var(--ak-line); border-radius: 999px;
  font-weight: 600; font-size: 0.95rem; margin-left: 6px; white-space: nowrap; line-height: 1.2;
}
.ak-gh svg { width: 17px; height: 17px; flex: none; }
.ak-gh:hover { border-color: var(--ak-ball); }
.ak-gh .stars {
  font-family: var(--ak-mono); font-size: 0.78em; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; background: var(--ak-surface-2); color: var(--ak-text);
}
.ak-gh .stars::before { content: "★ "; color: var(--ak-ball); }

/* footer */
.ak-foot { padding: 36px 0 48px; border-top: 1px solid var(--ak-line-soft); color: var(--ak-muted); font-size: 0.95rem; }
.ak-foot-in { display: grid; gap: 10px; }
.ak-foot p { margin: 0; line-height: 1.6; }
.ak-foot a { color: var(--ak-text); text-underline-offset: 3px; }
.ak-foot a:hover { color: var(--ak-ball); }
.ak-foot .ak-brand { font-size: 1.05rem; }
.ak-foot .ak-brand svg { width: 22px; height: 22px; }
.ak-fine { color: var(--ak-faint); font-size: 0.9rem; }

@media (max-width: 640px) {
  .ak-hide-sm { display: none; }
  .ak-link { padding: 8px 10px; }
  .ak-gh { margin-left: 0; }
  .ak-gh .stars { display: none; }
}