.portfolio-page { --portfolio-width: var(--page-width); }
.portfolio-page .portfolio-header { position: sticky; top: 0; z-index: 40; width: 100%; max-width: none; padding-inline: max(var(--gutter), calc((100% - var(--portfolio-width)) / 2)); background: var(--paper); gap: 24px; }
.portfolio-header nav { gap: 26px; white-space: nowrap; }
.portfolio-main { width: calc(100% - var(--gutter) * 2); max-width: var(--portfolio-width); margin: 0 auto; padding-block: 85px 90px; }
.portfolio-intro { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.portfolio-intro h1 { margin: 0; font-size: clamp(70px, 9vw, 140px); font-weight: 400; line-height: 1; letter-spacing: -.075em; }
.archive-period { color: var(--accent); }
.portfolio-intro p { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.portfolio-work { margin-top: 54px; scroll-margin-top: 96px; }
.portfolio-page .project-card { scroll-margin-top: calc(var(--header-height) + 10px); }
.portfolio-page footer { border-top: 1px solid var(--line); }
.portfolio-page #project-grid { gap: 48px 32px; }
.portfolio-page .project-image img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.portfolio-page .project-open:hover img, .portfolio-page .project-open:focus-visible img { transform: scale(1.035); }
.portfolio-page .project-name h3 { font-size: 16px; font-weight: 500; }
.portfolio-page .project-meta { font-size: 9px; letter-spacing: .05em; }
.portfolio-page .project-subtitle { font-size: 12px; line-height: 1.7; }
@media (max-width: 860px) {
  .portfolio-main { padding-block: 55px 60px; }
  .portfolio-intro { gap: 22px; }
  .portfolio-page #project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .portfolio-page .filters { gap: 8px 22px; }
  .portfolio-page .filter { font-size: 12px; }
}
@media (max-width: 640px) {
  .portfolio-page .portfolio-header { gap: 12px; }
  .portfolio-header nav { gap: 14px; }
  .portfolio-work { margin-top: 24px; }
  .portfolio-page #project-grid { gap: 28px 16px; }
  .portfolio-page .project-name h3 { font-size: 12px; }
  .portfolio-page .project-subtitle { display: none; }
  .portfolio-page .project-meta { font-size: 8px; }
  .portfolio-page .project-arrow { font-size: 16px; }
}
@media (max-width: 360px) { .portfolio-page #project-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .portfolio-page .project-image img { transition: none; } }

/* Keep the title, description and category navigation on one center axis. */
.portfolio-page .work-toolbar, .portfolio-page .filters { justify-content: center; }
.portfolio-page .filter { text-align: center; }