/* Site-wide search overlay. Shared by every page (one file, referenced by
   <link>, instead of copy-pasted per page like the footer/nav markup) so
   there is exactly one place to fix if the search itself is ever wrong,
   even though the small trigger icon in the nav is still copied per page
   to match how the rest of the nav is built. Expects the site's own
   :root variables (--charcoal, --linen, --ink, --ink-muted, --gold,
   --serif, --serif-sc, --sans) to already be defined by the page. */

.search-veil {
  position: fixed; inset: 0; z-index: 950; background: rgba(15,17,24,0.95);
  display: none; align-items: flex-start; justify-content: center;
  padding: 8vh 1.5rem 2rem; overflow-y: auto;
}
.search-veil.open { display: flex; }

.search-panel { width: 100%; max-width: 640px; }

.search-field-row { position: relative; margin-bottom: 1.4rem; }
.search-field-row svg {
  position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; stroke: rgba(245,240,232,0.4); fill: none; stroke-width: 1.6; pointer-events: none;
}
.search-input {
  width: 100%; background: rgba(245,240,232,0.06); border: 1px solid rgba(245,240,232,0.2);
  color: #fff; font-family: var(--serif), Georgia, serif; font-size: 1.15rem; font-weight: 300;
  padding: 0.85rem 3rem 0.85rem 3rem; outline: none; transition: border-color 0.2s;
}
.search-input::placeholder { color: rgba(245,240,232,0.35); }
.search-input:focus { border-color: var(--gold, #c9963a); }

.search-close {
  position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: rgba(245,240,232,0.5); font-size: 1.4rem;
  line-height: 1; cursor: pointer; padding: 0.4rem; transition: color 0.2s;
}
.search-close:hover { color: var(--gold, #c9963a); }

.search-hint { font-size: 0.72rem; letter-spacing: 0.05em; color: rgba(245,240,232,0.3); margin-bottom: 1.2rem; }

.search-results { display: flex; flex-direction: column; gap: 2px; }
.search-result {
  display: flex; align-items: center; gap: 1rem; padding: 0.7rem 0.8rem;
  text-decoration: none; border-radius: 2px; transition: background 0.15s;
  color: inherit;
}
.search-result:hover, .search-result.active { background: rgba(245,240,232,0.08); }
.search-result img { width: 190px; height: 70px; object-fit: cover; background: #0e1118; flex-shrink: 0; }
.search-result-text { min-width: 0; flex: 1; }
.search-result-title {
  display: block; font-family: var(--serif-sc), Georgia, serif; font-size: 0.98rem;
  color: #fff; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result-meta {
  display: block; font-family: var(--sans), sans-serif; font-size: 0.68rem; letter-spacing: 0.04em;
  color: var(--gold, #c9963a); margin-top: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.search-empty {
  font-family: var(--serif), Georgia, serif; font-style: italic; font-size: 1rem;
  color: rgba(245,240,232,0.4); padding: 1.5rem 0.8rem; text-align: center;
}

@media (max-width: 600px) {
  .search-veil { padding: 5.5rem 1rem 1.5rem; }
  .search-input { font-size: 1rem; }
  .search-result img { width: 130px; height: 48px; }
}