.homepage--with-photo-wall .main {
  margin-top: 0;
}

.headline--photo-wall {
  --photo-wall-swoosh-glow: oklch(var(--lch-blue-medium) / 0.2);
  --photo-wall-swoosh-line: oklch(var(--lch-blue-dark) / 0.86);
  --photo-wall-swoosh-surface: var(--color-canvas);

  align-content: center;
  color: var(--color-ink-darkest);
  isolation: isolate;
  min-block-size: clamp(28rem, 72svh, 42rem);
  overflow: clip;
  padding-block: clamp(3.5rem, 8svh, 6rem);
  text-shadow: 0 0.08em 0.42em oklch(var(--lch-white) / 0.84);
}

.headline--photo-wall::after {
  background: var(--photo-wall-swoosh-surface);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  bottom: -0.18rem;
  content: "";
  height: clamp(2.5rem, 4.8vw, 3.5rem);
  left: 50%;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  width: 136vw;
  z-index: 1;
}

.headline--photo-wall::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 72' preserveAspectRatio='none'%3E%3Cpath d='M -80 104 C 180 -28 820 -28 1080 104' fill='none' stroke='white' stroke-width='9' stroke-linecap='butt'/%3E%3C/svg%3E");
  -webkit-mask-position: center top;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  background: linear-gradient(90deg, var(--photo-wall-swoosh-surface) 0%, var(--photo-wall-swoosh-surface) 14%, var(--photo-wall-swoosh-line) 32%, var(--photo-wall-swoosh-line) 68%, var(--photo-wall-swoosh-surface) 86%, var(--photo-wall-swoosh-surface) 100%);
  bottom: 0.28rem;
  box-shadow: 0 -0.7rem 1.6rem -1.2rem var(--photo-wall-swoosh-glow);
  content: "";
  height: clamp(2.5rem, 4.8vw, 3.5rem);
  left: 50%;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 72' preserveAspectRatio='none'%3E%3Cpath d='M -80 104 C 180 -28 820 -28 1080 104' fill='none' stroke='white' stroke-width='9' stroke-linecap='butt'/%3E%3C/svg%3E");
  mask-position: center top;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  width: 136vw;
  z-index: 2;
}

.headline--photo-wall + .headline {
  margin-top: clamp(-0.75rem, -0.9vw, -0.35rem) !important;
}

.headline--photo-wall > :not(.photo-wall) {
  z-index: 3;
}

.headline--photo-wall .headline__header a,
.headline--photo-wall .headline__header a:focus,
.headline--photo-wall .headline__header a:hover {
  color: inherit;
}

.headline--photo-wall .headline__content {
  color: oklch(var(--lch-ink-darkest) / 0.9);
}

.headline--photo-wall .headline__footer {
  color: oklch(var(--lch-ink-darkest) / 0.74);
}

.headline--photo-wall .button {
  box-shadow:
    0 0 0 1px oklch(var(--lch-white) / 0.16),
    0 0.5em 1.4em -0.8em oklch(var(--lch-black) / 0.75);
  text-shadow: none;
}

.photo-wall {
  --photo-wall-fade-solid: var(--color-canvas);
  --photo-wall-fade-strong: oklch(var(--lch-canvas) / 0.92);
  --photo-wall-fade-medium: oklch(var(--lch-canvas) / 0.7);
  --photo-wall-fade-soft: oklch(var(--lch-canvas) / 0.48);
  --photo-wall-fade-clear: oklch(var(--lch-canvas) / 0);
  --photo-wall-text-scrim: oklch(var(--lch-canvas) / 0.74);

  background: var(--photo-wall-fade-solid);
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.photo-wall::before,
.photo-wall::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.photo-wall::before {
  background:
    linear-gradient(180deg, var(--photo-wall-fade-medium) 0%, var(--photo-wall-fade-clear) 24%, var(--photo-wall-fade-clear) 72%, var(--photo-wall-fade-strong) 100%),
    linear-gradient(90deg, var(--photo-wall-fade-strong) 0%, var(--photo-wall-fade-clear) 30%, var(--photo-wall-fade-clear) 70%, var(--photo-wall-fade-soft) 100%);
}

.photo-wall::after {
  background:
    radial-gradient(ellipse at 50% 44%, var(--photo-wall-text-scrim) 0%, var(--photo-wall-text-scrim) 18%, var(--photo-wall-fade-clear) 56%),
    linear-gradient(116deg, var(--photo-wall-fade-strong) 0%, var(--photo-wall-text-scrim) 34%, var(--photo-wall-fade-clear) 84%);
}

.photo-wall__stage {
  inset: -104% -138%;
  perspective: 760px;
  position: absolute;
  z-index: 1;
}

.photo-wall__plane {
  --photo-wall-gap: clamp(0.16rem, 0.32vw, 0.28rem);
  --photo-wall-rotate-x: 10deg;
  --photo-wall-rotate-y: -5deg;
  --photo-wall-rotate-z: 18deg;

  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0) rotateX(var(--photo-wall-rotate-x)) rotateY(var(--photo-wall-rotate-y)) rotateZ(var(--photo-wall-rotate-z)) scale(2);
  transform-style: preserve-3d;
  width: max-content;
  will-change: transform;
}

