.dir-switch { margin: 0 0 12px; }
.dir-search {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
}
.dir-search input[type="search"] {
    flex: 1 1 16rem;
    max-width: 28rem;
    width: auto;
}
.dir-search button { width: auto; }
.dir-count { color: #555; margin: 0 0 12px; }
.dir-letter {
    list-style: none;
    margin: 16px 0 4px;
    font-weight: 800;
    font-size: 1.05rem;
}
.dir-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dir-list li { margin: 0 0 8px; }
.dir-meta {
    display: block;
    color: #666;
    font-size: 0.92rem;
}
.dir-videos {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 12px;
}
.dir-also { margin: 0 0 12px; }
.dir-facts { margin: 0 0 16px; }
.dir-facts div { margin: 0 0 6px; }

@media (max-width: 800px) {
    .dir-search input[type="search"] {
        flex-basis: 100%;
        max-width: none;
    }
}