.portfolio-page {
  overflow: hidden;
}

.portfolio-page .portfolio-hero {
  padding-block: var(--space-8) var(--space-9);
  background: var(--color-theatre-black);
}

.portfolio-page .portfolio-hero__inner {
  display: grid;
  grid-template-columns: minmax(34rem, 5fr) minmax(0, 7fr);
  gap: var(--space-6);
  align-items: center;
}

.portfolio-page .portfolio-hero__copy,
.portfolio-page .portfolio-hero__media,
.portfolio-page .portfolio-lens__intro,
.portfolio-page .portfolio-lens__card,
.portfolio-page .portfolio-feature__media,
.portfolio-page .portfolio-feature__panel,
.portfolio-page .portfolio-celebration__copy,
.portfolio-page .portfolio-celebration__media,
.portfolio-page .portfolio-themed__intro,
.portfolio-page .portfolio-themed__notice,
.portfolio-page .portfolio-themed__media,
.portfolio-page .portfolio-themed__details,
.portfolio-page .portfolio-craft__intro,
.portfolio-page .portfolio-craft__block,
.portfolio-page .portfolio-tailored__intro,
.portfolio-page .portfolio-tailored__row,
.portfolio-page .portfolio-close__copy,
.portfolio-page .portfolio-close__field {
  min-width: 0;
}

.portfolio-page .portfolio-hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  background: var(--color-wine-shadow);
  border-top: 1px solid var(--color-antique-brass);
}

.portfolio-page .portfolio-hero__copy > * {
  margin: 0;
}

.portfolio-page .portfolio-hero__copy h1 {
  max-width: 40rem;
  font-size: clamp(3rem, 5.2vw, 4rem);
}

.portfolio-page .portfolio-hero__copy .lead {
  max-width: 40rem;
}

.portfolio-page .portfolio-hero__actions {
  width: 100%;
}

.portfolio-page .portfolio-hero__context {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 40rem;
}

.portfolio-page .portfolio-hero__context .rule {
  margin: 0;
}

.portfolio-page .portfolio-hero__context p {
  margin: 0;
  color: var(--color-warm-stone);
  font-size: var(--text-sm);
}

.portfolio-page .portfolio-hero__media {
  width: calc(100% + max(0px, (100vw - var(--container-max)) / 2));
  margin: 0;
  align-self: stretch;
}

.portfolio-page .portfolio-hero__media img {
  width: 100%;
  height: 100%;
  min-height: 34rem;
  object-fit: cover;
  object-position: 72% center;
}

.portfolio-page .portfolio-lens__intro {
  max-width: 52rem;
}

.portfolio-page .portfolio-lens__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.portfolio-page .portfolio-lens__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 100%;
}

.portfolio-page .portfolio-lens__card > * {
  margin: 0;
}

.portfolio-page .portfolio-index {
  display: block;
  color: var(--color-antique-brass);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
}

.portfolio-page .portfolio-index--ruby {
  color: var(--color-ruby-bright);
}

.portfolio-page .portfolio-feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(30rem, 5fr);
  gap: var(--space-6);
  align-items: start;
}

.portfolio-page .portfolio-feature__media {
  width: 100%;
  margin: 0;
}

.portfolio-page .portfolio-feature__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

.portfolio-page .portfolio-feature__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-top: 1px solid var(--color-antique-brass);
  background: var(--color-wine-shadow);
}

.portfolio-page .portfolio-feature__panel > * {
  margin: 0;
}

.portfolio-page .portfolio-feature__panel h2,
.portfolio-page .portfolio-feature__panel > p {
  max-width: 38rem;
}

.portfolio-page .portfolio-feature__panel .rule {
  margin: var(--space-1) 0;
}

.portfolio-page .portfolio-scope {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
}

.portfolio-page .portfolio-scope > div {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-dark-border);
}

