/* Piku Print Club, the site (v3.1). The FOOTER is the closing teal section: the footer content (logo, links, small print) on top and the Bear selfie
   picture below it. No headline, no copy block, no box around the picture (the old "A camera you can hand over" finale is gone: it repeated the hero).
   THE PICTURE: the artwork is a square with the hoodie cut flat on its LEFT edge, so that edge has to be the page edge: the Bear is anchored to the
   bottom-left corner, bleeding off the left and the bottom. Its top and right edges are feathered with a mask so the halftone dots fade into the teal
   instead of ending on a line. Small text on teal is var(--on-teal) (5.4:1). Sizes scale with --u (1vw, or 2vh on an ultrawide). */

.foot{--u:min(1vw,2vh);position:relative;isolation:isolate;overflow:hidden;background:var(--teal);color:var(--on-teal);
  padding:clamp(76px,calc(var(--u) * 8.4),300px) 0 0;display:flex;flex-direction:column}
/* the halftone, top right only, feathered (as in the hero) */
.foot .hero-field{inset:0 0 auto auto;width:min(66vw,2300px);height:min(100%,1500px);background-size:100% auto;opacity:.6;-webkit-mask-image:radial-gradient(ellipse 92% 88% at 100% 0,#000 0,#000 28%,transparent 82%);mask-image:radial-gradient(ellipse 92% 88% at 100% 0,#000 0,#000 28%,transparent 82%)}

.foot-in{position:relative;z-index:2;width:100%;max-width:min(100%,3000px);margin:0 auto;padding:0 clamp(16px,calc(var(--u) * 5),200px);
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,calc(var(--u) * 1.3),44px);text-align:left}
.foot-logo{width:clamp(150px,calc(var(--u) * 11),420px);height:auto}
.foot-links{display:flex;flex-wrap:wrap;gap:0 clamp(8px,calc(var(--u) * .8),28px);margin:0 0 0 -12px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-weight:800;font-size:clamp(1.125rem,calc(var(--u) * 1.5),3rem);color:var(--on-teal);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.foot-fine{max-width:36em;font-size:clamp(1rem,calc(var(--u) * 1.15),2.4rem);font-weight:700;line-height:1.5;color:var(--on-teal)}

/* the Bear: bottom-left corner, no box. The mask feathers the top (dots fade) and the right (the polaroid side) into the teal. */
.foot-bear{position:relative;z-index:1;display:block;width:min(100%,calc(var(--u) * 62),1500px);height:auto;aspect-ratio:1;max-width:none;
  margin:clamp(-60px,calc(var(--u) * -4),-10px) 0 0 0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 13%),linear-gradient(to left,transparent 0,#000 3.5%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0,#000 13%),linear-gradient(to left,transparent 0,#000 3.5%);mask-composite:intersect}

@media (max-width:760px){
  .foot{padding-top:64px}
  .foot-bear{width:100%;margin-top:-6px}
}