/* Keyboard focus follows the visible control, rather than a stretched layout box. */
.wordmark{align-self:flex-start;width:fit-content;white-space:nowrap}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}
a:focus-visible,button:focus-visible,.sidebar-control:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.wordmark:focus-visible{outline:none;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.wordmark{font-size:20px;letter-spacing:-.65px;line-height:1.15;font-weight:700}
body:not(.browsing) .category-control:focus-visible{outline:none}
body:not(.browsing) .category-control:focus-visible .category-visual{outline:2px solid var(--ink);outline-offset:4px}
/* SVG sectors are auxiliary pointer targets inside the decorative dial.
   Their focus is forwarded to the corresponding visible category control. */
.wheel-sector-link:focus{outline:none}
#content:focus{outline:none}
#content:focus-visible .section-heading h1{outline:none;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}
@media(max-width:800px){.wordmark{font-size:19px;letter-spacing:-.6px}}
@media(max-width:359px){.wordmark{font-size:17px;letter-spacing:-.7px}}

/* Clear browsing guidance and controls preserve the original project grid. */
.section-heading .index{display:flex;flex-direction:column;gap:2px;text-transform:none}
.project-count{font-weight:700;color:var(--ink)}
.browse-guidance{font:14px/1.5 Arial,Helvetica,sans-serif;margin:0 0 24px;color:var(--ink)}
.card-caption{flex-direction:column;align-items:center}
.card-caption .card-view-label{font:12px/1.4 Arial,Helvetica,sans-serif;color:#596052;text-align:center;width:100%;padding:0}
.project-card:is(:hover,:focus-visible) .card-caption{text-decoration:underline;text-underline-offset:4px}
.sidebar-control{font-size:11px}
.action-link{min-height:44px}
@media(max-width:800px){
 .sidebar-control{font-size:9px;line-height:1.15;letter-spacing:-.15px}
 .browse-guidance{font-size:14px;margin-bottom:24px}
 #project-drawer .drawer-browse{gap:4px}
 body:not(.project-expanded) #project-drawer .drawer-toolbar{gap:4px;padding:5px 8px;flex-wrap:wrap}
 body:not(.project-expanded) #project-drawer .drawer-back{min-width:44px}
 body:not(.project-expanded) #project-drawer .drawer-browse .project-nav-link{min-width:44px}
}