.catalog-directory { padding: 1.75rem 0 0; max-width: 1180px; margin: auto; }
.catalog-directory a, .catalog-directory a:hover, .catalog-directory a:focus { text-decoration: none !important; }
.directory-header {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding: 1.5rem; border: 1px solid var(--ak-line, var(--border-color));
    border-radius: 18px; background: var(--ak-surface, var(--bg-card));
}
.directory-eyebrow { margin: 0 0 .4rem; color: var(--ak-muted, var(--text-secondary)); font-size: .7rem; font-weight: 700; letter-spacing: .1em; }
.catalog-directory h1 { margin: 0 0 .4rem; color: var(--ak-ink, var(--text-primary)); font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.2; letter-spacing: -.04em; }
.directory-description { margin: 0; color: var(--ak-muted, var(--text-secondary)); font-size: .92rem; }
.directory-summary { flex-shrink: 0; margin: 0; color: var(--ak-ink, var(--text-primary)); font-size: .85rem; text-align: right; }
.directory-summary strong { font-size: 1.2rem; }
.directory-summary span { display: block; margin-top: .2rem; color: var(--ak-muted, var(--text-secondary)); font-size: .8rem; }
.directory-links, .directory-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1.25rem 0; }
.directory-links a, .directory-pagination a, .directory-pagination span {
    display: inline-flex; align-items: center; justify-content: center; min-height: 42px;
    padding: .6rem .9rem; border: 1px solid var(--ak-line, var(--border-color));
    border-radius: 10px; background: var(--ak-surface, var(--bg-card));
    color: var(--ak-muted, var(--text-secondary)); font-size: .85rem; font-weight: 600;
}
.directory-links a.active, .directory-pagination [aria-current="page"] { background: #243f64; border-color: #243f64; color: #fff; }
.directory-links a:hover, .directory-pagination a:hover { color: var(--color-primary); border-color: var(--color-primary); }
.directory-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.directory-grid li { min-width: 0; }
.directory-grid:not(.artists-grid) a {
    display: flex; flex-direction: column; gap: .4rem; padding: 1rem;
    background: var(--ak-surface, var(--bg-card)); color: var(--ak-ink, var(--text-primary));
    border: 1px solid var(--ak-line, var(--border-color)); border-radius: 12px; min-height: 90px;
}
.directory-grid:not(.artists-grid) span { color: var(--ak-muted, var(--text-secondary)); font-size: .85rem; }
.catalog-directory .directory-grid.artists-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 1rem !important; }
.catalog-directory .artists-grid a.artist-photo-card { height: 300px; border-radius: 14px !important; }
.catalog-directory .artist-photo-name { font-size: 1.12rem; }
.catalog-directory .artist-photo-content { padding: 1.1rem; }
.catalog-directory a:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; }
.directory-pagination { justify-content: center; margin: 2rem 0; }
@media (max-width: 960px) {
    .catalog-directory .directory-grid.artists-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
    .catalog-directory { padding-top: 1rem; }
    .directory-header { align-items: flex-start; flex-direction: column; gap: .85rem; padding: 1.15rem; }
    .directory-summary { text-align: left; }
    .directory-summary span { display: inline; margin-left: .6rem; }
    .catalog-directory .directory-grid.artists-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .75rem !important; }
    .catalog-directory .artists-grid a.artist-photo-card { height: 230px; }
    .catalog-directory .artist-photo-content { padding: .8rem; }
    .catalog-directory .artist-photo-name { font-size: .95rem; }
    .catalog-directory .artist-photo-count { font-size: .66rem; }
    .catalog-directory .artist-photo-preview { font-size: .67rem; }
    .catalog-directory .artist-photo-arrow { top: 10px; right: 10px; width: 28px; height: 28px; }
}
