.dir-head{padding-top:var(--s-7);text-align:center;margin-top:var(--nav-h)}.dir-head h1{font-family:var(--f);font-size:var(--t-h1);letter-spacing:var(--tr-tight);font-weight:500;line-height:var(--lh-tight);color:var(--ink)}.dir-head .sub{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--gray);margin-top:var(--s-3)}.featured{margin-top:var(--s-7);gap:var(--s-4);padding:0 var(--s-5);grid-template-columns:repeat(8,1fr);display:grid}.featured .frame{aspect-ratio:1;border:1px solid var(--border);padding:var(--s-4);transition:border-color var(--t-fast) var(--ease);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;display:flex}.featured .frame:hover{border-color:var(--ink)}.featured .wordmark,.pop-grid .wordmark{font-family:var(--f);font-size:var(--t-label);letter-spacing:.02em;text-align:center;font-weight:600}.featured .count,.pop-grid .count{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:var(--tr-eyebrow);color:var(--ink);margin-top:var(--s-3)}.featured .loc,.pop-grid .loc{font-family:var(--mono);font-size:var(--t-caption);color:var(--gray);margin-top:4px}.alpha{margin-top:var(--s-7);gap:var(--s-5);padding:0 var(--s-5);flex-wrap:wrap;justify-content:center;display:flex}.alpha a{font-family:var(--f);font-size:var(--t-h3);transition:border-color var(--t-fast) var(--ease);cursor:pointer;border-bottom:1px solid #0000;padding-bottom:4px;font-weight:500;line-height:1}.alpha a:hover{border-bottom-color:var(--ink)}.alpha a.dead{color:var(--gray);pointer-events:none}.alpha a.here{border-bottom-color:var(--accent)}.controls{margin-top:var(--s-7);gap:var(--s-6);padding:0 var(--s-5);grid-template-columns:1fr 1fr;align-items:center;display:grid}.tabs{gap:var(--s-5);display:flex}.tabs button{font-family:var(--f);font-size:var(--t-caption);letter-spacing:var(--tr-stamp);text-transform:uppercase;color:var(--gray);cursor:pointer;transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);background:0 0;border:none;border-bottom:1px solid #0000;padding-bottom:4px;font-weight:500}.tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}.search-box{border:1px solid var(--border);height:var(--s-6);padding:0 var(--s-3);align-items:center;display:flex}.search-box svg{width:16px;height:16px;color:var(--gray);margin-right:var(--s-1);flex-shrink:0}.search-box input{font-size:var(--t-label);font-family:var(--f);color:var(--ink);background:0 0;border:none;outline:none;flex:1}.search-box input::placeholder{color:var(--gray)}.directory{margin-top:var(--s-7);row-gap:var(--s-7);padding:0 var(--s-5);flex-direction:column;display:flex}.dir-group{gap:var(--s-6);grid-template-columns:200px 1fr;scroll-margin-top:200px;display:grid}.dir-group .letter{font-family:var(--f);font-size:var(--t-display);font-weight:var(--display-w);letter-spacing:var(--display-tr);color:var(--ink);line-height:.9}.dir-group .names{columns:3;column-gap:var(--s-6)}.dir-group .names a{font-family:var(--f);font-size:var(--t-label);padding:var(--s-2) 0;border-bottom:1px solid var(--border);color:var(--ink);transition:color var(--t-fast) var(--ease);display:block}.dir-group .names a:hover{color:var(--gray)}.dir-empty{font-family:var(--mono);font-size:var(--t-caption);text-transform:uppercase;color:var(--gray);padding:var(--s-7) 0;text-align:center;display:none}.dir-empty.show{display:block}.popular{margin-top:var(--s-7);padding:0 var(--s-5);display:none}.pop-caption{font-family:var(--mono);font-size:var(--t-caption);text-transform:uppercase;color:var(--gray);margin-bottom:var(--s-6)}.pop-grid{gap:var(--s-6) var(--s-4);grid-template-columns:repeat(8,1fr);display:grid}.pop-grid .frame{border:1px solid var(--border);padding:var(--s-4);aspect-ratio:1;transition:border-color var(--t-fast) var(--ease);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;display:flex}.pop-grid .frame:hover{border-color:var(--ink)}.pop-grid .rank{font-family:var(--mono);font-size:var(--t-caption);color:var(--gray);margin-bottom:var(--s-2)}body[data-view=popular] .popular{display:block}body[data-view=popular] #alpha-section,body[data-view=popular] .directory{display:none}.dir-page footer{margin-top:128px}