.portfolio-page {
  overflow-x: hidden;
}.portfolio-page .browse-brands,
.portfolio-page .brand-preview,
.portfolio-page .brand-preview-heading,
.portfolio-page .showcase-grid {
  min-width: 0;
  max-width: 100%;
}.portfolio-page .brand-preview-list {
  border-top: 1px solid var(--gold-line);
}.portfolio-page .brand-preview {
  padding-block: clamp(4.5rem, 8vw, 7.5rem);
  border-bottom: 1px solid var(--gold-line);
}.portfolio-page .brand-preview-heading {
  display: block;
  width: 100%;
  margin-bottom: clamp(2.25rem, 5vw, 4rem);
}.portfolio-page .brand-index {
  margin: 0 0 0.7rem;
  color: var(--gold-light);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}.portfolio-page .brand-preview-heading h3 {
  width: 100%;
  max-width: 100%;
  margin: 0;
  color: var(--silver-bright);
  font-size: clamp(2.6rem, 5.15vw, 5.15rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: 0.01em;
  white-space: normal;
  text-wrap: balance;
}.portfolio-page .brand-description {
  max-width: 760px;
  margin: 1rem 0 0;
  color: var(--silver-muted);
  font-size: 1rem;
}.portfolio-page .showcase-grid {
  display: grid;
  gap: clamp(0.8rem, 1.35vw, 1.25rem);
  width: 100%;
}.portfolio-page .showcase-card {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--gold-line);
  background: #101012;
  transition:
    border-color 240ms ease,
    transform 420ms var(--ease),
    filter 240ms ease;
}.portfolio-page .showcase-card:hover {
  border-color: rgba(241, 221, 160, 0.78);
  transform: translateY(-3px);
  filter: brightness(1.04);
}.portfolio-page .showcase-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 650ms var(--ease);
}.portfolio-page .showcase-card:hover img {
  transform: scale(1.015);
}.portfolio-page .showcase-mfa {
  grid-template-columns: minmax(0, 1.56fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  aspect-ratio: 2.56 / 2.02;
}.portfolio-page .mfa-magazine {
  grid-column: 1;
  grid-row: 1 / 3;
}.portfolio-page .mfa-burlington {
  grid-column: 2;
  grid-row: 1;
}.portfolio-page .mfa-martinsburg {
  grid-column: 2;
  grid-row: 2;
}.portfolio-page .showcase-freelance {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "drew docgreen"
    "thumbnail thumbnail";
}.portfolio-page .freelance-drew {
  grid-area: drew;
  aspect-ratio: 1;
}.portfolio-page .freelance-docgreen {
  grid-area: docgreen;
  aspect-ratio: 1;
}.portfolio-page .freelance-thumbnail {
  grid-area: thumbnail;
  aspect-ratio: 16 / 9;
}.portfolio-page .showcase-winger {
  grid-template-columns:
    minmax(0, 1.72fr)
    minmax(0, 1fr)
    minmax(0, 1.72fr);
  grid-template-rows: minmax(0, 1fr);
  aspect-ratio: 4.44 / 1;
}.portfolio-page .winger-magazine {
  grid-column: 1;
}.portfolio-page .winger-logo {
  grid-column: 2;
}.portfolio-page .winger-social {
  grid-column: 3;
}.portfolio-page .showcase-aob {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}.portfolio-page .showcase-aob .showcase-card {
  aspect-ratio: 8.5 / 11;
}.portfolio-page .showcase-shoptalk {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "square-one square-two"
    "wide wide";
}.portfolio-page .shoptalk-square-one {
  grid-area: square-one;
  aspect-ratio: 1;
}.portfolio-page .shoptalk-square-two {
  grid-area: square-two;
  aspect-ratio: 1;
}.portfolio-page .shoptalk-wide {
  grid-area: wide;
  aspect-ratio: 16 / 9;
}.portfolio-page .brand-view-button {
  display: inline-flex;
  margin-top: 2rem;
}@media (max-width: 980px) {
  .portfolio-page .showcase-winger {
    grid-template-columns: 1.5fr 1fr 1.5fr;
    aspect-ratio: 4 / 1;
  }

  .portfolio-page .brand-preview-heading h3 {
    font-size: clamp(2.5rem, 8vw, 4.4rem);
  }
}@media (max-width: 700px) {
  .portfolio-page .showcase-mfa,
  .portfolio-page .showcase-freelance,
  .portfolio-page .showcase-winger,
  .portfolio-page .showcase-aob,
  .portfolio-page .showcase-shoptalk {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: none;
    aspect-ratio: auto;
  }

  .portfolio-page .showcase-grid .showcase-card {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .portfolio-page .mfa-magazine,
  .portfolio-page .showcase-aob .showcase-card {
    aspect-ratio: 8.5 / 11;
  }

  .portfolio-page .mfa-burlington,
  .portfolio-page .mfa-martinsburg,
  .portfolio-page .winger-magazine,
  .portfolio-page .winger-social {
    aspect-ratio: 11 / 8.5;
  }

  .portfolio-page .freelance-drew,
  .portfolio-page .freelance-docgreen,
  .portfolio-page .winger-logo,
  .portfolio-page .shoptalk-square-one,
  .portfolio-page .shoptalk-square-two {
    aspect-ratio: 1;
  }

  .portfolio-page .freelance-thumbnail,
  .portfolio-page .shoptalk-wide {
    aspect-ratio: 16 / 9;
  }

  .portfolio-page .brand-preview-heading h3 {
    font-size: clamp(2.3rem, 11vw, 4rem);
  }
}.portfolio-page .selected-work-section {
  padding-block: var(--section-pad);
  background: var(--black);
}.portfolio-page .selected-work-heading {
  margin-bottom: clamp(2.75rem, 6vw, 5rem);
}.portfolio-page .selected-work-grid {
  width: min(100%, 1080px);
  margin-inline: auto;
  display: grid;
  gap: clamp(.9rem, 1.5vw, 1.35rem);
}.portfolio-page .selected-square-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 1.5vw, 1.35rem);
}.portfolio-page .selected-work-card {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--gold-line);
  background: #0d0d0f;
  isolation: isolate;
  transition:
    transform 420ms var(--ease),
    border-color 240ms ease,
    filter 240ms ease;
}.portfolio-page .selected-work-card:hover {
  transform: translateY(-3px);
  border-color: rgba(241, 221, 160, .8);
  filter: brightness(1.04);
}.portfolio-page .selected-panorama {
  width: 100%;
  aspect-ratio: 3 / 1;
}.portfolio-page .selected-square {
  aspect-ratio: 1;
}.portfolio-page .selected-work-card img,
.portfolio-page .selected-work-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 700ms var(--ease);
}.portfolio-page .selected-work-card:hover img,
.portfolio-page .selected-work-card:hover video {
  transform: scale(1.015);
}.portfolio-page .selected-mfa-cover img {
  object-position: center top;
}.portfolio-page .selected-work-label {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: grid;
  gap: .22rem;
  padding: clamp(.8rem, 1.6vw, 1.35rem);
  color: var(--silver-bright);
  background: linear-gradient(to top, rgba(3,3,4,.94), rgba(3,3,4,.7) 58%, transparent);
  transform: translateY(.2rem);
  transition: transform 280ms ease;
}.portfolio-page .selected-work-card:hover .selected-work-label {
  transform: translateY(0);
}.portfolio-page .selected-work-label strong {
  font-size: clamp(.92rem, 1.45vw, 1.22rem);
  font-weight: 700;
  line-height: 1.2;
}.portfolio-page .selected-work-label small {
  color: var(--gold-light);
  font-size: clamp(.62rem, .8vw, .72rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}@media (max-width: 760px) {
  .portfolio-page .selected-work-grid {
    width: 100%;
  }

  .portfolio-page .selected-square-row {
    grid-template-columns: 1fr;
  }

  .portfolio-page .selected-panorama {
    aspect-ratio: 16 / 9;
  }

  .portfolio-page .selected-work-label {
    padding: .85rem;
  }
}@media (prefers-reduced-motion: reduce) {
  .portfolio-page .selected-work-card video {
    display: none;
  }

  .portfolio-page .selected-vintage {
    background: url("../images/freelance/vintage-overlays/vintage-1-poster.webp") center / cover no-repeat;
  }

  .portfolio-page .selected-drew {
    background: url("../images/freelance/drewgurnaut/overlay-1-poster.webp") center / cover no-repeat;
  }
}