:root {
  --accent: #069494;
  --accent-color: #069494;
  --accent-transparent: rgba(6, 148, 148, 0.52);
}

/* This strip is part of the fixed header and therefore remains on screen. */
.site-header::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 100%;
  right: 0;
  left: 0;
  height: 10px;
  background: var(--accent-transparent);
  pointer-events: none;
}

/* Keep expanded navigation above the fixed accent strip. */
.nav-group,
.nav-dropdown {
  z-index: 2;
}

/* Use one teal accent palette across the site. */
.accent-word,
.site-footer .accent-word,
.services-page .accent-word,
.site-nav a:hover,
.site-nav .nav-contact:hover,
.nav-group > a:hover,
.nav-dropdown a:hover,
.site-nav .nav-group:hover > a,
.back-link:hover,
.project:hover .project-signature,
.project:hover .project-signature > span {
  color: var(--accent-color) !important;
}

.project-open:focus-visible {
  outline-color: var(--accent-color) !important;
}

.portfolio::after {
  background: var(--accent-color) !important;
}

/* Reserve space for the fixed header and its accent strip on every view. */
.portfolio {
  padding-top: 130px !important;
}

.detail-page {
  padding-top: 135px !important;
}

/* Portfolio photographs stay in full colour until a caption takes their place. */
.project-image,
.portfolio .project img.project-image {
  filter: none !important;
  transition: opacity 0.35s ease !important;
}

.project-open:hover img.project-image,
.project-open:focus-visible img.project-image,
.project:hover img.project-image {
  filter: none !important;
  opacity: 0 !important;
  transform: none !important;
}

.portfolio .project .project-overlay {
  background: var(--accent-color) !important;
  transition: opacity 0.35s ease !important;
}

.portfolio .project .project-overlay strong,
.portfolio .project .project-overlay small {
  color: #ffffff !important;
}

.portfolio .project-open:hover .project-overlay,
.portfolio .project-open:focus-visible .project-overlay,
.portfolio .project:hover .project-overlay,
.portfolio .project.is-caption-visible .project-overlay {
  opacity: 1 !important;
}

.portfolio .project.is-caption-visible img.project-image {
  opacity: 0 !important;
  transform: none !important;
}

/* Non-portfolio imagery should remain coloured as well. */
.detail-gallery img,
.detail-gallery img:hover,
.about-layout .about-image {
  filter: none !important;
}

@media (max-width: 700px) {
  .site-header::after {
    height: 8px;
  }

  .portfolio .project .project-overlay {
    opacity: 0 !important;
  }

  .portfolio .project.is-caption-visible .project-overlay {
    opacity: 1 !important;
  }

  .portfolio {
    padding-top: 128px !important;
  }

  .detail-page {
    padding-top: 138px !important;
  }
}