.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 60px;

  padding-left: var(--space-3);
  padding-right: var(--space-3);

  border-bottom: 0.25px solid var(--border);
}


.header__title{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: var(--space-3);
  color: var(--text);

  font-size: var(--space-3);
}

.header__title:hover{
  color: var(--accent);
  text-decoration: none !important;
}
.site-header { padding: 16px 24px; border-bottom: 1px solid var(--border); display:none; }
.site-header nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.site-header button, .search-dialog button { cursor: pointer; font: inherit; }
.search-dialog { position: fixed; inset: 0; z-index: 1000; background: #0008; padding: 5vh 16px; overflow: auto; }
.search-dialog__body { max-width: 720px; margin: auto; padding: 24px; background: var(--bg, white); color: var(--text, black); border-radius: 16px; }
.search-dialog input { display: block; width: 100%; margin: 16px 0; padding: 12px; font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent, #0676ed); outline-offset: 4px; }