/* Shared native-control styling and responsive theme navigation. */
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){color-scheme:dark}
}
[data-theme-toggle]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap > nav{flex-wrap:wrap}
.wrap > nav .links{flex-wrap:wrap}

.pill[data-theme-toggle]{width:34px;height:34px;padding:7px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
[data-theme-toggle] svg{width:18px;height:18px;display:block}

/* Shared project dropdown. */
.project-menu{position:relative}
.project-menu summary{list-style:none}
.project-chevron{width:12px;height:12px;flex-shrink:0;transition:transform .16s ease}
.project-menu[open] .project-chevron{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.project-chevron{transition:none}}
.project-menu summary::-webkit-details-marker{display:none}
.project-menu summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.project-menu[open] summary{border-color:var(--accent);color:var(--ink)}
.project-dropdown{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:min(340px,calc(100vw - 32px));padding:6px;background:var(--card);border:1px solid var(--grid);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.16)}
.project-dropdown::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.project-dropdown a{display:block;padding:11px 12px;border-radius:7px;text-decoration:none;font-size:14px;font-weight:500}
.project-dropdown a:hover,.project-dropdown a:focus-visible{background:var(--paper);color:var(--accent)}
.project-dropdown small{display:block;margin-bottom:3px;font-family:var(--mono);font-size:9px;letter-spacing:.7px;text-transform:uppercase;color:var(--ink2)}


.project-nav .project-dropdown a{white-space:normal}

/* Keep visited project links in the site palette. */
.project-dropdown a:link,.project-dropdown a:visited{color:var(--ink)}
.project-dropdown a:hover,.project-dropdown a:focus-visible{color:var(--accent)}

/* SVG arrows align to the button center instead of the font baseline. */
.project-nav .pill{line-height:1}
.nav-arrow{width:14px;height:14px;display:block;flex-shrink:0}
.project-chevron{display:block}

/* One button size everywhere: links, the details summary, the theme icon and CTAs all sit at 34px. */
.wrap > nav .links{align-items:center}
.pill{height:34px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:7px 12px}
.pill[data-theme-toggle]{width:34px;padding:7px}

.project-menu-heading{padding:9px 12px 5px;font:500 10px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--ink2)}
.project-menu-heading.personal{margin-top:6px;padding-top:13px;border-top:1px solid var(--grid)}