.character-directory [hidden] { display:none !important; }
.directory-breadcrumb { display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; padding:26px 0; border-bottom:1px solid #38333f; font:.8rem/1.6 Arial,sans-serif; }
.directory-breadcrumb a { color:#c6b7e8; text-decoration:none; }
.directory-hero { padding:60px 0 48px; }
.directory-hero h1 { font-size:clamp(2.8rem,5.5vw,4.8rem); letter-spacing:-.035em; margin:22px 0; }
.directory-hero h1 em { color:#c6b7e8; font-weight:400; }
.directory-hero > p:not(.home-eyebrow) { color:#c4bfce; max-width:670px; font-size:1.15rem; }
.directory-note { padding:22px 25px; border-left:2px solid #a78bbd; background:#28203080; max-width:820px; margin-top:32px; }
.directory-note strong { font:.85rem/1.6 Arial,sans-serif; color:#e3d5ed; }
.directory-note p { margin-top:10px; color:#c4bfce; }
.directory-browser { border-top:1px solid #38333f; padding:40px 0 60px; }
.directory-controls { display:flex; flex-wrap:wrap; align-items:flex-end; gap:18px; margin-top:28px; padding:24px; background:#201b27; border:1px solid #493d52; }
.directory-controls > div { flex:1 1 180px; min-width:0; }
.directory-controls > div:first-child { flex:2 1 240px; }
.directory-controls label { display:block; color:#c6b7e8; font:.8rem/1.6 Arial,sans-serif; margin-bottom:8px; }
.directory-controls input,.directory-controls select { width:100%; min-height:46px; border:1px solid #695573; border-radius:3px; padding:10px 12px; color:#eee6f4; background:#15121b; font:1rem/1.5 Arial,sans-serif; color-scheme:dark; }
.character-directory button { min-height:46px; border:1px solid #897299; border-radius:3px; padding:10px 18px; color:#e7d9f0; background:#302539; cursor:pointer; font:.85rem/1.6 Arial,sans-serif; }
#character-count { margin:22px 0; color:#c4bfce; font:.8rem/1.6 Arial,sans-serif; }
.directory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:start; }
.directory-card { padding:25px; background:#1c1822; border:1px solid #493d52; border-radius:4px; }
.directory-identity { display:flex; align-items:center; gap:18px; min-height:112px; }
.directory-avatar { flex:none; width:64px; height:64px; border-radius:50%; background:#34283e; display:grid; place-items:center; color:#d6bee8; font:1.6rem Georgia,serif; overflow:hidden; }
.directory-avatar img { width:100%; height:100%; object-fit:cover; }
.character-directory .directory-card h2 { font:1.5rem/1.35 Georgia,serif; margin:9px 0; overflow-wrap:anywhere; }
.directory-book,.directory-story { color:#c6b7e8; font:.72rem/1.6 Arial,sans-serif; }
.directory-story { color:#c4bfce; }
.directory-details { border-top:1px solid #493d52; border-bottom:1px solid #493d52; margin:22px 0; }
.directory-details summary { cursor:pointer; padding:15px 0; font:.8rem/1.7 Arial,sans-serif; color:#dfd0e9; }
.directory-details summary span { color:#bcaac6; }
.directory-details > div { padding:0 0 18px; color:#c4bfce; }
.directory-title { font-style:italic; color:#e2d5eb; margin-bottom:15px; }
.directory-tags { margin-top:18px; color:#bba5cd; font:.72rem/1.7 Arial,sans-serif; }
.directory-profile-note { color:#b8aabd; font:.7rem/1.7 Arial,sans-serif; margin-top:7px; }
.directory-empty { padding:40px; border:1px solid #493d52; text-align:center; }
.directory-empty p { margin:15px 0 24px; color:#c4bfce; }
.directory-next { border-top:1px solid #38333f; padding:45px 0 65px; }
.directory-next > div { display:flex; flex-wrap:wrap; gap:25px; margin-top:25px; }
.character-directory :is(a,button,input,select,summary):focus-visible { outline:2px solid #d6bee8; outline-offset:4px; }
.character-directory .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(max-width:1000px) { .directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .directory-grid { grid-template-columns:1fr; } .directory-hero { padding-top:35px; } .directory-controls { padding:18px; } .directory-controls > div { flex-basis:100%; } .directory-card { padding:23px; } }