/* Shared site header, used by every page including Present. */
/* Always on screen. It starts tall and shrinks once the page scrolls (.is-compact, set in header.js). */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:100;
  width:100%;background:var(--bg);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease;
}
.site-head-in{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px 40px;
  padding:40px var(--gutter) 24px;
  transition:padding .25s ease;
}
.brand{display:flex;flex-direction:column;text-decoration:none}
.brand-name{font-size:24px;font-weight:700;letter-spacing:-0.5px;color:var(--ink);line-height:1;transition:font-size .25s ease}
.brand-tag{
  font-size:14px;color:var(--muted);line-height:1.2;white-space:nowrap;
  margin-top:8px;max-height:20px;overflow:hidden;
  transition:max-height .25s ease, margin-top .25s ease, opacity .2s ease;
}

.site-head.is-compact{border-bottom-color:var(--line)}
.site-head.is-compact > .site-head-in{padding-top:14px;padding-bottom:14px}
.site-head.is-compact .brand-name{font-size:18px}
.site-head.is-compact .brand-tag{max-height:0;margin-top:0;opacity:0}

@media (prefers-reduced-motion: reduce){
  .site-head,.site-head-in,.brand-name,.brand-tag{transition:none}
}

.site-nav,.head-tools{
  display:flex;align-items:center;gap:8px 22px;line-height:16px;
  font-size:12px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;
}
/* One link style for the header nav and the footer bar. */
.navlink{
  display:inline-flex;align-items:center;gap:6px;
  font-family:inherit;font-size:12px;font-weight:500;line-height:16px;
  letter-spacing:1.5px;text-transform:uppercase;
  color:var(--ink);border:0;cursor:pointer;
}

/* underline that draws in from the left on hover; stays drawn on the current page or choice */
.navlink,.menu-pages a,.menu-socials a{
  text-decoration:none;padding:3px 0;
  background:linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1px;
  transition:background-size .25s ease;
}
.navlink:hover,.navlink[aria-current="page"],.navlink[aria-pressed="true"],
.menu-pages a:hover,.menu-pages a[aria-current="page"],
.menu-socials a:hover{background-size:100% 1px}
@media (prefers-reduced-motion: reduce){
  .navlink,.menu-pages a,.menu-socials a{transition:none}
}
.head-tools{display:none;gap:16px}

.theme-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;margin:-6px -4px -6px 0;
  color:var(--ink);background:none;border:0;padding:0;cursor:pointer;
}
.theme-btn:hover{background:var(--chip)}
.theme-btn:focus-visible,.menu-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.icon-sun{display:none}
:root[data-theme="dark"] .icon-sun{display:block}
:root[data-theme="dark"] .icon-moon{display:none}

.menu-btn{
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  color:var(--ink);background:none;border:0;padding:0;cursor:pointer;
}

/* full-screen menu for smaller screens */
.menu{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;
  background:var(--bg);
  overflow-y:auto;
}
.menu[hidden]{display:none}
.menu .head-tools{display:flex}
.menu-pages{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:64px var(--gutter) 0}
.menu-pages a{
  font-size:28px;font-weight:500;letter-spacing:-0.5px;line-height:1.2;text-transform:none;
  color:var(--ink);
}
.menu-socials{
  display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:auto;
  padding:48px var(--gutter) 40px;
  font-size:12px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;
}
.menu-socials a{color:var(--muted)}
.menu-socials a:hover{color:var(--ink)}
html.menu-open{overflow:hidden}

@media (max-width:1080px){
  .site-head-in{align-items:center}
  .site-nav{display:none}
  .head-tools{display:flex}
}
@media (max-width:760px){
  .site-head-in{padding-top:24px;padding-bottom:16px}
  .brand-name{font-size:20px}
  .head-tools{font-size:12px}
}

/* external links carry an arrow (pages without site.css need it too) */
.site-head a[target="_blank"]::after{content:"\2197";margin-left:.3em;font-size:.9em}