.site-search {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(12px, 6vh, 72px) 16px 24px;
    overflow-y: auto;
    background: rgba(9, 12, 11, 0.74);
    backdrop-filter: blur(6px);
}

.site-search[hidden] {
    display: none;
}

.search-panel {
    width: min(880px, 100%);
    padding: clamp(20px, 3.4vw, 36px);
    border: 1px solid #39403d;
    background: #101413;
    color: #eef2ef;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--red);
}

.search-bar > svg {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    color: #ff6b70;
}

.search-bar input {
    flex: 1;
    min-width: 0;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: var(--serif);
    font-size: clamp(25px, 4.4vw, 40px);
    line-height: 1.15;
    appearance: none;
}

.search-bar input:focus {
    outline: none;
}

.search-bar input::-webkit-search-cancel-button,
.search-bar input::-webkit-search-decoration {
    display: none;
    appearance: none;
}

.search-bar input::placeholder {
    color: #8b948f;
}

.search-close {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #4a504d;
    background: transparent;
    color: #eef2ef;
    cursor: pointer;
}

.search-close svg {
    display: block;
    width: 18px;
    height: 18px;
}

.search-close:hover {
    border-color: #ff6b70;
    color: #ff6b70;
}

.search-close:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 2px;
}

.search-results {
    max-height: min(58vh, 620px);
    margin-top: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.search-group-label {
    margin: 24px 0 4px;
    color: #84d7cd;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.search-result {
    display: block;
    width: 100%;
    padding: 14px 10px;
    border: 0;
    border-top: 1px solid #2c332f;
    background: transparent;
    color: inherit;
    text-align: left;
    text-decoration: none;
}

.search-result:hover,
.search-result:focus-visible {
    background: #1a201d;
}

.search-result:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: -3px;
}

.search-result-tag {
    display: block;
    margin-bottom: 5px;
    color: #ff6b70;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.search-result-title {
    display: block;
    font-family: var(--serif);
    font-size: clamp(20px, 2.4vw, 25px);
    font-weight: 400;
    line-height: 1.12;
}

.search-result-excerpt {
    display: -webkit-box;
    margin-top: 5px;
    overflow: hidden;
    color: #b9c0bc;
    font-size: 13.5px;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.search-empty {
    padding: 30px 10px 22px;
}

.search-empty strong {
    display: block;
    color: #fff;
    font-family: var(--serif);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 400;
    line-height: 1.1;
}

.search-empty p {
    max-width: 520px;
    margin: 10px 0 0;
    color: #b9c0bc;
    font-size: 15px;
}

@media (max-width: 580px) {
    .site-search {
        padding: 10px 10px 16px;
    }

    .search-panel {
        padding: 18px 16px 22px;
    }

    .search-results {
        max-height: 64vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .search-close {
        transition: none;
    }
}