.home-directory{padding-block:clamp(22px,4vw,48px);background:var(--paper);color:var(--ink)}
.home-news{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:44px;padding:8px 14px;border:1px solid var(--gold);text-decoration:none;color:inherit;background:color-mix(in srgb,var(--gold) 13%,var(--paper))}
.home-news b{font-size:.76rem;padding-inline-end:10px;border-inline-end:1px solid var(--gold)}
.home-news span{font-size:.9rem}
.home-news .home-arrow{margin-inline-start:auto}
.home-directory h2{margin:.75em 0 .15em}
.home-directory .directory-intro{margin:0 0 20px;font-size:.9rem}
.home-gates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 20px}
.home-gate{min-width:0;padding:14px;border:1px solid var(--line);border-block-start:2px solid var(--gold);background:color-mix(in srgb,var(--paper) 94%,var(--ink))}
.home-gate h3{margin:0 0 7px;font-size:1.05rem}
.home-gate p{font-size:.76rem;margin:0 0 7px;color:inherit}
.home-gate ul,.home-shortcuts{padding:0;margin:0;list-style:none}
.home-gate li+li{border-block-start:1px solid var(--line)}
.home-gate a,.home-shortcuts a{display:flex;align-items:center;min-height:44px;color:inherit;font-size:.84rem;text-decoration:none}
.home-gate a:hover,.home-shortcuts a:hover,.home-news:hover{text-decoration:underline;text-underline-offset:4px}
.home-directory :is(a,button,input):focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.home-shortcuts{display:flex;gap:0 18px;flex-wrap:wrap;margin-bottom:14px}
.home-shortcuts a{text-decoration:underline;text-underline-offset:4px}
@media(max-width:850px){.home-gates{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:360px){.home-gates{gap:8px}.home-gate{padding:10px}.home-gate a{font-size:.78rem}}
main>[data-directory-group]{display:none}
main>[data-directory-reveal],body[data-directory-view=tools] main>[data-directory-group=tools],body[data-directory-view=law] main>[data-directory-group=law],body[data-directory-view=culture] main>[data-directory-group=culture],body[data-directory-view=tech] main>[data-directory-group=tech]{display:block}
body[data-directory-view] #discover,main>section.end{display:none}
.directory-brand{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px}
.directory-brand h1{font-size:clamp(2rem,6vw,4rem);margin:6px 0;line-height:1.18}.directory-brand p{margin:0}.directory-english{text-align:start;letter-spacing:.12em;font-size:.75rem}
.directory-brand img{object-fit:contain}
.home-directory .home-gates{margin:20px 0 8px}
.home-gates>a.home-gate{display:grid;gap:6px;text-decoration:none;color:inherit;min-height:104px}
.home-gates>a.home-gate:hover{border-color:var(--gold);text-decoration:underline}
.home-gate>span{font-size:.8rem}.home-gate>span:last-child{justify-self:end;color:var(--gold)}
.directory-footer,.browse-intro nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.directory-footer a,.browse-intro nav a{min-height:44px;display:inline-flex;align-items:center}
.directory-footer{padding:14px 6%;border-top:1px solid var(--line)}
.browse-intro{padding-block:24px}.browse-intro h1{margin:.35em 0;font-size:clamp(2rem,5vw,3rem)}.browse-intro nav a{border-bottom:1px solid var(--gold)}

/* Keep the bottom panel and the wordmark readable in both themes. */
#site-visits{background:color-mix(in srgb,var(--paper) 94%,var(--ink));color:var(--ink);border:1px solid var(--line)}
#site-visits small{color:inherit;font-size:.78rem}
#site-visits button{background:var(--paper);color:var(--ink);border:1px solid var(--line);min-height:44px}
.directory-footer,body>footer,body>main+p.fine{color:var(--ink)}
body>header .brand{flex:0 0 auto;padding:4px 0;max-width:100%}
body>header .brand-logo{display:block;width:clamp(126px,25vw,182px);height:auto;aspect-ratio:420/80;object-fit:contain}
:root[data-theme=dark] body>header .brand-logo{filter:brightness(0) invert(1)}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]) body>header .brand-logo{filter:brightness(0) invert(1)}
}
.directory-brand>div{min-width:0}
.directory-brand h1{white-space:normal}
.directory-brand img{width:clamp(56px,17vw,86px);height:auto;flex:none}
.directory-english{direction:ltr;text-align:right;line-height:1.5}

/* This panel stays dark even when the theme's ink color becomes light. */
#interests{background:#153232;color:#f4efe4}
#interests :is(h2,h3){color:inherit}
#interests :is(.label,.label small,.number){color:#e0c28f}
#interests .interest p{color:#dce7df}