/* One header geometry for the homepage, manual and secondary pages.
   Keep these tokens independent of each page's content grid and palette. */
:root {
  --bar-h: 76px;
  --site-header-inset: 16px;
  --site-header-edge: 48px;
}
html { scrollbar-gutter: stable; scroll-padding-top: calc(var(--bar-h) + 12px); }
@property --bar-ground { syntax: '<color>'; inherits: true; initial-value: #F0EFED; }
.bar {
  --bar-ground: #F0EFED;
  position: sticky; top: 0; z-index: 30;
  box-sizing: border-box;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px;
  height: var(--bar-h); margin: 0;
  padding: var(--site-header-inset) max(var(--site-header-edge), calc((100% - 1200px) / 2)) 0;
  color: #101619;
  font: 400 14px/1.5 Geist, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  transition: --bar-ground .3s ease, color .3s ease;
}
.bar[data-site-bar] { margin-bottom: calc(-1 * var(--bar-h)); }
.bar[data-tone="dark"] { color: #F0EFED; }
.bar::before {
  content: ""; position: absolute; top: 0; bottom: -44px; left: var(--band-x, 0px); right: var(--band-x, 0px);
  z-index: -1; pointer-events: none;
  transition: opacity .26s ease-out, left .3s ease, right .3s ease;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bar-ground) 84%, transparent), color-mix(in srgb, var(--bar-ground) 70%, transparent) 45%, color-mix(in srgb, var(--bar-ground) 28%, transparent) 75%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgb(0 0 0 / .82) 72%, rgb(0 0 0 / .48) 86%, rgb(0 0 0 / .16) 95%, transparent);
  mask-image: linear-gradient(to bottom, #000 58%, rgb(0 0 0 / .82) 72%, rgb(0 0 0 / .48) 86%, rgb(0 0 0 / .16) 95%, transparent);
}
.bar[data-inset] { --band-x: var(--site-header-inset); }
.bar[data-bare]::before { opacity: 0; }
.bar-home { justify-self: start; display: flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; view-transition-name: site-mark; }
.bar-home svg { display: block; width: 94px; height: auto; aspect-ratio: 532 / 166; overflow: visible; }
.bar .top-links { justify-self: end; display: flex; flex-wrap: nowrap; gap: 20px; margin: 0; }
.bar .top-links a { display: flex; align-items: center; min-height: 44px; padding: 0; color: color-mix(in srgb, currentColor 78%, transparent); text-decoration: none; white-space: nowrap; transition: color .3s ease; }
.bar .top-links a[aria-current="page"] { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.bar a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (hover: hover) { .bar .top-links a:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 1023px) { :root { --site-header-edge: 24px; } }
@media (max-width: 599px) {
  :root { --bar-h: 68px; --site-header-inset: 8px; --site-header-edge: 16px; }
  .bar-home svg { width: 64px; }
}
@media (max-width: 399px) { .bar-home svg { width: 52px; } .bar .top-links { gap: 14px; } }
@media (prefers-reduced-transparency: reduce) { .bar::before { inset: 0; background: var(--bar-ground); -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; } }
@media (prefers-reduced-motion: reduce) { .bar, .bar::before, .bar .top-links a { transition: none; } }
@media print { .bar { display: none; } }