/* ----- 16. Search page ----- */
.search-box {
  max-width: 640px;
  margin: 2rem auto 1rem;
  padding: 0 1rem;
  text-align: center;
}
.search-box input[type="search"] {
  width: 100%;
  padding: 0.9em 1.2em;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  background: var(--paper);
  border: 1px solid rgba(58,49,40,.25);
  border-bottom: 2px solid var(--earth);
  color: var(--ink);
  outline: none;
  transition: border-color .2s;
}
.search-box input[type="search"]:focus {
  border-color: var(--seal);
  border-bottom-color: var(--seal);
}
.search-hint { font-size: .85rem; margin-top: .6rem; }

.search-results { max-width: 720px; margin: 2rem auto 4rem; padding: 0 1rem; }
.search-results__group { margin-top: 2rem; }
.search-results__group-title {
  font-family: var(--font-heading);
  font-size: .9rem;
  letter-spacing: .12em;
  color: var(--ash);
  text-transform: uppercase;
  border-bottom: 1px dashed rgba(138,109,59,.35);
  padding-bottom: .4rem;
  margin-bottom: .6rem;
}
.search-result {
  display: block;
  padding: 1rem .4rem;
  border-bottom: 1px solid rgba(58,49,40,.08);
  text-decoration: none;
  color: var(--ink);
  transition: background .15s;
}
.search-result:hover, .search-result:focus { background: rgba(58,49,40,.04); }
.search-result__kind {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .7rem;
  padding: 1px 6px;
  border: 1px solid rgba(58,49,40,.25);
  color: var(--ash);
  margin-right: .6em;
  vertical-align: middle;
  letter-spacing: .05em;
}
.search-result__kind--era    { color: var(--earth); border-color: var(--earth); }
.search-result__kind--chapter { color: var(--indigo); border-color: var(--indigo); }
.search-result__kind--extra   { color: var(--seal); border-color: var(--seal); }
.search-result__kind--essay   { color: var(--ash); }
.search-result__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  display: inline;
  vertical-align: middle;
}
.search-result__title mark {
  background: rgba(170,51,51,.18);
  color: var(--seal);
  font-weight: 700;
  padding: 0 .1em;
  border-radius: 2px;
}
.search-result__summary {
  display: block;
  margin-top: .2em;
  font-size: .85rem;
  color: var(--ash);
}