.portfolio-custom-remove {
  display: none !important;
}

.portfolio-videos-active .portfolio-filter-button:not([aria-pressed="true"]) > div {
  opacity: 0 !important;
}

.portfolio-videos-active .portfolio-filter-button:not([aria-pressed="true"]) span {
  color: #665e55 !important;
}

.portfolio-video-gallery {
  width: 100%;
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  align-items: start;
  gap: 1.25rem;
}

.portfolio-video-gallery[hidden] {
  display: none !important;
}

.portfolio-video-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(35, 31, 27, 0.12);
  border-radius: 0.75rem;
  background: #151515;
  box-shadow: 0 0.8rem 2rem rgba(35, 31, 27, 0.12);
}

.portfolio-video-horizontal {
  grid-column: span 6;
  aspect-ratio: 16 / 9;
}

.portfolio-video-vertical {
  grid-column: span 4;
  aspect-ratio: 9 / 16;
}

.portfolio-video-card iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.portfolio-video-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 17rem;
  margin: 0;
  place-items: center;
  border: 1px solid rgba(35, 31, 27, 0.12);
  border-radius: 0.75rem;
  background: #e8dfd3;
  color: #665e55;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
}

@media (max-width: 767px) {
  .portfolio-video-gallery {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .portfolio-video-horizontal,
  .portfolio-video-vertical {
    grid-column: 1;
  }

  .portfolio-video-vertical {
    width: min(100%, 24rem);
    justify-self: center;
  }
}

.portfolio-one-line-heading {
  max-width: none !important;
}

.portfolio-filter-bar {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center !important;
  gap: 0.25rem;
  overflow: visible !important;
  padding: 0.75rem;
  border: 1px solid rgba(35, 31, 27, 0.12);
  border-radius: 1rem;
  background: #e8dfd3;
}

.portfolio-filter-bar::after {
  display: none !important;
  content: none !important;
}

.portfolio-filter-bar::before {
  content: "Explore by sector";
  flex: 1 0 100%;
  padding: 0.35rem 0.5rem 0.75rem;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #231f1b;
}

.portfolio-filter-bar::after {
  display: none !important;
  content: none !important;
}

.portfolio-filter-button {
  isolation: isolate;
  transition: color 240ms ease, transform 240ms ease !important;
}

.portfolio-filter-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
  background: transparent;
  transition: background-color 240ms ease, transform 240ms ease;
}

.portfolio-filter-button:hover::before {
  background: rgba(35, 31, 27, 0.08);
}

.portfolio-filter-button:hover {
  transform: translateY(-1px);
}

.portfolio-filter-button[aria-pressed="true"]::before {
  background: #231f1b;
}

.portfolio-filter-button[aria-pressed="true"] > div {
  opacity: 0 !important;
}

.portfolio-filter-button[aria-pressed="true"] span {
  color: #f7f0e7 !important;
}

.portfolio-project-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
}

.portfolio-project-card {
  outline: none;
}

.portfolio-project-visual {
  border-radius: 0.75rem !important;
  box-shadow: 0 0 0 1px rgba(35, 31, 27, 0.08);
  transition: transform 500ms cubic-bezier(0.2, 0.75, 0.25, 1), box-shadow 500ms ease !important;
}

.portfolio-project-card:hover .portfolio-project-visual,
.portfolio-project-card:focus-visible .portfolio-project-visual {
  transform: translateY(-0.45rem) !important;
  box-shadow: 0 1.25rem 2.5rem rgba(35, 31, 27, 0.18), 0 0 0 1px rgba(217, 146, 45, 0.65);
}

.portfolio-project-card:focus-visible .portfolio-project-visual {
  outline: 2px solid #d9922d;
  outline-offset: 4px;
}

@media (min-width: 1100px) {
  .portfolio-project-visual > div:last-child {
    padding: 1.25rem !important;
  }

  .portfolio-project-visual h4 {
    font-size: 1.35rem !important;
  }

  .portfolio-project-visual .text-meta {
    font-size: 0.58rem !important;
  }
}

.portfolio-empty-panel {
  display: grid !important;
  min-height: 17rem;
  place-items: center;
  border: 1px solid rgba(35, 31, 27, 0.12) !important;
  border-radius: 0.75rem !important;
  background: #e8dfd3 !important;
  text-align: center;
}

.portfolio-start-button {
  position: relative;
  isolation: isolate;
  min-width: 12.75rem;
  height: 3.2rem !important;
  justify-content: space-between;
  gap: 0.85rem !important;
  overflow: hidden;
  padding: 0 0.42rem 0 1.35rem !important;
  border: 0;
  background: #d9922d !important;
  color: #090909 !important;
  box-shadow: none;
  transform: none;
  transition: background-color 300ms ease, color 300ms ease, transform 300ms ease !important;
}

.portfolio-start-button::before {
  display: none;
}

.portfolio-start-button svg {
  width: 2.4rem !important;
  height: 2.4rem !important;
  box-sizing: border-box;
  flex: 0 0 2.4rem;
  padding: 0.7rem;
  border-radius: 50%;
  background: #090909;
  color: #d9922d;
  box-shadow: none;
  transition: background-color 300ms ease, color 300ms ease;
}

.portfolio-start-button:hover,
.portfolio-start-button:focus-visible {
  background: #090909 !important;
  color: #f7f0e7 !important;
  transform: translateY(-0.12rem);
  box-shadow: none;
}

.portfolio-start-button:hover svg,
.portfolio-start-button:focus-visible svg {
  background: #d9922d;
  color: #090909;
  box-shadow: none;
}

.portfolio-start-button:active {
  transform: scale(0.98);
  box-shadow: none;
}

@keyframes portfolio-arrow-hover {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0.2rem, -0.2rem); }
}

