/* Shared header for the home, About and every project detail. */
body>header{position:fixed;z-index:50;inset:0 0 auto;display:grid;grid-template-columns:minmax(60px,1fr) minmax(150px,1fr) auto auto auto auto;column-gap:clamp(14px,2.5vw,36px);align-items:start;padding:22px 26px;background:none;font:400 16px/1.25 Arial,Helvetica,sans-serif;letter-spacing:normal;color:var(--ink);pointer-events:none}
body>header>*{pointer-events:auto;margin:0}
body>header .name,body>header .discipline,body>header nav,body>header nav a{font:inherit;letter-spacing:normal}
body>header .name{text-transform:uppercase;line-height:1.15}
body>header .discipline{color:var(--ink);opacity:.65}
body>header nav{display:contents;padding:0}
body>header nav a{pointer-events:auto}
body>header .theme-toggle{position:static;grid-column:auto;justify-self:end;align-self:start;display:grid;place-items:center;font:inherit;width:1.25em;height:1.25em;padding:0;margin:0;color:inherit;border:0;background:none;cursor:pointer;pointer-events:auto}
body>header .theme-toggle svg{width:1em;height:1em;display:block}
@media(max-width:650px){body>header{font-size:15px;grid-template-columns:1fr auto auto auto;column-gap:22px;padding:20px}body>header .discipline{display:none}}

@media(max-width:650px){body>header{grid-template-columns:1fr auto auto auto auto;column-gap:16px;row-gap:10px}body>header .header-email{grid-column:1/-1;grid-row:2;justify-self:end}body>header .theme-toggle{grid-column:5;grid-row:1}}

body>header .email-mobile{display:none}
@media(max-width:650px){body>header .email-desktop{display:none}body>header .email-mobile{display:inline}body>header .header-email{grid-column:4;grid-row:1;justify-self:start}}

/* Keep the fixed navigation legible over light and dark page content. */
body>header{color:#fff;mix-blend-mode:difference}
body>header .name,body>header .discipline,body>header nav a,body>header .theme-toggle{color:inherit}
body>header .discipline{opacity:1}

/* Group the name and professional title together. */
@media(min-width:651px){body>header{grid-template-columns:max-content minmax(150px,1fr) auto auto auto auto;column-gap:clamp(18px,2.5vw,36px)}body>header .discipline{justify-self:start}}

/* Vertically align the title with the two-line name. */
body>header{align-items:center}
body>header .discipline{align-self:center;color:inherit;opacity:.62}
body>header .theme-toggle{align-self:center}
body>header nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
/* About uses its selected theme directly, with a solid backing for reliable contrast. */
body.about-page>header{mix-blend-mode:normal;color:var(--ink);background:var(--paper)}