/* Shared footer. Kept separate because every page injects the same footer,
   while only the home page loads sections.css. */
.footer-field {
  position: relative;
  margin-top: var(--sec-gap);
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  overflow: hidden;
  --threads-rgb: 0.42 0.49 0.47;
}
[data-theme='dark'] .footer-field { --threads-rgb: 0.37 0.89 0.81; }

.footer-field__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 42%);
  mask-image: linear-gradient(to bottom, transparent, #000 42%);
}

.footer-field__statement {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.footer-field__statement h2 {
  max-width: 13ch;
  margin-bottom: 44px;
  font-size: clamp(36px, 6.2vw, 84px);
  line-height: 1.04;
}

.footer-field__watermark {
  position: relative;
  z-index: 0;
  width: 100%;
  overflow: hidden;
  margin-top: 24px;
  padding: 0 var(--gutter) 28px;
  color: transparent;
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--ink) 20%, var(--paper)) 0%,
    color-mix(in srgb, var(--ink) 6%, var(--paper)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font: 700 clamp(80px, 15vw, 260px) / 0.8 var(--font-brand);
  letter-spacing: -0.03em;
  white-space: nowrap;
  user-select: none;
}

.footer-field__in {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  align-items: flex-end;
}
.footer-field__links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 14px 26px; }

@media (max-width: 720px) {
  .footer-field { min-height: 340px; }
  .footer-field__links { margin-left: 0; }
}