.portfolio-page {
  background: var(--color-obsidian);
}

.portfolio-page button {
  font: inherit;
}

.portfolio-hero {
  position: relative;
  min-width: 0;
  padding-block: var(--space-8);
  overflow: hidden;
  background: var(--color-obsidian);
}

.portfolio-hero__media {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 38.75rem;
}

.portfolio-hero__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(8 9 13 / 78%) 0%, rgb(26 16 27 / 54%) 38%, rgb(8 9 13 / 20%) 72%);
  content: "";
}

.portfolio-hero__media img {
  width: 100%;
  height: 100%;
  min-height: 38.75rem;
  object-fit: cover;
}

.portfolio-hero__container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: end;
  min-width: 0;
  padding-bottom: var(--space-8);
}

.portfolio-hero__panel {
  display: flex;
  flex: 0 1 clamp(28.75rem, 39vw, 33.75rem);
  flex-direction: column;
  min-width: 0;
  gap: var(--space-5);
  padding: var(--space-7);
  border: var(--border-copper);
  background: rgb(26 16 27 / 92%);
  box-shadow: var(--shadow-panel);
}

.portfolio-hero__panel > * { margin: 0; }
.portfolio-hero__panel .lead { max-width: 48ch; }
.portfolio-hero__panel .button { align-self: flex-start; }

.portfolio-reading__grid,
.portfolio-tempo__grid,
.portfolio-reflection__grid,
.portfolio-inquiry__grid {
  display: grid;
  min-width: 0;
  gap: var(--space-8);
}

.portfolio-reading__grid { grid-template-columns: minmax(0, 7fr) minmax(16.25rem, 3fr); }
.portfolio-reading__intro { min-width: 0; max-width: 45rem; }
.portfolio-reading__intro .lead { max-width: 66ch; }
.portfolio-reading__notes { display: flex; flex-direction: column; min-width: 0; gap: var(--space-5); }
.portfolio-reading__notes > * { min-width: 0; }

.portfolio-note {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-3);
  padding: var(--space-5);
  border-top: var(--border-structural);
  border-bottom: var(--border-structural);
}
.portfolio-note--copper { border: var(--border-copper); }
.portfolio-note > * { margin: 0; }
.portfolio-note h3 { font-size: clamp(1.5rem, 2vw, 2rem); }
.portfolio-note__label,
.portfolio-occasion > span,
.portfolio-reflection__list > article > span {
  color: var(--color-aged-copper);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: var(--leading-micro);
  text-transform: uppercase;
}

.portfolio-gallery__heading,
.portfolio-program__heading,
.portfolio-occasions__heading,
.portfolio-acts__heading { min-width: 0; max-width: 42.5rem; }
.portfolio-gallery__heading .lead { max-width: 66ch; }

.portfolio-gallery__mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(19rem, 1fr) minmax(19rem, 1fr) auto;
  min-width: 0;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.portfolio-gallery__item,
.portfolio-tempo__media,
.portfolio-program__media,
.portfolio-program__toast {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: var(--border-copper);
  border-radius: 0;
  background: var(--color-deep-petrol);
  color: var(--color-pale-bone);
  text-align: left;
}

.portfolio-gallery__item img,
.portfolio-tempo__media img,
.portfolio-program__media img,
.portfolio-program__toast img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-image);
}

.portfolio-gallery__item:hover img,
.portfolio-tempo__media:hover img,
.portfolio-program__media:hover img,
.portfolio-program__toast:hover img { transform: scale(1.025); }
.portfolio-gallery__item--host { grid-column: 1 / span 4; grid-row: 1 / span 2; }
.portfolio-gallery__item--table { grid-column: 5 / span 8; grid-row: 1; }
.portfolio-gallery__item--chef { grid-column: 5 / span 7; grid-row: 2; }
.portfolio-gallery__item--company { grid-column: 12 / span 1; grid-row: 2; display: none; }