.portfolio-page .portfolio-scope dt {
  color: var(--color-antique-brass);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.portfolio-page .portfolio-scope dd {
  margin: var(--space-1) 0 0;
}

.portfolio-page .portfolio-celebration__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 1fr) minmax(0, 5fr);
  gap: var(--space-5);
  align-items: start;
}

.portfolio-page .portfolio-celebration__copy {
  grid-column: 1;
  max-width: 42rem;
}

.portfolio-page .portfolio-celebration__media {
  grid-column: 3;
  width: 100%;
  margin: var(--space-7) 0 0;
}

.portfolio-page .portfolio-celebration__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}

.portfolio-page .portfolio-emphasis {
  max-width: 34rem;
  margin-top: var(--space-6);
  padding: var(--space-4) 0 var(--space-4) var(--space-5);
  border-left: 2px solid var(--color-ruby-primary);
}

.portfolio-page .portfolio-emphasis h3 {
  margin-bottom: var(--space-3);
}

.portfolio-page .portfolio-emphasis--quiet {
  border-left-color: var(--color-antique-brass);
}

.portfolio-page .portfolio-emphasis--quiet .text-link {
  display: inline-block;
}

.portfolio-page .portfolio-themed {
  padding-block: clamp(var(--space-8), 8vw, var(--space-10));
}

.portfolio-page .portfolio-themed__intro {
  max-width: 44rem;
}

.portfolio-page .portfolio-themed__notice {
  max-width: 48rem;
  margin-top: var(--space-6);
}

.portfolio-page .portfolio-compliance-label {
  display: block;
  margin-bottom: var(--space-2);
  color: #ff8797;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.portfolio-page .portfolio-themed__feature {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-7);
}

.portfolio-page .portfolio-themed__media {
  width: 100%;
  margin: 0;
}

.portfolio-page .portfolio-themed__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

.portfolio-page .portfolio-themed__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.portfolio-page .portfolio-programme-row {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-dark-border);
}

.portfolio-page .portfolio-programme-row > span {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-antique-brass);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.portfolio-page .portfolio-programme-row p {
  margin: 0;
}

.portfolio-page .portfolio-themed__details .text-link {
  align-self: flex-start;
}

.portfolio-page .portfolio-craft__intro {
  max-width: 48rem;
}

.portfolio-page .portfolio-craft__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.portfolio-page .portfolio-craft__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-dark-border);
}

.portfolio-page .portfolio-craft__block > * {
  margin: 0;
}

.portfolio-page .portfolio-craft__block .text-link {
  margin-top: auto;
}

.portfolio-page .portfolio-tailored__intro {
  width: 75%;
  margin-left: 8.333%;
  max-width: 50rem;
}

.portfolio-page .portfolio-tailored__intro .rule {
  margin-top: var(--space-4);
}

.portfolio-page .portfolio-tailored__rows {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-7);
  border-top: 1px solid var(--color-dark-border);
}

.portfolio-page .portfolio-tailored__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 10fr);
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-dark-border);
}

.portfolio-page .portfolio-tailored__row > span {
  color: var(--color-antique-brass);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.portfolio-page .portfolio-tailored__row > div {
  min-width: 0;
  max-width: 52rem;
}

.portfolio-page .portfolio-tailored__row h3 {
  margin-bottom: var(--space-2);
}

.portfolio-page .portfolio-tailored__row p {
  margin-bottom: var(--space-3);
}

.portfolio-page .portfolio-close {
  padding-top: var(--space-8);
}

.portfolio-page .portfolio-close__panel {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  border-top: 1px solid var(--color-antique-brass);
  background: var(--color-wine-shadow);
}

.portfolio-page .portfolio-close__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(var(--space-5), 5vw, var(--space-8));
}

.portfolio-page .portfolio-close__copy > * {
  margin: 0;
}

.portfolio-page .portfolio-close__copy h2,
.portfolio-page .portfolio-close__copy .lead {
  max-width: 44rem;
}

.portfolio-page .portfolio-close__actions {
  width: 100%;
}

.portfolio-page .portfolio-close__note {
  max-width: 44rem;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-dark-border);
}

