/* Photography and AI philosophy have a home outside the project collection. */
.portfolio-perspectives {
  position: relative; isolation: isolate;
  padding: 72px 48px 88px;
  background: var(--industrial-ink);
  scroll-margin-top: 30px;
}
.portfolio-perspectives::before, .portfolio-perspectives::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 86%, transparent);
  mask-image: linear-gradient(transparent, #000 12%, #000 86%, transparent);
}
.portfolio-perspectives::before {
  background: linear-gradient(#1b1d1ec9, #1b1d1edb), var(--workshop-metal) center / 620px;
}
.portfolio-perspectives::after {
  background: url('/assets/industrial/perspective-optics-v1.svg') center / cover no-repeat;
  opacity: .16;
}
.perspectives-inner { max-width: 1280px; margin-inline: auto; }
.perspectives-header { max-width: 760px; margin-bottom: 34px; }
.perspectives-header h2 {
  margin: 0 0 13px;
  color: var(--industrial-ivory);
  font: 400 clamp(34px, 3.8vw, 52px)/1.08 "Douglas Burlington", sans-serif;
}
.perspectives-header p { margin: 0; color: var(--industrial-muted); font: 400 21px/1.5 "Barlow Condensed", sans-serif; }
.perspectives-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.perspective-card { display: block; min-width: 0; color: var(--industrial-ivory); text-decoration: none; }
.perspective-image {
  display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid #b79b6966; border-radius: 4px;
  background: var(--industrial-deep);
}
.perspective-image::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 3px 10px #0008; }
.perspective-image img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(.86); transition: filter .3s; }
.perspective-caption { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 20px; }
.perspective-caption h3 { margin: 0; font: 400 30px/1.15 "Barlow Condensed", sans-serif; }
.perspective-caption p { margin: 7px 0 0; color: var(--industrial-muted); font: 400 19px/1.4 "Barlow Condensed", sans-serif; }
.perspective-arrow { color: #c9ae80; font: 300 35px/1 sans-serif; transition: color .25s, text-shadow .25s; }
.perspective-card:hover .perspective-image img, .perspective-card:focus-visible .perspective-image img { filter: brightness(1); }
.perspective-card:hover .perspective-arrow, .perspective-card:focus-visible .perspective-arrow { color: #f0d7a9; text-shadow: 0 0 13px #d3a35e55; }
.portfolio-jump-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 28px; margin: 0 0 48px; }
.portfolio-jump-links a { color: var(--industrial-muted); font: 400 19px/1.3 "Barlow Condensed", sans-serif; text-decoration-color: #ac8c5566; text-underline-offset: 6px; }
.portfolio-jump-links a:hover, .portfolio-jump-links a:focus-visible { color: var(--industrial-amber-hover); }
.project-gallery-anchor { scroll-margin-top: 32px; }
@media (max-width: 760px) {
  .portfolio-perspectives { padding: 48px 24px 64px; }
  .perspectives-grid { grid-template-columns: 1fr; gap: 36px; }
  .perspectives-header { margin-bottom: 26px; }
  .perspectives-header p { font-size: 20px; }
  .perspective-caption { padding-top: 15px; }
  .perspective-caption h3 { font-size: 27px; }
}
@media (hover: none) { .perspective-image img { filter: none; } }
@media (prefers-reduced-motion: reduce) { .perspective-image img, .perspective-arrow { transition: none; } }