/* A quiet placeholder and one consistent text treatment for all image cards. */
/* The project strips scroll inside their own frame; no page-wide x scrollbar. */
html {
  overflow-x: clip;
}

body.project-content-under-header #header {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 rgba(20, 26, 28, 0.1);
  backdrop-filter: blur(8px);
}

.projects-strip {
  scrollbar-width: thin;
  scrollbar-color: #b7c0c4 transparent;
}

.projects-strip::-webkit-scrollbar {
  height: 6px;
}

.projects-strip::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #b7c0c4;
}

.project-card__media {
  background: #edf0ef;
}

.project-card__media .field__item > div {
  display: block;
  width: 100%;
  height: 100%;
}

.project-card__overlay {
  background: linear-gradient(
    to top,
    rgba(20, 26, 28, 0.74),
    rgba(20, 26, 28, 0.22) 38%,
    rgba(20, 26, 28, 0) 72%
  );
}

.project-card:is(:hover, :focus-within) .project-card__overlay {
  background: linear-gradient(
    to top,
    rgba(20, 26, 28, 0.82),
    rgba(20, 26, 28, 0.28) 42%,
    rgba(20, 26, 28, 0) 74%
  );
}

.project-card__title,
.project-card__year {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.project-card__link:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -5px;
}

@media (max-width: 767px) {
  .projects-set .project-card {
    aspect-ratio: 16 / 10;
  }

  .project-card .project-card__media,
  .project-card .project-card__media picture {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* Projects without a media item need a compact introduction, not an empty slide. */
.project--with-hero.project--without-facts {
  --scene-h: var(--hero-phase-h);
}

/* The source credit belongs to the case study text, not to the design concept. */
.project-case-study__credit {
  margin-top: 2.5rem;
  color: #5a6168;
  font-size: 0.875rem;
}

.project--without-hero .project-scene {
  display: flex;
  flex-direction: column;
  height: auto;
}

.project--without-hero .project-hero-wrap {
  order: 1;
  min-width: 0;
  width: 100%;
  height: auto;
}

.project--without-hero .project-hero-sticky,
.project--without-hero .project-reveal {
  position: static;
  height: auto;
}

.project--without-hero .project-reveal {
  order: 2;
}

.project--without-hero .project-hero {
  width: 100%;
  height: auto;
  margin: 0;
  padding: clamp(7rem, 10vw, 9rem) clamp(1rem, 4vw, 4rem) clamp(2rem, 4vw, 4rem);
  overflow: visible;
  background: #f6f7f6;
}

.project--without-hero .project-hero .splide__track {
  display: none;
}

.project--without-hero .project-hero__title {
  position: static;
  display: block;
  padding: 0;
  text-align: left;
  transform: none;
  opacity: 1;
}

.project--without-hero .project-hero__title-inner {
  color: #252b30;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.12;
  text-shadow: none;
  hyphens: none;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.project--without-hero .project-setcard {
  position: static;
  display: block;
  margin-top: 1.5rem;
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.project--without-hero .project-setcard__inner {
  width: 100%;
  max-width: 100%;
  padding: 0;
  border-radius: 0;
  background: none;
}

.project--without-hero .project-setcard__value--location {
  font-size: clamp(1.4rem, 2vw, 2rem);
}

.project--without-hero .project-facts {
  height: auto;
  min-height: 0;
  padding-block: clamp(2rem, 4vw, 4rem);
  background: none;
}

.project--without-hero .project-facts--empty {
  display: none;
}

.project--without-hero .project-content {
  padding-top: clamp(2rem, 4vw, 4rem);
}

@media (max-width: 767px) {
  .project--without-hero .project-hero__title-inner {
    font-size: clamp(1.55rem, 6vw, 2rem);
  }
}