/* site.css — the header bar and footer every page shares.
 *
 * The markup is the same on every page (only the ../ prefix changes for pages
 * in a folder). Colours come from each page's own tokens: --bg, --hair,
 * --hair2, --ink, --sub, --faint, --acc and --maxw.
 */

/* ---- header ---- */
header.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 78%,transparent);
           backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
           border-bottom:1px solid var(--hair)}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:56px;gap:18px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand img{width:26px;height:26px;border-radius:7px}
.brand .wordmark{font-size:16.5px;font-weight:640;letter-spacing:-.021em;color:var(--ink);white-space:nowrap;line-height:1}
nav.links{display:flex;gap:26px;font-size:15px;align-items:center}
nav.links a{color:var(--sub);white-space:nowrap}
nav.links a:hover,nav.links a[aria-current="page"]{color:var(--ink);text-decoration:none}
@media(max-width:620px){nav.links{gap:16px;font-size:14px}}
/* On a phone the icon alone stands for the company, so all four links fit. */
@media(max-width:480px){.brand .wordmark{display:none}}

.themetoggle{width:32px;height:32px;display:grid;place-items:center;border-radius:999px;flex:0 0 auto;
  border:1px solid var(--hair2);background:transparent;color:var(--sub);cursor:pointer;padding:0;
  transition:color .2s ease,border-color .2s ease}
.themetoggle:hover{color:var(--ink);border-color:var(--acc)}
.tglyph{width:15px;height:15px;border-radius:50%;background:currentColor;transition:background .2s ease,box-shadow .2s ease}
/* Light active shows a crescent (click = go dark); dark active shows a sun. */
@media (prefers-color-scheme:light){ :root:not([data-theme]) .tglyph{background:transparent;box-shadow:inset -4px -2px 0 0 currentColor} }
:root[data-theme="light"] .tglyph{background:transparent;box-shadow:inset -4px -2px 0 0 currentColor}
:root[data-theme="dark"] .tglyph{background:currentColor;box-shadow:none}

/* ---- footer ---- */
footer{padding:56px 0 64px;text-align:center;border-top:1px solid var(--hair)}
footer .wordmark{display:block;text-align:center;margin:0 auto 20px;font-size:15.5px;font-weight:640;letter-spacing:-.021em;color:var(--sub);line-height:1}
footer .fl{display:flex;gap:8px 22px;justify-content:center;flex-wrap:wrap;font-size:15px;margin-bottom:10px}
footer .fl a{color:var(--sub)}
footer .fl a:hover{color:var(--ink);text-decoration:none}
footer .fl + .fl{margin-bottom:18px}
footer .fl + .fl a{color:var(--faint)}
footer .fl + .fl a:hover{color:var(--ink)}
footer .cp{font-size:13px;color:var(--faint)}