.home-project-link {
  padding: 1.6rem 5vw;
  text-align: center;
}
.portfolio-grid {
  padding-bottom: clamp(3rem, 8vw, 7rem);
}
.portfolio-grid .project-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.portfolio-detail figure { margin: 0; }
.portfolio-hero img,
.portfolio-gallery img {
  display: block;
  width: 100%;
  height: auto;
}
.portfolio-hero img {
  max-height: 78vh;
  object-fit: contain;
  background: var(--bg-warm-stone, #f5f0eb);
}
.portfolio-detail figcaption {
  padding-top: .55rem;
  font-size: .85rem;
}
.portfolio-reading {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) minmax(0, 2.2fr);
  align-items: start;
  gap: clamp(2rem, 7vw, 7rem);
  margin-block: clamp(2rem, 6vw, 5rem);
}
.technical-info {
  padding-block: .8rem;
  border-block: 1px solid #c5bcb0;
  font-size: .92rem;
}
.technical-info summary { cursor: pointer; font-weight: 500; }
.technical-info dl { margin-bottom: .4rem; }
.technical-info dl div + div { margin-top: .75rem; }
.technical-info dt { font-weight: 500; }
.technical-info dd { margin-inline-start: 0; }
.case-story { margin: 0; padding: 0; }
.case-story p:first-child { margin-top: 0; }
.portfolio-detail-wide {
  width: min(94%, 86rem);
  max-width: 86rem;
}
.portfolio-detail-wide .portfolio-hero img { max-height: none; }
.portfolio-detail-wide .portfolio-reading {
  grid-template-columns: minmax(12rem, 15rem) minmax(0, 68ch);
  grid-template-areas: "technical story";
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: 1.75rem;
}
.portfolio-detail-wide .technical-info { grid-area: technical; }
.portfolio-detail-wide .case-story {
  grid-area: story;
  width: 100%;
  line-height: 1.75;
}
.portfolio-detail-wide .case-story p {
  margin: 0;
  line-height: inherit;
}
.portfolio-detail-wide .case-story p + p { margin-top: 1.25em; }
.portfolio-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
}
.portfolio-end, .portfolio-contact { padding-bottom: clamp(3rem, 7vw, 6rem); }
.portfolio-end { padding-top: 2.5rem; }
.portfolio-end .actions { margin-top: 1rem; }
.portfolio-pagination { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.5rem; }
.portfolio-end .actions + .portfolio-pagination { margin-top: 1.5rem; }
.portfolio-next { margin-inline-start: auto; text-align: end; }
.footer-social:empty { display: none; }
@media (max-width: 740px) {
  .portfolio-reading, .portfolio-gallery { grid-template-columns: minmax(0, 1fr); }
  .portfolio-detail-wide .portfolio-reading {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "story" "technical";
  }
}

.portfolio-detail-ruaka .portfolio-gallery img,
.portfolio-detail-coastal .portfolio-gallery img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.portfolio-detail-church .portfolio-gallery img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--bg-warm-stone, #f5f0eb);
}

.portfolio-image-view figure { margin: 1rem 0 2rem; }
.portfolio-image-view img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}
.portfolio-image-view figcaption { margin-top: .6rem; }

.portfolio-detail-bungalow .portfolio-gallery img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--bg-warm-stone, #f5f0eb);
}

/* Hero-first project template. */
.v3-inner:has(.portfolio-opening) {
  --project-background: #0d0d0d;
  --project-text: #e2dcd4;
  --project-muted: #b8afa5;
  --project-accent: #e5a68b;
  background: var(--project-background);
  color: var(--project-text);
}
.v3-inner:has(.portfolio-opening) main { padding-top: 0; }
.v3-inner:has(.portfolio-opening) .nav.scrolled {
  background: linear-gradient(#0d0d0df2, #0d0d0d80 70%, transparent);
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.v3-inner:has(.portfolio-opening) .nav.scrolled :is(.nav-links a,.nav-logo-line) { color: #fff; }
.v3-inner:has(.portfolio-opening) .nav.scrolled .nav-toggle span { background: #fff; }
.v3-inner:has(.portfolio-opening) .nav-links.open { background: var(--project-background); }
.portfolio-opening { margin: 0; }
.portfolio-opening-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.portfolio-opening-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.portfolio-opening-frame::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4%;
  background: linear-gradient(transparent, var(--project-background));
  pointer-events: none;
}
.portfolio-opening-fullscreen .portfolio-opening-frame {
  aspect-ratio: auto;
  height: 100vh;
  height: 100svh;
}
.portfolio-opening-fullscreen img { object-position: center; }
.portfolio-opening figcaption {
  max-width: 68ch;
  margin-inline: auto;
  padding: .75rem 1.25rem 0;
  text-align: center;
  color: var(--project-muted);
  font-size: .85rem;
}
.portfolio-opening + .portfolio-detail :is(h1,.case-story,.technical-info) { color: var(--project-text); }
.portfolio-opening + .portfolio-detail :is(.eyebrow,.page-head p,figcaption) { color: var(--project-muted); }
.portfolio-opening + .portfolio-detail .technical-info { border-color: #514941; }
.portfolio-opening + .portfolio-detail .text-link { color: var(--project-accent); }
.portfolio-opening + .portfolio-detail .button.light {
  color: var(--project-text);
  border-color: var(--project-muted);
}
.portfolio-opening + .portfolio-detail .button.light:hover {
  color: var(--project-accent);
  border-color: var(--project-accent);
}
.portfolio-opening + .portfolio-detail .portfolio-reading { margin-bottom: clamp(3rem, 7vw, 6rem); }
@media (max-width: 740px) {
  .portfolio-opening-frame { aspect-ratio: 4 / 3; }
}

.v3-inner:has(.portfolio-opening) .nav.scrolled.project-nav-hidden:not(:focus-within):not(:has(.nav-links.open)) {
  opacity: 0;
  pointer-events: none;
}