/* Shared native Header: one visual and interaction contract for Home, Work, and About. */
.portfolio-header {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  width: 100%;
  height: 89.203125px;
  padding: var(--space-card) var(--space-11);
  background: var(--color-header-overlay);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.portfolio-header.headroom { will-change: transform; transition: transform var(--motion-layout) var(--ease-out-expo); }
.portfolio-header.headroom--top, .portfolio-header.headroom--pinned, .portfolio-header.is-menu-open { transform: none; }
.portfolio-header.headroom--unpinned { transform: translate3d(0, -86px, 0); }
.portfolio-header__row { display: flex; align-items: center; width: 100%; height: 100%; }
.portfolio-header__logo { display: flex; flex: none; align-items: center; width: 95px; height: 24px; }
.portfolio-header__logo-mark { display: block; width: 95px; height: 24px; fill: var(--color-text-primary); }
.portfolio-header__nav { display: flex; flex: 1 0 0; justify-content: center; gap: var(--space-8); height: 22px; overflow: hidden; font-size: var(--type-label-size); font-weight: var(--type-label-weight); line-height: var(--type-label-leading); }
.portfolio-header__nav-link { display: block; height: 22px; overflow: visible; color: var(--color-text-primary); }
.portfolio-header__nav-mask { display: block; height: 22px; overflow: hidden; }
.portfolio-header__nav-roll { display: block; will-change: transform; transition: transform var(--motion-ui) var(--ease-out-quart); }
.portfolio-header__nav-roll > span { display: block; }
.portfolio-header__nav-roll > span:last-child { opacity: .6; }
.portfolio-header__linkedin { display: inline-flex; flex: none; align-items: center; gap: var(--space-inline-tight); padding: var(--space-1) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-pill); background: var(--color-inverse-button-background); color: var(--color-inverse-button-text); font-size: var(--type-label-size); font-weight: var(--type-label-weight); line-height: var(--type-label-leading); transition: background-color var(--motion-ui) var(--ease-out-quart), border-color var(--motion-ui) var(--ease-out-quart), color var(--motion-ui) var(--ease-out-quart); }
.portfolio-header .portfolio-header__linkedin { color: var(--color-inverse-button-text); }
.portfolio-header__menu-button, .portfolio-mobile-menu { display: none; }
.portfolio-header__menu-button { color: inherit; font: inherit; }
.portfolio-header :focus-visible, .portfolio-mobile-menu :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .portfolio-header__nav-link:hover .portfolio-header__nav-roll { transform: translateY(calc(22px - 100%)); }
  .portfolio-header__linkedin:hover { border-color: var(--color-inverse-button-background); background: var(--color-inverse-button-text); color: var(--color-inverse-button-background); }
}
.portfolio-header__nav-link:focus-visible .portfolio-header__nav-roll { transform: translateY(calc(22px - 100%)); }
.portfolio-header__linkedin:focus-visible { border-color: var(--color-inverse-button-background); background: var(--color-inverse-button-text); color: var(--color-inverse-button-background); }

@media (max-width: 767.98px) {
  .portfolio-header { height: 62px; padding: var(--space-4); background: var(--color-page); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .portfolio-header__nav, .portfolio-header__linkedin { display: none; }
  .js-portfolio-header .portfolio-header__menu-button { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; padding: 0; border: 0; background: transparent; cursor: pointer; }
  .portfolio-header__menu-icon, .portfolio-header__menu-icon::before, .portfolio-header__menu-icon::after { display: block; width: 19px; height: 2px; background: var(--color-text-primary); transition: transform var(--motion-ui) var(--ease-signature), opacity var(--motion-fast) var(--ease-out-quart); }
  .portfolio-header__menu-icon { position: relative; }
  .portfolio-header__menu-icon::before, .portfolio-header__menu-icon::after { position: absolute; left: 0; content: ""; }
  .portfolio-header__menu-icon::before { top: -6px; }
  .portfolio-header__menu-icon::after { top: 6px; }
  .portfolio-header__menu-button[aria-expanded="true"] .portfolio-header__menu-icon { background: transparent; }
  .portfolio-header__menu-button[aria-expanded="true"] .portfolio-header__menu-icon::before { top: 0; transform: rotate(45deg); }
  .portfolio-header__menu-button[aria-expanded="true"] .portfolio-header__menu-icon::after { top: 0; transform: rotate(-45deg); }
  .portfolio-mobile-menu { position: relative; z-index: 19; display: grid; gap: var(--space-4); margin-top: 62px; padding: var(--space-card) var(--space-card) var(--space-7); background: var(--color-page); }
  .js-portfolio-header .portfolio-mobile-menu { position: fixed; inset: 62px 0 auto; max-height: 0; margin-top: 0; overflow: hidden; padding: 0 var(--space-card); opacity: 0; pointer-events: none; transition: max-height var(--motion-layout) var(--ease-signature), opacity var(--motion-ui) var(--ease-out-quart), padding var(--motion-layout) var(--ease-signature); }
  .js-portfolio-header .portfolio-mobile-menu.is-open { max-height: 420px; padding-top: var(--space-card); padding-bottom: var(--space-7); opacity: 1; pointer-events: auto; }
  .portfolio-mobile-menu a { display: flex; gap: var(--space-stack-tight); align-items: center; color: var(--color-text-primary); font-size: var(--type-mobile-nav-size); font-weight: var(--type-label-weight); line-height: var(--leading-content); text-decoration: none; }
  .portfolio-mobile-menu__external { width: 16px; height: 16px; flex: 0 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-header, .portfolio-header__nav-roll, .portfolio-header__linkedin, .portfolio-header__menu-icon, .portfolio-header__menu-icon::before, .portfolio-header__menu-icon::after, .portfolio-mobile-menu, .js-portfolio-header .portfolio-mobile-menu { transition: none; }
  .portfolio-header, .portfolio-header.headroom--unpinned { transform: none; }
  .portfolio-header__nav-link:hover .portfolio-header__nav-roll, .portfolio-header__nav-link:focus-visible .portfolio-header__nav-roll { transform: none; }
}