/* ===========================================================================
   PARALLAX REVEAL FOOTER (.pfooter) — Osmo-style closer.
   The page scrolls up and this full-screen footer rises as a slower-moving
   layer (its content lags the scroll) while a dark ink veil fades off, so it
   reads as EMERGING FROM DEPTH. Built in Download's language: paper + noise
   grain, ink type, monospace labels, one giant wordmark. Motion is scrubbed
   through the same Lenis + ScrollTrigger pipeline as the rest of the page
   (js/footer-parallax.js), so it stays glassy-smooth.

   NOTE: this footer lives OUTSIDE .pages, so the .pages-scoped tokens
   (--ink / --hair / --ink-soft) are not in scope here — values are inlined.
   --font-mono is defined at :root and is available.
   =========================================================================== */
.pfooter {
  position: relative;
  z-index: 0;
  min-height: 100vh;
  display: flex;
  overflow: clip;
  background-color: #f4f3ef;
  background-image: url(../img/noise.png);
  background-size: 160px;
  color: #38393d;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Ink veil — sits over the footer and fades to nothing as it emerges. This is
   the "surfacing from depth" cue. Starts near-off in CSS so a JS failure just
   shows a clean light footer; js/footer-parallax.js scrubs 0.5 -> 0 on reveal. */
.pfooter__veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #2c2d30;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.pfooter__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: clamp(3.4rem, 9vh, 6.5rem) clamp(1.4rem, 7vw, 6rem) clamp(1.4rem, 3.5vh, 2.4rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(3rem, 9vh, 7rem);
  will-change: transform; /* parallax translate target */
}

/* --- top: three columns, mono labels over Helvetica links --- */
.pfooter__top {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
}
.pfcol {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 2.6vw, 1.9rem);
}
.pfcol__label {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: #6b6b69;
}
.pfcol__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.05rem, 0.4vw, 0.25rem);
}
.pfcol__list a,
.pfcol__btn {
  display: inline-block;
  font-family: inherit;
  font-weight: 500;
  font-size: clamp(1.45rem, 0.95rem + 1.7vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: #38393d;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.pfcol__list a:hover,
.pfcol__btn:hover,
.pfcol__list a:focus-visible,
.pfcol__btn:focus-visible {
  opacity: 0.5;
}
/* email + phone a touch smaller so long strings don't crowd the column */
.pfcol__list--contact a,
.pfcol__list--contact .pfcol__btn {
  font-size: clamp(1.15rem, 0.85rem + 1.1vw, 1.75rem);
  letter-spacing: -0.015em;
}

/* --- base: mono baseline + giant wordmark --- */
.pfooter__base {
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 1.8vh, 1.3rem);
}
.pfooter__baseline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-bottom: clamp(0.6rem, 1.4vh, 1rem);
  border-bottom: 1px solid rgba(56, 57, 61, 0.14);
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: #6b6b69;
}
.pfooter__tag { color: #38393d; }

.pfooter__wordmark {
  display: flex;
  align-items: flex-start;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.8;
  font-size: clamp(3rem, 15vw, 14rem);
  white-space: nowrap;
  /* lifts up into place on reveal (js/footer-parallax.js) — a vertical rise,
     no sideways growth, echoing the content layer that scrolls in above it. */
  will-change: transform;
}
.pfooter__reg {
  font-size: 0.15em;
  font-weight: 500;
  letter-spacing: 0;
  margin-left: 0.2em;
  margin-top: 0.35em;
}

@media (max-width: 820px) {
  .pfooter { min-height: auto; }
  .pfooter__top { grid-template-columns: 1fr; gap: clamp(2.2rem, 7vw, 3rem); }
  /* DOWNLOAD® is one unbreakable word (measured: 5.94× the font-size wide).
     Size it from the available width so it always fits inside the footer
     padding on ANY device — never wraps, never bleeds off-screen. */
  .pfooter__wordmark {
    font-size: min(21vw, calc((100vw - 5rem) / 6.05));
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pfooter__veil { opacity: 0; }
  .pfooter__inner { transform: none !important; }
}