.portfolio-page .portfolio-close__note p {
  margin: 0;
  font-size: var(--text-sm);
}

.portfolio-page .portfolio-close__field {
  background: linear-gradient(135deg, rgba(143, 16, 37, 0.34), transparent 62%);
}

@media (max-width: 67.5rem) {
  .portfolio-page .portfolio-craft__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 65rem) {
  .portfolio-page .portfolio-hero__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-page .portfolio-hero__media {
    width: 100%;
  }

  .portfolio-page .portfolio-hero__media img {
    min-height: 30rem;
  }
}

@media (max-width: 61.25rem) {
  .portfolio-page .portfolio-feature__grid,
  .portfolio-page .portfolio-themed__feature {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-page .portfolio-feature__panel {
    padding: var(--space-5);
  }

  .portfolio-page .portfolio-celebration__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-page .portfolio-celebration__media {
    grid-column: 2;
  }
}

@media (max-width: 56.25rem) {
  .portfolio-page .portfolio-lens__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-page .portfolio-lens__card:nth-child(3) {
    grid-column: 1 / -1;
  }

  .portfolio-page .portfolio-close__panel {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  }
}

@media (max-width: 53.75rem) {
  .portfolio-page .portfolio-tailored__intro {
    width: 100%;
    margin-left: 0;
  }

  .portfolio-page .portfolio-tailored__row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

@media (max-width: 47.5rem) {
  .portfolio-page .portfolio-hero {
    padding-block: var(--space-7) var(--space-8);
  }

  .portfolio-page .portfolio-hero__inner,
  .portfolio-page .portfolio-feature__grid,
  .portfolio-page .portfolio-celebration__grid,
  .portfolio-page .portfolio-themed__feature,
  .portfolio-page .portfolio-close__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .portfolio-page .portfolio-hero__copy {
    padding: var(--space-5);
  }

  .portfolio-page .portfolio-hero__copy h1 {
    font-size: clamp(2.375rem, 10vw, 3rem);
  }

  .portfolio-page .portfolio-hero__media {
    grid-row: 2;
  }

  .portfolio-page .portfolio-hero__media img {
    min-height: 0;
    aspect-ratio: 4 / 5;
    object-position: 65% top;
  }

  .portfolio-page .portfolio-feature__media,
  .portfolio-page .portfolio-themed__media {
    grid-row: 1;
  }

  .portfolio-page .portfolio-feature__media img,
  .portfolio-page .portfolio-themed__media img {
    aspect-ratio: 4 / 5;
    object-position: center top;
  }

  .portfolio-page .portfolio-feature__panel {
    grid-row: 2;
    padding: var(--space-5);
  }

  .portfolio-page .portfolio-celebration__copy {
    grid-column: 1;
  }

  .portfolio-page .portfolio-celebration__media {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
  }

  .portfolio-page .portfolio-celebration__copy p:first-of-type {
    margin-bottom: var(--space-6);
  }

  .portfolio-page .portfolio-celebration__copy {
    display: contents;
  }

  .portfolio-page .portfolio-celebration__copy .eyebrow,
  .portfolio-page .portfolio-celebration__copy h2,
  .portfolio-page .portfolio-celebration__copy > p {
    grid-column: 1;
  }

  .portfolio-page .portfolio-celebration__media {
    grid-column: 1;
  }

  .portfolio-page .portfolio-emphasis {
    grid-column: 1;
    max-width: 34rem;
  }

  .portfolio-page .portfolio-themed__details {
    grid-row: 2;
  }

  .portfolio-page .portfolio-close__field {
    display: none;
  }

  .portfolio-page .portfolio-close__copy {
    padding: var(--space-5);
  }
}

@media (max-width: 32.5rem) {
  .portfolio-page .portfolio-lens__grid,
  .portfolio-page .portfolio-craft__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .portfolio-page .portfolio-lens__card:nth-child(3) {
    grid-column: auto;
  }

  .portfolio-page .portfolio-craft__block {
    padding-block: var(--space-5);
  }
}