.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;
  justify-content: center;
  flex: 0 0 var(--space-40);
  inline-size: var(--space-40);
  block-size: var(--space-40);
  border-radius: var(--radius-full);
  color: var(--pf-nav-idle);
  text-decoration: none;
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

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

.portfolio__project-back-icon {
  inline-size: var(--space-24);
  block-size: var(--space-24);
  fill: currentColor;
}

.portfolio__project-brand {
  display: inline-flex;
  align-items: center;
  min-inline-size: 0;
  min-block-size: var(--space-40);
  margin-inline-start: var(--space-4);
  color: var(--content-primaryInverse);
  line-height: 0;
  transform-origin: left center;
}

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

@keyframes pf-project-brand-enter {
  from {
    opacity: 0;
    transform: translate3d(calc(var(--space-4) * -1), 0, 0) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.portfolio--project-route .portfolio__project-brand:not([hidden]) {
  animation: pf-project-brand-enter var(--duration-enter) var(--ease-standard) both;
}

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

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

.portfolio__detail-title {
  display: block;
  max-inline-size: min(40vw, 30rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--content-primaryInverse);
  font-family: var(--pf-font);
  font-size: var(--font-size-body2);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body2);
}

.portfolio__detail-title[hidden] {
  display: none;
}

.portfolio__project-brand-mark {
  display: block;
  inline-size: calc(var(--space-48) + var(--space-16));
  block-size: var(--space-24);
  max-inline-size: 100%;
  color: currentColor;
}

.portfolio__project-brand-mark--okx-logo,
.portfolio__project-brand-mark--airbnb-logo {
  inline-size: var(--space-24);
  block-size: var(--space-24);
}

.portfolio__project-brand-text {
  display: block;
  max-inline-size: min(28vw, 15rem);
  overflow: hidden;
  color: currentColor;
  font-family: var(--pf-font);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio__project-back:hover {
  color: var(--pf-nav-hover);
  background-color: color-mix(in srgb, var(--content-primaryInverse) 8%, transparent);
}

.portfolio__project-back:focus-visible {
  outline: 1px solid var(--content-primaryInverse);
  outline-offset: var(--space-4);
  background-color: color-mix(in srgb, var(--content-primaryInverse) 8%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .portfolio__project-back,
  .portfolio--project-route .portfolio__project-brand:not([hidden]) {
    animation: none;
    transition: none;
    transform: none;
  }
}

@media (max-width: 540px) {
  .portfolio__detail-title {
    max-inline-size: 44vw;
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
  }

  .portfolio__project-brand-mark {
    inline-size: var(--space-48);
    block-size: var(--space-20);
  }

  .portfolio__project-brand-mark--okx-logo,
  .portfolio__project-brand-mark--airbnb-logo {
    inline-size: var(--space-20);
    block-size: var(--space-20);
  }

  .portfolio__project-brand-text {
    max-inline-size: 24vw;
  }
}