/* Blog search. Uses the page palette already set on :root.
   The header pill is only shown once the row has room for the full logo. */
.head-search{display:none}
@media (min-width:1100px){
  .head-search{
    flex:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    min-width:44px;
    min-height:44px;
    margin:0;
    padding:0 .9rem;
    border-radius:999px;
    border:1px solid var(--espresso, #2E221C);
    background:#fff;
    color:var(--espresso, #2E221C);
    font:600 .9rem/1 var(--sans, "General Sans", sans-serif);
    cursor:pointer;
  }
  .head-search svg{width:18px;height:18px;flex:none}
  .head-search:hover{background:var(--espresso, #2E221C);color:#fff}
  .home-search{display:none}
}
.search-dialog{
  border:0;
  padding:0;
  width:min(40rem, calc(100vw - 1.5rem));
  max-height:min(80vh, 38rem);
  background:var(--bone, #F8F4EE);
  color:var(--espresso, #2E221C);
  border-radius:18px;
  box-shadow:0 24px 60px rgba(46,34,28,.28);
}
.search-dialog::backdrop{background:rgba(46,34,28,.45)}
.search-dialog[open]{display:flex;flex-direction:column}
.search-bar{display:flex;align-items:center;gap:.5rem;padding:1rem 1rem .4rem}
.search-close{
  flex:none;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--line, rgba(46,34,28,.14));
  background:#fff;
  color:var(--espresso, #2E221C);
  font-size:1.45rem;
  line-height:1;
  cursor:pointer;
}
.search-close:hover{background:var(--espresso, #2E221C);color:#fff}
.search-bar input,.blog-search input{
  width:100%;
  min-height:48px;
  border:1px solid rgba(46,34,28,.28);
  border-radius:999px;
  background:#fff;
  color:var(--espresso, #2E221C);
  font:400 1rem/1.3 var(--sans, "General Sans", sans-serif);
  font-size:16px;
  padding:.75rem 1.15rem;
}
.search-bar input{flex:1;min-width:0}
.search-bar input:focus,.blog-search input:focus{outline:2px solid var(--sage, #8A9782);border-color:var(--sage, #8A9782)}
.search-hint,.search-empty{margin:0;padding:.35rem 0 1rem;color:var(--espresso-2, #463730);font-size:.95rem}
.search-results{list-style:none;margin:0;padding:.15rem .55rem 1rem;overflow:auto}
.search-results a{display:block;padding:.8rem .7rem;border-radius:12px;text-decoration:none;color:inherit}
.search-results a:hover,.search-results a:focus-visible{background:#fff}
.search-results h3{font-family:var(--serif, Georgia, serif);font-weight:400;font-size:1.22rem;line-height:1.25;margin:.15rem 0 .3rem}
.search-results p{margin:0;color:var(--espresso-2, #463730);font-size:.92rem}
.search-empty-links{display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;margin:.7rem 0 0}
.search-empty-links a{color:var(--clay-dark, #93503A);font-weight:600}
.blog-search{margin:1.35rem 0 0;max-width:40rem}
.home-search{padding:.85rem 0 1rem;background:#fff;border-bottom:1px solid var(--line, rgba(46,34,28,.14))}
.home-search .blog-search{margin:0;max-width:46rem}
@media (min-width:720px){
  .home-search{padding:1.05rem 0 1.15rem}
  .home-search .blog-search{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:1rem}
  .home-search .blog-search label{margin:0}
}
.blog-search label{
  display:block;
  margin:0 0 .45rem;
  font:600 .72rem/1.2 var(--sans, "General Sans", sans-serif);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sage-deep, #56634F);
}
.blog-search-panel{max-width:42rem;margin-top:.35rem}
.blog-search-panel[hidden],.search-empty[hidden],.search-hint[hidden]{display:none}