/* Loaded after the main stylesheet so mobile density cannot be overridden. */
html,body{max-width:100%;overflow-x:hidden}
main,.catalog-section,.directory,.directory-main,.toolbar,.grid{min-width:0;max-width:100%}

.site-header{height:58px;padding-inline:12px}
.brand{gap:8px;font-size:13px}.brand-mark{width:32px;height:32px}.brand small{font-size:6px}
.hero{padding:28px 12px 26px}.hero h1{font-size:39px}.hero p{font-size:11px}.search{min-height:50px}
.topic-hubs{padding-inline:12px}
.directory{display:block;width:100%;padding:24px 10px 58px;overflow:hidden}
.directory-main{width:100%;overflow:hidden}
.toolbar{width:100%;gap:8px}.toolbar>div{min-width:0}.toolbar h2{white-space:nowrap}
.sort-label{flex:0 0 auto}.sort-label select{max-width:122px;margin-left:0;padding:7px 22px 7px 8px;font-size:10px}

.directory-main .grid{display:grid!important;width:100%!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px 5px!important;padding-top:16px!important;overflow:hidden}
.directory-main .profile-card{width:auto!important;min-width:0!important;max-width:100%!important;overflow:hidden}
.directory-main .portrait{width:100%;min-width:0;aspect-ratio:3/4}
.directory-main .profile-photo{display:block;width:100%;height:100%;object-fit:cover}
.directory-main .card-copy{min-width:0;padding:5px 0 0}
.directory-main .profile-card h3{font-size:10px;line-height:1.35}
.directory-main .alias{height:11px;margin-top:1px;font-size:6.5px}
.directory-main .card-facts{display:none}
.directory-main .card-index{display:none}
.directory-main .quality{left:3px;bottom:3px;max-width:calc(100% - 6px);padding:2px 3px;font-size:5.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.filters{max-width:calc(100vw - 20px)}
.about{padding-inline:16px}

@media(max-width:350px){
  .directory-main .grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .hero h1{font-size:35px}
}