.portfolio-gallery__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid rgb(181 106 69 / 55%);
  background: rgb(8 9 13 / 78%);
  color: var(--color-pale-bone);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: var(--leading-caption);
  text-transform: uppercase;
}

.portfolio-gallery__detail {
  display: grid;
  grid-column: 1 / span 8;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
  min-width: 0;
  gap: var(--space-5);
  margin-top: var(--space-4);
  align-items: center;
}
.portfolio-gallery__detail > * { min-width: 0; }
.portfolio-gallery__item--detail { aspect-ratio: 1; }
.portfolio-gallery__detail .disclaimer { max-width: 42ch; margin: 0; }

.portfolio-tempo__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.portfolio-tempo__copy { min-width: 0; max-width: 35rem; }
.portfolio-tempo__copy > :last-child { margin-bottom: 0; }
.portfolio-tempo__media { min-height: 0; margin-top: var(--space-8); aspect-ratio: 16 / 10; }

.portfolio-acts__heading { max-width: 42.5rem; }
.portfolio-acts__list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); min-width: 0; gap: var(--space-6) var(--space-5); margin-top: var(--space-7); }
.portfolio-act { display: grid; grid-template-columns: 5rem minmax(0, 1fr); min-width: 0; gap: var(--space-4); padding-block: var(--space-5); border-top: var(--border-structural); }
.portfolio-act > * { min-width: 0; }
.portfolio-act > div { max-width: 36rem; }
.portfolio-act > div > :last-child { margin-bottom: 0; }
.portfolio-act__number { color: rgb(181 106 69 / 55%); font-family: var(--font-serif); font-size: clamp(3.5rem, 6vw, 6rem); line-height: .8; }
.portfolio-act--one { grid-column: 1 / span 6; }
.portfolio-act--two { grid-column: 4 / span 9; }
.portfolio-act--three { grid-column: 1 / span 6; }
.portfolio-act--four { grid-column: 4 / span 9; }

.portfolio-program__heading .lead { max-width: 62ch; }
.portfolio-program__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); min-width: 0; gap: var(--space-5); margin-top: var(--space-7); align-items: start; }
.portfolio-program__media { grid-column: 1 / span 9; aspect-ratio: 3 / 2; }
.portfolio-program__notice { grid-column: 10 / span 3; display: flex; flex-direction: column; min-width: 16.25rem; gap: var(--space-3); padding: var(--space-5); border-top: var(--border-copper); border-bottom: var(--border-copper); background: var(--color-deep-petrol); }
.portfolio-program__notice > * { margin: 0; }
.portfolio-program__notice h3 { font-size: clamp(1.5rem, 2vw, 2rem); }
.portfolio-program__closing { grid-column: 3 / span 5; min-width: 0; max-width: 33.75rem; padding-top: var(--space-6); }
.portfolio-program__closing > :last-child { margin-bottom: 0; }
.portfolio-program__toast { grid-column: 9 / span 4; aspect-ratio: 4 / 5; }

