/* Shared browse controls use the existing parchment and serif page vocabulary. */
[data-directory] [hidden]{display:none!important}
.directory-controls{display:flex;flex-wrap:wrap;align-items:end;gap:14px 22px;margin:24px 0;padding:18px 0;border-block:1px solid var(--frame)}
.directory-search{flex:1 1 290px;min-width:0}
.directory-search label{display:block;margin-bottom:8px;font-size:16px;font-weight:700;color:var(--ink)}
.directory-input{display:flex;gap:8px}
.directory-input input{width:100%;min-width:0;min-height:44px;padding:10px 12px;border:1px solid var(--coast);border-radius:4px;background:var(--card);color:var(--ink);font:inherit;font-size:16px}
.directory-controls button{min-height:44px;padding:9px 13px;border:1px solid var(--coast);border-radius:4px;background:transparent;color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.directory-controls button:hover{background:var(--card)}
.directory-controls button:focus-visible,.directory-input input:focus-visible,.essay-directory a:focus-visible,.essay-compact-list a:focus-visible{outline:3px solid var(--brick);outline-offset:3px}
.directory-views{display:flex;gap:6px}
.directory-views [aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--parch)}
.directory-views [aria-pressed="true"]:hover{background:var(--ink)}
.directory-status{flex-basis:100%;margin:0;font-size:14px;line-height:1.4;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.directory-empty{margin:28px 0;font-size:18px;color:var(--ink-soft)}
.essay-directory{display:flex;flex-wrap:wrap;gap:0 22px;margin:0 0 20px;padding:0 0 12px}
.essay-directory a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:7px 0;font-size:16px;line-height:1.3}
.essay-directory span{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums;text-decoration:none}
[data-browse-group]{scroll-margin-top:20px}
[data-browse-group] h2{scroll-margin-top:20px}
.essay-compact-list{list-style:none;margin:0;padding:0}
.essay-compact-list li{padding:16px 0;border-bottom:1px solid var(--frame)}
.essay-compact-list a{font-size:21px;font-weight:600;line-height:1.25}
.essay-compact-list p{max-width:85ch;margin:6px 0 0;color:var(--ink-soft);font-size:15px;line-height:1.5}
@media(max-width:520px){
  .directory-controls{gap:12px;padding:15px 0}
  .directory-search{flex-basis:100%}
  .essay-directory{column-gap:18px}
  .essay-directory a{font-size:15px}
  .essay-compact-list a{font-size:19px}
}
@media print{.directory-controls{display:none!important}}
