.site-header nav > a[aria-current="page"] { color: var(--blue); }
.site-header nav > a[aria-current="page"]::after { width: 100%; }
.portfolio-intro { display: grid; grid-template-columns: 1.15fr 1fr; align-items: end; gap: 80px; padding-top: 48px; padding-bottom: 58px; }
.portfolio-intro h1 { font-size: clamp(3rem, 5.7vw, 5.2rem); line-height: 1.08; margin-top: 22px; }
.portfolio-intro-copy { max-width: 390px; justify-self: end; padding-bottom: 4px; }
.portfolio-intro-copy > p { font-size: 1.125rem; line-height: 1.8; }
.portfolio-intro-copy .portfolio-disclosure { font-size: .875rem; line-height: 1.7; margin-top: 23px; color: var(--muted); }
.collection-heading { padding-top: 21px; border-top: 1px solid var(--line); font-size: .75rem; letter-spacing: .12em; }
.portfolio-collage { columns: 4; column-gap: 14px; margin-top: 26px; padding-bottom: 60px; }
.portfolio-tile { position: relative; display: block; width: 100%; margin: 0 0 14px; break-inside: avoid; overflow: hidden; background: #eef0f3; }
.ratio-portrait { aspect-ratio: 4 / 5; }
.ratio-tall { aspect-ratio: 3 / 4; }
.ratio-square { aspect-ratio: 1; }
.portfolio-tile img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; transition: transform .7s var(--ease); }
.portfolio-tile:hover img { transform: scale(1.035); }
.sample-label { position: absolute; right: 10px; bottom: 10px; left: 10px; width: fit-content; max-width: calc(100% - 20px); padding: 5px 8px; font-size: .75rem; line-height: 1.4; color: #353941; background: #fffffff0; }
.portfolio-placeholder { display: flex; align-items: center; justify-content: center; padding: 24px; background: #eff0f2; color: #69707c; }
.portfolio-placeholder:nth-child(3n) { background: #e8eaee; }
.portfolio-placeholder:nth-child(5n) { background: #f5f5f6; }
.slot-number { position: absolute; left: 16px; bottom: 14px; font-size: .75rem; line-height: 1.4; letter-spacing: .1em; color: #6c727e; }
.slot-copy { max-width: 10em; text-align: center; font-size: .875rem; line-height: 1.6; }
.portfolio-next { padding-top: 60px; padding-bottom: 65px; display: flex; justify-content: space-between; gap: 40px; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.portfolio-next h2 { font-size: clamp(2rem, 3.5vw, 3.25rem); margin: 19px 0; }
.portfolio-next p { max-width: 485px; font-size: 1rem; }
.portfolio-next .button { flex-shrink: 0; }
.portfolio-page .site-header nav > a.button::after { display: none; }
@media (max-width: 1000px) {
  .portfolio-intro { gap: 40px; }
  .portfolio-collage { columns: 3; column-gap: 12px; }
  .portfolio-tile { margin-bottom: 12px; }
}
@media (max-width: 750px) {
  .portfolio-intro { gap: 26px; grid-template-columns: 1fr; padding-top: 30px; padding-bottom: 40px; }
  .portfolio-intro-copy { max-width: 480px; justify-self: start; }
  .portfolio-intro-copy > p { font-size: 1rem; }
  .portfolio-intro-copy .portfolio-disclosure { margin-top: 13px; }
  .portfolio-collage { columns: 2; }
  .portfolio-next { align-items: flex-start; flex-direction: column; gap: 26px; padding-block: 44px; }
}
@media (max-width: 500px) {
  .portfolio-intro h1 { font-size: clamp(2.6rem, 11vw, 3.6rem); }
  .collection-heading { letter-spacing: .08em; }
  .portfolio-collage { column-gap: 10px; margin-top: 22px; padding-bottom: 35px; }
  .portfolio-tile { margin-bottom: 10px; }
  .portfolio-placeholder { padding: 16px; }
  .slot-number { left: 10px; bottom: 10px; }
  .sample-label { left: 6px; right: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 4px 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-tile img { transition: none; }
  .portfolio-tile:hover img { transform: none; }
}

/* Portrait and landscape photographs share a quiet, flexible collage. */
.portfolio-collage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 14px; columns: auto; align-items: start; }
.portfolio-tile { margin: 0; }
.portfolio-tile.landscape { grid-column: span 2; }
.portfolio-tile img { position: static; width: 100%; height: auto; object-fit: contain; }
@media(max-width:750px) { .portfolio-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }