.directory-page { max-width: 1440px; margin: 0 auto; }
.directory-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--sp-5);
    margin-bottom: var(--sp-5);
}
.directory-heading h1 { margin: 2px 0; font-family: var(--font-display); font-size: 2rem; }
.directory-heading p { margin: 0; color: var(--text-muted); }
.directory-kicker { color: var(--gold); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.directory-search { display: grid; gap: 5px; color: var(--text-muted); font-size: .78rem; }
.directory-search input {
    width: min(360px, 80vw);
    padding: .65rem .8rem;
    color: var(--text-primary);
    background: var(--bg-raised);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-sm);
}
.directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-4);
}
.directory-country { overflow: hidden; }
.directory-country-head { display: flex; align-items: center; gap: var(--sp-3); }
.directory-country-head img { width: 64px; height: 42px; object-fit: contain; }
.directory-country-head h2 { margin: 0; font-size: 1.2rem; }
.directory-country-head span { color: var(--text-muted); font-size: .78rem; }
.directory-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin: var(--sp-3) 0; }
.directory-stats div { padding: var(--sp-2); background: var(--bg-raised); border-radius: var(--r-sm); min-width: 0; }
.directory-stats strong, .directory-stats span { display: block; overflow-wrap: anywhere; }
.directory-stats span { color: var(--text-muted); font-size: .7rem; }
.directory-section { margin-top: var(--sp-3); }
.directory-section h3 { margin: 0 0 5px; color: var(--text-muted); font-size: .72rem; text-transform: uppercase; }
.directory-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.directory-tag { padding: 3px 7px; border: 1px solid var(--border-subtle); border-radius: var(--r-full); font-size: .75rem; }
.directory-warning { grid-column: 1 / -1; color: var(--text-muted); }
@media (max-width: 640px) {
    .directory-heading { align-items: stretch; flex-direction: column; }
    .directory-search input { width: 100%; }
    .directory-grid { grid-template-columns: 1fr; }
}