.site-context-portfolio .site-header,
.site-context-portfolio .site-footer {
  max-width: 82.5rem;
}

.site-context-portfolio .site-header {
  position: sticky;
  top: .75rem;
  z-index: 30;
  min-height: 4.25rem;
  margin-top: .75rem;
  padding: 0 clamp(.875rem, 2vw, 1.25rem);
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 1.25rem;
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / 4%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

.site-context-portfolio .chapter-nav {
  top: 5.75rem;
}

.site-context-portfolio .portfolio-wordmark {
  gap: .625rem;
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 650;
  letter-spacing: -.02em;
}

.site-context-portfolio .portfolio-wordmark img {
  width: 1.75rem;
  height: 1.75rem;
}

.site-context-portfolio .portfolio-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
}

.site-context-portfolio .portfolio-nav a {
  color: var(--muted);
  font-size: .875rem;
  transition: color 180ms ease;
}

.site-context-portfolio .portfolio-nav a:hover,
.site-context-portfolio .portfolio-nav a[aria-current="page"] {
  color: var(--ink);
}

.site-context-portfolio .portfolio-header-actions {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3rem);
}

.site-context-portfolio .portfolio-menu-toggle {
  display: none;
  border: 0;
  padding: .35rem 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .875rem;
}

.site-context-portfolio .site-footer {
  grid-template-columns: auto auto 1fr auto;
}

.site-context-portfolio .portfolio-footer-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  justify-self: end;
}

.site-context-portfolio .portfolio-footer-links a {
  color: var(--muted);
  font-size: .875rem;
}

[data-theme="dark"] .site-context-portfolio .portfolio-wordmark img {
  filter: invert(1);
}

@media (max-width: 640px) {
  .site-context-portfolio .site-header {
    top: .5rem;
    min-height: 3.75rem;
    margin-top: .5rem;
    padding-inline: .875rem;
    border-radius: 1rem;
    background: var(--paper);
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    box-shadow: 0 .4rem 1.25rem rgb(0 0 0 / 6%);
  }
  .site-context-portfolio .portfolio-wordmark { gap: .5rem; font-size: .82rem; }
  .site-context-portfolio .portfolio-wordmark img { width: 1.4rem; height: 1.4rem; }
  .site-context-portfolio .chapter-nav { top: 4.75rem; }
  .site-context-portfolio .portfolio-menu-toggle { display: block; }
  .site-context-portfolio .portfolio-nav {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--paper);
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 10%);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
  .site-context-portfolio .portfolio-nav.is-open { display: flex; }
  .site-context-portfolio .portfolio-nav a { width: 100%; padding: .8rem; }
  .site-context-portfolio .portfolio-header-actions { gap: .75rem; }
  .site-context-portfolio .site-footer { grid-template-columns: auto 1fr auto; }
  .site-context-portfolio .portfolio-footer-links { display: none; }
}