:root { --paper: #fff4e2; }

body:not(.hero-win95-active),
body:not(.hero-win95-active) .projects,
body:not(.hero-win95-active) .projects-sticky,
body:not(.hero-win95-active) .statement,
body:not(.hero-win95-active) .footer {
  background: #fff4e2;
}

body:not(.hero-win95-active) .footer.footer-collage {
  display: block;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  background: #fff4e2;
  color: #000;
}

.footer-collage-canvas {
  position: relative;
  width: 100%;
  height: max(100svh, 680px);
  container-type: inline-size;
}

.footer-contact-block {
  position: absolute;
  z-index: 4;
  top: clamp(28px, 4vw, 64px);
  left: clamp(28px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  font-style: normal;
  font-size: clamp(24px, 3vw, 46px);
  line-height: 1.03;
  letter-spacing: -.025em;
  text-transform: none;
}

.footer-contact-block h2 {
  margin: 0 0 .12em;
  font-size: 1.65em;
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: none;
}

.footer-contact-block a:hover { text-decoration: underline; text-underline-offset: .12em; }
.footer-art,
.footer-avatar {
  --parallax-x: 0px;
  --parallax-y: 0px;
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0);
  will-change: transform;
}
.footer-art { position: absolute; overflow: hidden; }
.footer-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.footer-fireplace { left: 9.5%; top: 33.5%; width: 15.6%; aspect-ratio: 200 / 269; }
.footer-laptop { left: 20.2%; top: 55%; width: 29.6%; aspect-ratio: 378 / 277; }
.footer-laptop img { position: absolute; width: 142.5%; height: 130.6%; max-width: none; left: -23.5%; top: -10.5%; }
.footer-ljus { left: 68%; top: 4.8%; width: 29.2%; aspect-ratio: 374 / 318; }
.footer-forest { left: 61%; top: 32%; width: 26%; aspect-ratio: 332 / 288; }
.footer-board { left: 30.2%; top: 34%; width: 16.3%; aspect-ratio: 208 / 139; }
.footer-bricks { left: 3.1%; top: 69.5%; width: 20.8%; aspect-ratio: 266 / 213; }
.footer-billboard { left: 53%; top: 9.3%; width: 17.2%; aspect-ratio: 220 / 203; }
.footer-frips { left: 47.1%; top: 45.7%; width: 15.7%; aspect-ratio: 1; }
.footer-snack { left: 59%; top: 61.4%; width: 7.6%; aspect-ratio: 98 / 122; }
.footer-monogram { left: 44.5%; top: 40.3%; width: 8.1%; aspect-ratio: 1; }
.footer-avatar {
  position: absolute;
  right: clamp(26px, 4vw, 64px);
  bottom: clamp(26px, 4vw, 64px);
  width: clamp(100px, 13vw, 190px);
  height: clamp(100px, 13vw, 190px);
  object-fit: cover;
}

body:not(.hero-win95-active) .footer-copy {
  position: absolute;
  left: clamp(28px, 4vw, 64px);
  bottom: 18px;
  margin: 0;
  color: #000;
  font-size: 11px;
  opacity: .55;
}

@media (max-width: 680px) {
  .footer-collage-canvas { height: max(100svh, 820px); }
  .footer-contact-block { top: 28px; left: 22px; font-size: clamp(18px, 5.2vw, 22px); }
  .footer-fireplace { left: 5%; top: 30%; width: 28%; }
  .footer-billboard { left: 31%; top: 24%; width: 29%; }
  .footer-ljus { left: 55%; top: 20%; width: 40%; }
  .footer-board { left: 33%; top: 39%; width: 28%; }
  .footer-forest { left: 58%; top: 40%; width: 37%; }
  .footer-laptop { left: 20%; top: 52%; width: 49%; }
  .footer-bricks { left: 5%; top: 68%; width: 36%; }
  .footer-frips { left: 57%; top: 57%; width: 29%; }
  .footer-monogram { left: 48%; top: 48%; width: 17%; }
  .footer-snack { left: 76%; top: 68%; width: 17%; }
  .footer-avatar { right: 22px; bottom: 22px; width: 92px; height: 92px; }
  body:not(.hero-win95-active) .footer-copy { left: 22px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .footer-art,
  .footer-avatar { transform: none; }
}