.topbar { gap: 1rem; }
.site-search { position: relative; flex: 1 1 16rem; max-width: 22rem; margin-left: auto; }
.site-search input {
  width: 100%; padding: 0.5rem 0.85rem; font: inherit; font-size: 0.9rem; color: var(--ink);
  background: var(--card-bg); border: 1px solid var(--line); border-radius: 999px;
}
.site-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.site-search-results {
  position: absolute; right: 0; left: 0; top: calc(100% + 0.4rem); z-index: 20; max-height: 70vh; overflow-y: auto;
  background: var(--card-bg); border: 1px solid var(--line); border-radius: 0.8rem; box-shadow: 0 8px 24px rgba(36,31,26,0.14);
  min-width: min(26rem, calc(100vw - 2rem)); padding: 0.3rem;
}
.sr-item { display: block; padding: 0.65rem 0.8rem; border-radius: 0.5rem; text-decoration: none; color: var(--ink); }
.sr-item:hover, .sr-item.is-active { background: var(--card-cream); }
.sr-eyebrow { display: block; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.sr-title { display: block; font-weight: 700; font-size: 0.95rem; line-height: 1.3; margin: 0.1rem 0 0.2rem; }
.sr-snip { display: block; font-size: 0.8rem; line-height: 1.45; color: var(--ink-soft); }
.sr-snip mark { background: var(--card-tan); color: var(--ink); padding: 0 1px; }
.sr-none { margin: 0; padding: 0.8rem; font-size: 0.88rem; color: var(--ink-soft); }
@media (max-width: 40rem) {
  .topbar { flex-wrap: wrap; padding: 0.8rem 1rem; }
  .topbar-tag { display: none; }
  .site-search { flex-basis: 100%; max-width: none; order: 3; }
}