.portfolio-start-button:hover svg,
.portfolio-start-button:focus-visible svg {
  animation: portfolio-arrow-hover 720ms ease-in-out infinite;
}

@media (min-width: 900px) {
  .portfolio-one-line-heading {
    white-space: nowrap;
  }
}

@media (max-width: 899px) {
  .portfolio-project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  .portfolio-filter-bar::after {
    flex: 1 0 100%;
    margin: 0.5rem 0 0;
  }
}

@media (max-width: 599px) {
  .portfolio-filter-bar {
    gap: 0.15rem;
  }

  .portfolio-filter-button {
    padding-inline: 0.8rem !important;
  }

  .portfolio-project-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-start-button:hover svg,
  .portfolio-start-button:focus-visible svg {
    animation: none;
  }
}

/* Project details: three concise facts and a four-column image gallery. */
.portfolio-detail-meta-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.portfolio-detail-shell {
  width: 100% !important;
  max-width: min(96vw, 96rem) !important;
}

.portfolio-detail-content {
  width: 100% !important;
  max-width: min(92vw, 92rem) !important;
}

.portfolio-detail-gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(0.65rem, 1.2vw, 1.15rem) !important;
}

.portfolio-detail-gallery-grid > * {
  grid-column: auto !important;
  min-width: 0;
}

.portfolio-detail-gallery-grid > * > * {
  aspect-ratio: 4 / 3 !important;
  border-radius: 0.75rem !important;
}

.portfolio-detail-gallery-grid img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Orientation comes from the admin gallery row, so every tile in a row crops the same way. */
.portfolio-detail-gallery-grid .portfolio-gallery-portrait {
  aspect-ratio: 3 / 4 !important;
}

/* An admin row starts a fresh grid row instead of flowing on from the previous one. */
.portfolio-detail-gallery-grid > .portfolio-gallery-row-start {
  grid-column-start: 1 !important;
}

.portfolio-lightbox-trigger {
  cursor: zoom-in;
  outline: none;
}

.portfolio-lightbox-trigger:focus-visible {
  box-shadow: 0 0 0 3px #d9922d;
}

.portfolio-lightbox[hidden] {
  display: none !important;
}

.portfolio-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  /* minmax(0, 1fr) rather than the default auto: an auto row is sized by its content, so the
     figure below cannot measure itself against it. With an explicit 1fr row the row is exactly
     the padded content box, and the figure's height: 100% resolves against that -- at every
     breakpoint, including the 4rem/5rem padding the mobile query sets. */
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  padding: clamp(1rem, 3vw, 2.5rem);
  background: rgba(5, 5, 5, 0.94);
  backdrop-filter: blur(10px);
}

.portfolio-lightbox-open {
  overflow: hidden;
}

.portfolio-lightbox-figure {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  /* Was height: min(88vh, 64rem) -- a fixed 88% of the viewport INSIDE a container that also
     carries its own padding. 88vh + 2 x 2.5rem exceeds 100vh on any window shorter than ~666px,
     and because the overlay centres its items the excess spilled off the top AND the bottom, so
     tall images lost both ends. 100% of the row can never exceed the space that exists. */
  height: 100%;
  max-height: 64rem;
  min-height: 0;
  margin: 0;
  /* The image below sizes itself with max-width/max-height: 100%. A percentage resolves against
     the grid AREA, and this figure's implicit row was auto -- i.e. sized BY its content -- which
     makes the percentage circular, so the browser drops it. The image was therefore never
     constrained at all: a 1920px-tall photo rendered at 1802px inside an 820px frame and was
     clipped at both ends. Fixed tracks give the percentages something real to resolve against. */
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}

.portfolio-lightbox-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0.5rem;
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.45);
}

.portfolio-lightbox-caption {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.72);
  font: 500 0.7rem/1 "JetBrains Mono", monospace;
  letter-spacing: 0.14em;
}

.portfolio-lightbox-arrow,
.portfolio-lightbox-close {
  display: grid;
  place-items: center;
  border: 1px solid rgba(217, 146, 45, 0.5);
  border-radius: 50%;
  background: #151515;
  color: #d9922d;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.portfolio-lightbox-arrow {
  width: clamp(2.75rem, 4vw, 3.75rem);
  height: clamp(2.75rem, 4vw, 3.75rem);
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1;
}

.portfolio-lightbox-close {
  position: absolute;
  top: clamp(1rem, 2vw, 1.75rem);
  right: clamp(1rem, 2vw, 1.75rem);
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.65rem;
}

.portfolio-lightbox-arrow:hover,
.portfolio-lightbox-arrow:focus-visible,
.portfolio-lightbox-close:hover,
.portfolio-lightbox-close:focus-visible {
  background: #d9922d;
  color: #090909;
  transform: scale(1.06);
}

@media (min-width: 768px) {
  .portfolio-detail-meta-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 899px) {
  .portfolio-detail-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 549px) {
  .portfolio-detail-gallery-grid {
    grid-template-columns: 1fr !important;
  }

  .portfolio-lightbox {
    grid-template-columns: 1fr;
    padding: 4rem 0.75rem 5rem;
  }

  .portfolio-lightbox-arrow {
    position: absolute;
    bottom: 1.1rem;
  }

  .portfolio-lightbox-prev { left: calc(50% - 4rem); }
  .portfolio-lightbox-next { right: calc(50% - 4rem); }
}

/* Project names flat rather than "<first word> <rest in gold italic>" -- see home-custom.css.
   h1 covers the project detail page title, h4 the cards in the grid. The h2 CTA keeps its
   gold italic. */
h1 > span.italic.text-gold-soft,
h4 > span.italic.text-gold-soft {
  font-style: normal;
  color: inherit;
}