/* Consistent frames keep the collection easy to compare. */
.portfolio-page { background: var(--bone); color: var(--ink); }
.portfolio-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 30px; align-items: end; padding-block: 52px 64px; }
.portfolio-intro > div:first-child { grid-column: span 7; }
.portfolio-intro .page-kicker, .portfolio-gallery-label { margin: 0; color: #52614e; font-size: 10px; font-weight: 600; letter-spacing: .16em; line-height: 1.5; text-transform: uppercase; }
.portfolio-intro .page-kicker { margin-bottom: 23px; }
.portfolio-intro h1 { margin: 0; font-size: clamp(48px, 5.1vw, 74px); font-weight: 450; letter-spacing: -.052em; line-height: .98; }
.portfolio-intro-copy { grid-column: 9 / -1; padding-bottom: 3px; }
.portfolio-intro-copy p { max-width: 40ch; margin: 0 0 23px; color: #4b514a; font-size: 16px; line-height: 1.7; }

.portfolio-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 30px; row-gap: 60px; padding-bottom: 112px; }
.portfolio-gallery-label { display: flex; grid-column: 1 / -1; justify-content: space-between; margin-bottom: -25px; padding-top: 18px; border-top: 1px solid #cbd0c4; }
.portfolio-project { min-width: 0; margin: 0; }
.portfolio-image { position: relative; overflow: hidden; aspect-ratio: 3 / 2; }
.portfolio-project img { display: block; width: 100%; height: 100%; object-fit: cover; }
#project-oasis-elegance img { object-position: 55% 50%; }
#project-arid-elegance img { object-position: 50% 42%; }
.portfolio-project figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: baseline; margin-top: 14px; color: var(--ink); font-size: clamp(16px, 1.2vw, 18px); font-weight: 450; letter-spacing: -.025em; line-height: 1.25; }
.portfolio-number { display: flex; align-items: center; gap: 9px; color: #52614e; font-size: 10px; font-weight: 600; letter-spacing: .12em; line-height: 1.5; }
.portfolio-number::before { width: 38px; height: 1px; background: var(--brand); content: ""; }
.portfolio-project h2 { margin: 0; font: inherit; }

.portfolio-contact { padding-block: 0 112px; }
.portfolio-contact::before { display: block; height: 1px; margin-bottom: 56px; background: #cbd0c4; content: ""; }
.portfolio-contact h2 { max-width: 12ch; margin: 0; font-size: clamp(36px, 4.15vw, 58px); font-weight: 450; letter-spacing: -.05em; line-height: 1.02; }
.portfolio-contact p { max-width: 48ch; margin: 24px 0; color: #4b514a; font-size: 16px; line-height: 1.7; }

@media (max-width: 1100px) {
  .portfolio-intro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .portfolio-intro > div:first-child, .portfolio-intro-copy { grid-column: auto; }
  .portfolio-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 56px; }
}

@media (max-width: 720px) {
  .portfolio-intro { display: block; padding-block: 28px 40px; }
  .portfolio-intro-copy { margin-top: 28px; }
  .portfolio-intro-copy p, .portfolio-contact p { font-size: 15px; }
  .portfolio-gallery { display: block; padding-bottom: 72px; }
  .portfolio-gallery-label { display: flex; margin-bottom: 38px; }
  .portfolio-project { margin-bottom: 38px; }
  .portfolio-project figcaption { margin-top: 12px; font-size: 16px; }
  .portfolio-contact { padding-bottom: 72px; }
  .portfolio-contact::before { margin-bottom: 40px; }
}