.portfolio-occasions__heading .lead { max-width: 62ch; }
.portfolio-occasions__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); min-width: 0; gap: var(--space-5); margin-top: var(--space-7); align-items: start; }
.portfolio-occasion { display: flex; flex-direction: column; min-width: 0; gap: var(--space-4); padding: var(--space-5); }
.portfolio-occasion > * { margin: 0; }
.portfolio-occasion h3 { font-size: clamp(1.75rem, 2.6vw, 2.4rem); }
.portfolio-occasion a { align-self: flex-start; min-height: 2.75rem; display: inline-flex; align-items: center; color: var(--color-pale-bone); font-size: var(--text-caption); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.portfolio-occasion--private { grid-column: 1 / span 4; background: var(--color-smoked-plum); }
.portfolio-occasion--team { grid-column: 5 / span 5; margin-top: var(--space-7); border-top: var(--border-copper); background: var(--color-deep-petrol); }
.portfolio-occasion--celebration { grid-column: 10 / span 3; border: var(--border-copper); background: var(--color-obsidian); }

.portfolio-reflection__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.portfolio-reflection__intro { min-width: 0; max-width: 35rem; }
.portfolio-reflection__intro .lead { max-width: 60ch; }
.portfolio-reflection__list { display: flex; flex-direction: column; min-width: 0; gap: var(--space-5); }
.portfolio-reflection__list > article { display: flex; flex-direction: column; min-width: 0; gap: var(--space-3); padding: 0 0 var(--space-5) var(--space-5); border-bottom: var(--border-structural); }
.portfolio-reflection__list > article > * { margin: 0; }
.portfolio-reflection__list h3 { font-size: clamp(1.5rem, 2.3vw, 2.1rem); }
.portfolio-reflection__rule { border-bottom-color: var(--color-aged-copper) !important; }

.portfolio-inquiry__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); column-gap: calc(var(--space-8) * 1.5); align-items: start; }
.portfolio-inquiry__intro { min-width: 0; max-width: 28.75rem; }
.portfolio-inquiry__intro .lead { max-width: 48ch; }
.portfolio-form { display: flex; flex-direction: column; min-width: 0; gap: var(--space-5); padding: var(--space-7); border: var(--border-structural); background: var(--color-deep-petrol); }
.portfolio-form > * { min-width: 0; margin: 0; }
.portfolio-form__header { display: flex; flex-direction: column; gap: var(--space-2); }
.portfolio-form__header > * { margin: 0; }
.portfolio-form__header h3 { font-size: clamp(1.75rem, 2.6vw, 2.4rem); }
.portfolio-form__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; gap: var(--space-4); }
.portfolio-form__field { display: flex; flex-direction: column; min-width: 0; gap: var(--space-2); }
.portfolio-form__field > * { min-width: 0; margin: 0; }
.portfolio-form__field--full { grid-column: 1 / -1; }
.portfolio-form__field small { color: var(--color-cool-ash); font-size: var(--text-small); line-height: var(--leading-small); }
.portfolio-form__error { min-height: 1.25rem; color: var(--color-focus-copper) !important; }
.portfolio-form__submit { align-self: flex-start; }
.portfolio-form__status { min-height: 1.65rem; color: var(--color-pale-bone); }
.portfolio-form__disclaimer { display: flex; flex-direction: column; gap: var(--space-3); }
.portfolio-form__disclaimer > * { margin: 0; }

.portfolio-closing { padding: var(--space-9) 0 var(--space-10); }
.portfolio-closing__content { display: flex; flex-direction: column; min-width: 0; max-width: 32.5rem; gap: var(--space-4); }
.portfolio-closing__content > * { margin: 0; }
.portfolio-closing__content .rule { width: 3rem; }
.portfolio-closing__content h2 { font-size: clamp(2rem, 3vw, 3rem); }
.portfolio-closing__content a { display: inline-flex; align-items: center; align-self: flex-start; min-height: 2.75rem; color: var(--color-pale-bone); font-size: var(--text-caption); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.portfolio-lightbox { width: min(96vw, 75rem); max-width: 100%; max-height: 94vh; padding: 0; border: var(--border-copper); background: var(--color-obsidian); color: var(--color-pale-bone); }
.portfolio-lightbox::backdrop { background: rgb(8 9 13 / 88%); }
.portfolio-lightbox__inner { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr) 3rem; align-items: center; min-width: 0; min-height: 0; padding: var(--space-5); gap: var(--space-3); }
.portfolio-lightbox figure { min-width: 0; margin: 0; }
.portfolio-lightbox figure img { width: 100%; max-height: 75vh; object-fit: contain; }
.portfolio-lightbox figcaption { margin: var(--space-3) 0 0; }
.portfolio-lightbox button { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: var(--border-copper); background: var(--color-smoked-plum); color: var(--color-pale-bone); font-size: 1.5rem; }
.portfolio-lightbox__close { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2; }

