#work .section-head { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
#work .work-sources { flex-shrink: 0; }

.portfolio-intro {
  max-width: 69ch;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.19rem);
  line-height: 1.62;
}

#work .portfolio-intro { margin-bottom: .6rem; }
[lang="ar"] .portfolio-intro { line-height: 1.75; }

.portfolio-archive-link {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

.portfolio-card .project-description {
  margin-top: .5rem;
  color: var(--muted);
  font-size: .96rem;
}

.portfolio-card .project-source:is(:hover, :focus-visible) {
  box-shadow: 0 0 14px var(--hover-glow);
  scale: 1.035;
}

.portfolio-page {
  padding-block: clamp(2rem, 5vw, 5rem) clamp(3rem, 7vw, 6rem);
}

.portfolio-page-intro .back-link { margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.portfolio-page h1 {
  margin-bottom: .23em;
  font: 800 clamp(3.4rem, 8.4vw, 7.8rem)/.91 var(--display);
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.portfolio-page h1 span { color: var(--accent); }
[lang="ar"] .portfolio-page h1 { font-size: clamp(2.7rem, 6.8vw, 6.2rem); line-height: 1.16; }

.portfolio-group-nav {
  flex-wrap: wrap;
  gap: var(--control-gap);
  margin-block: clamp(1.4rem, 3vw, 2.4rem) clamp(2.4rem, 6vw, 5rem);
}

.portfolio-group h2 {
  margin-bottom: clamp(1rem, 2vw, 1.55rem);
  font-size: clamp(2.35rem, 5vw, 4.25rem);
}

[lang="ar"] .portfolio-group h2 { font-size: clamp(1.8rem, 4vw, 3.7rem); }

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1rem, 2.15vw, 1.65rem);
}

.portfolio-grid .project h3 { font-size: clamp(1.2rem, 1.8vw, 1.55rem); }
[lang="ar"] .portfolio-card h3 { letter-spacing: normal; }

@media (max-width: 1050px) {
  .portfolio-header {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--control-gap);
    padding-block: .65rem .8rem;
  }

  .portfolio-header .glass-nav { grid-area: 2 / 1 / 3 / -1; }
}

@media (max-width: 520px) {
  .portfolio-group-nav .text-link { padding-inline: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-card .project-source:is(:hover, :focus-visible) { scale: none; }
}