.portfolio__header {
  box-sizing: border-box;
  min-height: calc(var(--pf-header-h) + env(safe-area-inset-top));
  padding-block: env(safe-area-inset-top) 0;
}

.portfolio__header-spacer {
  height: calc(var(--pf-header-h) + env(safe-area-inset-top));
}

.portfolio__project-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  min-block-size: var(--space-48);
  color: var(--pf-text);
  font-family: var(--pf-font);
  font-size: var(--font-size-body2);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body2);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.portfolio__project-back[hidden] {
  display: none;
}

.portfolio--project-route .portfolio__nav {
  display: none;
}

.portfolio__project-back-icon {
  fill: currentColor;
  transition: transform var(--duration-fast) var(--ease-out);
}

.portfolio__project-back-title {
  display: block;
  max-inline-size: min(44vw, 24rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio__project-back:hover {
  color: var(--pf-nav-hover);
}

.portfolio__project-back:focus-visible {
  outline: 1px solid var(--content-primaryInverse);
  outline-offset: var(--space-4);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .portfolio__project-back:hover .portfolio__project-back-icon {
    transform: translateX(calc(var(--space-4) * -1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio__project-back,
  .portfolio__project-back-icon {
    transition: none;
  }
}

@media (max-width: 540px) {
  .portfolio--project-route .portfolio__logo {
    display: none;
  }

  .portfolio__project-back-title {
    max-inline-size: 58vw;
  }
}