@media (max-width: 899px) {
  .portfolio-hero { padding: 0; }
  .portfolio-hero__media, .portfolio-hero__media img { min-height: 0; height: auto; aspect-ratio: 16 / 10; }
  .portfolio-hero__container { position: static; display: block; padding: 0 var(--container-gutter) var(--space-8); }
  .portfolio-hero__panel { width: 100%; flex-basis: auto; margin-top: 0; padding: var(--space-6) 0 0; border: 0; border-top: var(--border-copper); background: transparent; box-shadow: none; }
  .portfolio-reading__grid, .portfolio-tempo__grid, .portfolio-reflection__grid, .portfolio-inquiry__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .portfolio-reading__intro, .portfolio-tempo__copy, .portfolio-reflection__intro, .portfolio-inquiry__intro { max-width: 45rem; }
  .portfolio-reading__notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-gallery__mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .portfolio-gallery__item--host, .portfolio-gallery__item--table, .portfolio-gallery__item--chef, .portfolio-gallery__item--company { grid-column: auto; grid-row: auto; display: block; }
  .portfolio-gallery__item--host, .portfolio-gallery__item--company { aspect-ratio: 4 / 5; }
  .portfolio-gallery__item--table, .portfolio-gallery__item--chef { aspect-ratio: 3 / 2; }
  .portfolio-gallery__detail { grid-column: 1 / -1; }
  .portfolio-tempo__media { margin-top: 0; }
  .portfolio-acts__list { grid-template-columns: minmax(0, 1fr); }
  .portfolio-act--one, .portfolio-act--two, .portfolio-act--three, .portfolio-act--four { grid-column: 1; }
  .portfolio-program__grid { grid-template-columns: minmax(0, 1fr); }
  .portfolio-program__media, .portfolio-program__notice, .portfolio-program__closing, .portfolio-program__toast { grid-column: 1; min-width: 0; }
  .portfolio-program__toast { width: min(100%, 25rem); }
  .portfolio-program__closing { padding-top: 0; }
  .portfolio-occasions__grid { grid-template-columns: minmax(0, 1fr); }
  .portfolio-occasion--private, .portfolio-occasion--team, .portfolio-occasion--celebration { grid-column: 1; margin-top: 0; }
  .portfolio-form { padding: var(--space-6); }
}

@media (max-width: 639px) {
  .portfolio-hero__panel { gap: var(--space-4); }
  .portfolio-hero__panel h1 { font-size: clamp(2.375rem, 11vw, 3.1rem); }
  .portfolio-hero__panel .lead, .portfolio-reading__intro .lead, .portfolio-gallery__heading .lead, .portfolio-program__heading .lead, .portfolio-occasions__heading .lead, .portfolio-reflection__intro .lead, .portfolio-inquiry__intro .lead { font-size: 1.125rem; }
  .portfolio-reading__notes { grid-template-columns: minmax(0, 1fr); }
  .portfolio-gallery__mosaic { grid-template-columns: minmax(0, 1fr); }
  .portfolio-gallery__detail { grid-column: 1; grid-template-columns: minmax(0, 1fr); }
  .portfolio-gallery__detail .disclaimer { max-width: 48ch; }
  .portfolio-act { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .portfolio-act__number { font-size: 3rem; }
  .portfolio-form { padding: var(--space-5); }
  .portfolio-form__fields { grid-template-columns: minmax(0, 1fr); }
  .portfolio-form__field--full { grid-column: 1; }
  .portfolio-form__submit { width: 100%; min-height: 3rem; }
  .portfolio-lightbox__inner { grid-template-columns: minmax(0, 1fr); padding: var(--space-5) var(--space-3) var(--space-3); }
  .portfolio-lightbox__previous, .portfolio-lightbox__next { position: absolute; bottom: var(--space-3); z-index: 2; }
  .portfolio-lightbox__previous { left: var(--space-3); }
  .portfolio-lightbox__next { right: var(--space-3); }
  .portfolio-lightbox figure { padding-bottom: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-gallery__item:hover img,
  .portfolio-tempo__media:hover img,
  .portfolio-program__media:hover img,
  .portfolio-program__toast:hover img { transform: none; }
}