.directory-hero{background:var(--hero);border-bottom:1px solid var(--line);padding:100px 0 88px}
.directory-hero h1{font-size:clamp(48px,6vw,82px);line-height:1.06;margin:24px 0}
.directory-hero h1 em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}
.directory-intro{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding-top:65px;padding-bottom:70px;font-size:17px;line-height:1.7;color:var(--muted)}
.directory-intro a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.directory-content{padding-bottom:100px}
.directory-controls{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;border-top:1px solid var(--line);padding-top:50px}
.directory-controls h2{font-size:clamp(34px,4vw,52px);margin:18px 0}
.directory-form{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.directory-form label{font-size:16px;font-weight:700}
.directory-form label[for=directory-category]{grid-column:2;grid-row:1}
.directory-form input,.directory-form select{width:100%;min-width:0;min-height:48px;padding:10px 12px;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:3px}
.directory-form input:focus-visible,.directory-form select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.directory-form p{grid-column:1/-1;color:var(--muted);font-size:16px}
.directory-group{padding-top:65px;scroll-margin-top:25px;content-visibility:auto;contain-intrinsic-size:auto 700px}
.directory-heading{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:20px}
.directory-heading h2{font-size:clamp(27px,3vw,37px);margin:10px 0 0}
.directory-heading>p{font-size:17px;line-height:1.6;color:var(--muted)}
.directory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.directory-card{border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
.directory-card{display:flex;flex-direction:column;background:var(--surface)}
.directory-card>a.directory-project{display:block;flex:1;padding:22px 22px 12px}
.directory-card:hover,.directory-card:focus-within{background:var(--surface2)}
.directory-licence-link{align-self:flex-start;margin:0 22px 20px;font-size:15px;font-weight:700;color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.directory-card h3{font-size:22px;line-height:1.25;margin:10px 0}
.directory-card h3 span{color:var(--accent);font-size:18px}
.directory-card p{font-size:16px;line-height:1.6;color:var(--ink)}
.directory-owner{display:block;font-size:14px;font-weight:700;color:var(--accent);overflow-wrap:anywhere}
#directory-empty{margin:45px 0;font-size:18px}
.directory-examples{background:var(--surface2);border-top:1px solid var(--line);padding:75px 0}
.directory-case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.directory-case-grid article{border-top:2px solid var(--accent);padding-top:20px}
.directory-case-grid h3{font-size:23px;margin:15px 0}
.directory-case-grid p{font-size:16px;line-height:1.65;color:var(--muted)}
.directory-case-grid a{display:inline-block;margin-top:18px;font-size:16px;font-weight:700;color:var(--accent);text-decoration:underline;text-underline-offset:4px}
[hidden]{display:none!important}
@media(max-width:700px){.directory-hero{padding:70px 0}.directory-intro,.directory-controls,.directory-heading{grid-template-columns:1fr;gap:20px}.directory-intro{padding-top:50px;padding-bottom:50px}.directory-group{padding-top:48px}.directory-grid,.directory-case-grid{grid-template-columns:1fr}.directory-form{grid-template-columns:1fr}.directory-form label[for=directory-category]{grid-column:auto;grid-row:auto}}