.portfolio-site-header {
  box-sizing: border-box;
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--portfolio-space-1);
  width: calc(100% - 2 * var(--portfolio-page-gutter));
  min-height: var(--portfolio-header-height);
  margin: 0 auto;
  font: var(--portfolio-weight-normal) var(--portfolio-type-body)/1 var(--portfolio-sans);
  pointer-events: none;
}

.portfolio-site-header * { box-sizing: border-box; }

.portfolio-site-header-spacer {
  height: var(--portfolio-header-height);
  pointer-events: none;
}

.portfolio-site-header__identity,
.portfolio-site-header__actions,
.portfolio-site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--portfolio-space-1);
}

.portfolio-site-header__actions,
.portfolio-site-header__nav { justify-content: flex-end; }

.portfolio-site-header .portfolio-site-header__menu { display: none; }

.portfolio-site-header__pill,
.portfolio-site-header__hand {
  display: inline-flex;
  min-height: var(--portfolio-header-pill-height);
  align-items: center;
  justify-content: center;
  border-radius: var(--portfolio-pill-radius);
  white-space: nowrap;
  font: inherit;
  text-decoration: none;
}

.portfolio-site-header a,
.portfolio-site-header select { pointer-events: auto; }

.portfolio-site-header__pill {
  padding: 0 var(--portfolio-space-3);
  background: var(--portfolio-header-pill-surface);
  -webkit-backdrop-filter: blur(var(--portfolio-case-navbar-blur));
  backdrop-filter: blur(var(--portfolio-case-navbar-blur));
  color: var(--portfolio-ink);
  transition: background-color var(--portfolio-case-navbar-motion), color var(--portfolio-case-navbar-motion);
}

.portfolio-site-header a.portfolio-site-header__pill:hover,
.portfolio-site-header a.portfolio-site-header__pill:focus-visible,
.portfolio-site-header__pill[aria-current="page"] { background-color: var(--portfolio-line); }

.portfolio-site-header__pill[data-theme="dark"] {
  background-color: var(--portfolio-case-navbar-dark-glass);
  color: var(--portfolio-paper);
}

.portfolio-site-header a.portfolio-site-header__pill[data-theme="dark"]:hover,
.portfolio-site-header a.portfolio-site-header__pill[data-theme="dark"]:focus-visible { background-color: var(--portfolio-ink); }

.portfolio-site-header__hand {
  width: var(--portfolio-header-pill-height);
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--portfolio-ink);
  color: var(--portfolio-paper);
  transition: width var(--portfolio-case-navbar-motion), background-color var(--portfolio-case-navbar-motion), color var(--portfolio-case-navbar-motion);
}

.portfolio-site-header__hand[data-theme="dark"] {
  background-color: var(--portfolio-paper);
  color: var(--portfolio-ink);
}

.portfolio-site-header__hand svg {
  width: var(--portfolio-space-3);
  height: var(--portfolio-space-3);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.portfolio-site-header__hand span {
  max-width: 0;
  margin-inline-start: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width var(--portfolio-case-navbar-motion), margin-inline-start var(--portfolio-case-navbar-motion), opacity var(--portfolio-case-navbar-motion);
}

@media (min-width: 761px) {
  .portfolio-site-header__hand:focus-visible { width: var(--portfolio-header-contact-expanded-width); }
  .portfolio-site-header__hand:focus-visible span { max-width: var(--portfolio-header-contact-expanded-width); margin-inline-start: var(--portfolio-space-1); opacity: 1; }
}

@media (min-width: 761px) and (hover: hover) {
  .portfolio-site-header__hand:hover { width: var(--portfolio-header-contact-expanded-width); }
  .portfolio-site-header__hand:hover span { max-width: var(--portfolio-header-contact-expanded-width); margin-inline-start: var(--portfolio-space-1); opacity: 1; }
}

:is(#work, #experience, #contact, #business-work, #business-background, #business-contact):target {
  scroll-margin-top: calc(var(--portfolio-header-offset, var(--portfolio-header-height)) + var(--portfolio-space-1));
}

@media (max-width: 1080px) {
  .portfolio-site-header {
    min-height: auto;
    flex-wrap: wrap;
    padding: var(--portfolio-space-1) 0;
    font-size: var(--portfolio-type-nav);
  }

  .portfolio-site-header__actions,
  .portfolio-site-header__nav { flex-wrap: wrap; }

  .portfolio-site-header__pill { padding: 0 var(--portfolio-space-1); }
}

@media (max-width: 760px) {
  .portfolio-site-header__actions {
    justify-content: flex-start;
    column-gap: var(--portfolio-header-compact-gap);
  }

  .portfolio-site-header__nav { display: contents; }
  .portfolio-site-header__pill { padding-inline: var(--portfolio-header-compact-gap); }
  .portfolio-site-header__identity .portfolio-site-header__pill { padding-inline: var(--portfolio-space-1); }
  .portfolio-site-header--home { flex-wrap: nowrap; }
  .portfolio-site-header--home .portfolio-site-header__identity > span { display: none; }
  .portfolio-site-header--home .portfolio-site-header__menu {
    display: inline-flex;
    padding-inline: var(--portfolio-space-2);
    border: 0;
    cursor: pointer;
    pointer-events: auto;
  }
  .portfolio-site-header--home .portfolio-site-header__nav {
    position: absolute;
    inset: 100% 0 auto auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: var(--portfolio-space-1);
    border: var(--portfolio-border);
    border-radius: var(--portfolio-media-radius);
    background: var(--portfolio-paper);
    pointer-events: auto;
  }
  .portfolio-site-header--home .portfolio-site-header__menu[aria-expanded="true"] + nav { display: flex; }
  .portfolio-site-header--home .portfolio-site-header__nav a { padding-inline: var(--portfolio-space-2); }
  .portfolio-site-header--home .portfolio-site-header__hand { width: auto; }
  .portfolio-site-header--home .portfolio-site-header__hand svg { display: none; }
  .portfolio-site-header--home .portfolio-site-header__hand span { max-width: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-site-header__pill,
  .portfolio-site-header__hand,
  .portfolio-site-header__hand span { transition: none; }
}