/* A compact portfolio interlude, independent of the full-height chapters. */
.project-strip {
  position: relative;
  isolation: isolate;
  padding: 24px 8.8% 22px;
  background: radial-gradient(ellipse at 50% 0, #1c2c5824, transparent 70%), #06090f;
  border-block: 1px solid #9db4fa14;
  scroll-margin-top: 96px;
}
.project-strip::before {
  content: "";
  position: absolute;
  inset: -1px 22% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, #829cf76b, transparent);
  pointer-events: none;
}
.project-strip-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  max-width: 1440px;
  margin: 0 auto 12px;
}
.project-strip h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .015em;
  color: #bac5da;
}
.project-marquee {
  --project-logo-cell: 240px;
  max-width: 1440px;
  margin: 0 auto;
  padding-block: 7px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.project-marquee-track {
  display: flex;
  width: max-content;
  animation: project-logo-loop 48s linear infinite;
  will-change: transform;
}
.project-logos {
  display: flex;
  flex: none;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}
.project-logos > li { flex: 0 0 var(--project-logo-cell); min-width: 0; position: relative; }
@keyframes project-logo-loop {
  to { transform: translateX(-50%); }
}
@media (hover: hover) {
  .project-marquee:hover .project-marquee-track { animation-play-state: paused; }
}
.project-marquee.is-touching .project-marquee-track,
.project-marquee.is-offscreen .project-marquee-track { animation-play-state: paused; }
.project-marquee.is-keyboard { overflow-x: auto; mask-image: none; }
.project-marquee.is-keyboard .project-marquee-track { animation: none; transform: none; }
.project-marquee.is-keyboard [data-project-duplicate] { display: none; }
.project-logos > li + li::before,
.project-logos[data-project-duplicate] > li:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28%;
  bottom: 28%;
  width: 1px;
  background: linear-gradient(transparent, #a1b7f121, transparent);
  pointer-events: none;
}
.project-logo-link {
  position: relative;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px 18px;
  border-radius: 4px;
  color: #d3def5;
}
.project-logo-link svg {
  display: block;
  width: 100%;
  max-width: 154px;
  height: 78px;
  overflow: hidden;
  opacity: 1;
  transition: transform .25s ease;
}
.project-logo-link--cala svg { max-width: 196px; height: 100px; }
.project-logo-link--linde svg { max-width: 204px; height: 96px; }
.project-logo-link--plano svg { width: 76px; height: 86px; }
.project-logo-link--sal svg { max-width: 218px; height: 90px; }
.project-logo-link--olmo svg { max-width: 198px; height: 96px; }
.project-logo-link--islora svg { max-width: 198px; height: 66px; }
.project-logo-link:is(:hover, :focus-visible) svg { transform: translateY(-3px); }
.project-logo-filters { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
@media (max-width: 1050px) {
  .project-strip { padding-inline: 6%; }
  .project-logo-link { padding-inline: 15px; }
  .project-marquee { --project-logo-cell: 216px; }
}
@media (max-width: 1400px) {
  .project-strip { padding: 22px 24px 24px; }
  .project-strip-heading { display: block; margin-bottom: 14px; }
  .project-logo-link { min-height: 120px; padding-inline: 12px; padding-bottom: 23px; }
  .project-logo-link svg { height: 88px; }
  .project-logo-link--plano svg { height: 82px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-marquee { overflow-x: auto; mask-image: none; }
  .project-marquee-track { animation: none; transform: none; will-change: auto; }
  [data-project-duplicate] { display: none; }
  .project-logo-link svg { transition: none; }
  .project-logo-link:is(:hover, :focus-visible) svg { transform: none; }
}