.photo-wall__track {
  animation: photo-wall-grid-drift 1800s linear infinite;
  display: flex;
  transform: translateX(-25%);
  width: max-content;
  will-change: transform;
}

.photo-wall__grid {
  display: grid;
  flex: 0 0 auto;
  gap: var(--photo-wall-gap);
  grid-template-columns: repeat(var(--photo-wall-column-count), clamp(3.35rem, 5vw, 5.1rem));
  padding-inline-end: var(--photo-wall-gap);
}

.photo-wall__tile {
  aspect-ratio: 2 / 3;
  background: oklch(var(--lch-white) / 0.1);
  border-radius: 0.35rem;
  display: block;
  overflow: hidden;
}

.photo-wall__image {
  display: block;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0.88;
  width: 100%;
}

@keyframes photo-wall-grid-drift {
  from {
    transform: translateX(-25%);
  }

  to {
    transform: translateX(25%);
  }
}

@media(max-width: 47.99em) {
  .headline--photo-wall {
    min-block-size: clamp(27rem, 68svh, 34rem);
    padding-block: clamp(3rem, 7svh, 4.4rem);
  }

  .photo-wall__stage {
    inset: -112% -230%;
    perspective: 650px;
  }

  .photo-wall__plane {
    --photo-wall-gap: 0.18rem;
    --photo-wall-rotate-x: 10deg;
    --photo-wall-rotate-y: -5deg;
    --photo-wall-rotate-z: 20deg;

    top: 50%;
    transform: translate3d(-50%, -50%, 0) rotateX(var(--photo-wall-rotate-x)) rotateY(var(--photo-wall-rotate-y)) rotateZ(var(--photo-wall-rotate-z)) scale(2.1);
  }

  .photo-wall__grid {
    grid-template-columns: repeat(var(--photo-wall-column-count), clamp(2.85rem, 12vw, 3.8rem));
  }
}

@media(prefers-reduced-motion: reduce) {
  .photo-wall__track {
    animation: none;
  }
}

@media(prefers-color-scheme: dark) {
  .headline--photo-wall {
    --photo-wall-swoosh-glow: oklch(var(--lch-blue-medium) / 0.3);
    --photo-wall-swoosh-line: oklch(var(--lch-blue-light) / 0.84);
    --photo-wall-swoosh-surface: var(--color-canvas);

    color: var(--color-white);
    text-shadow: 0 0.08em 0.42em oklch(var(--lch-black) / 0.72);
  }

  .headline--photo-wall .headline__content {
    color: oklch(var(--lch-white) / 0.92);
  }

  .headline--photo-wall .headline__footer {
    color: oklch(var(--lch-white) / 0.82);
  }

  .photo-wall {
    --photo-wall-fade-solid: oklch(var(--lch-black));
    --photo-wall-fade-strong: oklch(var(--lch-black) / 0.92);
    --photo-wall-fade-medium: oklch(var(--lch-black) / 0.66);
    --photo-wall-fade-soft: oklch(var(--lch-black) / 0.48);
    --photo-wall-fade-clear: oklch(var(--lch-black) / 0);
    --photo-wall-text-scrim: oklch(var(--lch-black) / 0.8);
  }
}