/* ---------- footer ---------- */

/* The old footer read as "not filling the bottom" for three compounding
   reasons, all fixed here:
   1. It had no surface of its own — same --black as every section above it,
      separated only by a 1px line, so it never registered as a terminal zone.
   2. It ended on a full-bleed RED marquee band. Saturated red advances; a
      page ending has to recede. That band read as a strip laid ON the page
      rather than the page's own last row.
   3. It ran on .section--tight, the site's *smallest* rhythm, so the heaviest
      moment on the page had the least mass.
   Fix: its own lifted surface, the site's large rhythm, a container-aligned
   wordmark carrying the visual weight, and a deliberate red terminal rule as
   the literal last pixel row.

   The FOOTER is still deliberately not min-height:100svh and not pinned as a
   whole — on a scroll this long it's always reached, and holding it open
   would fake a fill the page doesn't need. Only .footer__wordmark sticks, and
   only to the bottom of its own box, so it costs the content nothing. */
.footer {
  position: relative;
  /* Keeps the wordmark/content z-index pair below a local matter. Without it
     .footer__inner's z-index:1 would compete in the root stacking context
     against .section's z-index:1 and the navbar's 100. Note: does NOT create
     a containing block, so the sticky child still resolves against <footer>. */
  isolation: isolate;
  /* The gradient is the "surface": it separates the footer from the red
     .cta-marquee directly above without needing another hard band. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) clamp(200px, 26vw, 420px)),
    var(--black);
  /* Terminal edge. Full-bleed, thin, and the brand accent — closes the page
     instead of letting it stop mid-air. */
  border-bottom: 3px solid var(--primary);
}

/* Opaque + above the wordmark: with .footer__wordmark sticky below, the two
   boxes overlap for the whole last screenful, so the content has to occlude
   rather than sit transparently on top of 200px letterforms.
   `inherit` — not a re-declared gradient — because this box's top edge is the
   footer's top edge (the only earlier child, the h2, is .visually-hidden and
   out of flow), so the inherited gradient's absolute stops line up pixel for
   pixel. Re-typing it would be a second copy to keep in sync. */
.footer__inner {
  position: relative;
  z-index: 1;
  background: inherit;
  padding-block: clamp(48px, 7vw, 104px) 0;
}

.footer__rule {
  margin-bottom: clamp(32px, 4vw, 56px);
}

/* Two zones, not three columns. The old 1.4fr/1fr/1fr put a long email into
   the narrowest usable box and left "Follow" as a one-item column beside a
   three-item one, which is what read as lopsided. */
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  padding-bottom: clamp(48px, 7vw, 96px);
}

.footer__contact { min-width: 0; }

.footer__pitch {
  max-width: 24ch;
  font-family: var(--font-body);
  font-size: clamp(18px, 1rem + .6vw, 26px);
  font-weight: var(--w-medium);
  line-height: var(--lh-m);
  color: var(--white);
}

/* Sized well under the old .mailto (--h3, up to 46px): at 375px a 30-char
   address at that size can't fit the container, and this is the one string
   on the page that must never wrap mid-word. overflow-wrap is the net. */
.footer__mail {
  display: inline-block;
  margin-top: clamp(20px, 2.4vw, 32px);
  max-width: 100%;
  font-family: var(--font-body);
  font-size: clamp(17px, .6rem + 2.1vw, 36px);
  font-weight: var(--w-medium);
  line-height: var(--lh-m);
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .45s var(--ease);
}

.footer__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: clamp(28px, 3.2vw, 40px);
}

/* Ghost pill, so it sits beside the solid red .btn as a clear secondary.
   Height is the 44px touch target, not decoration. */
.footer__social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid var(--white-100);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--btn-text);
  font-weight: var(--w-medium);
  line-height: 1;
  color: var(--white-800);
  transition: color .25s, background-color .25s, border-color .25s, transform .16s var(--ease);
}

.footer__social-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.footer__nav { min-width: 0; }

/* h3 for the landmark's accessible name, but it must not inherit --h3's
   display size — it's a label, not a heading moment. */
.footer__label {
  font-family: var(--font-body);
  font-size: var(--h6);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: var(--lh-m);
  color: var(--text-muted);
}

.footer__list {
  display: grid;
  margin-top: 14px;
}

.footer__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 8px;
  font-family: var(--font-body);
  font-size: var(--h6);
  color: var(--white-800);
  transition: color .25s;
}

/* Underline draws from the left rather than a border toggling on, so the
   hover has direction instead of just appearing. */
.footer__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 100%;
  height: 1px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--ease);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: space-between;
  padding-block: 22px;
  border-top: 1px solid var(--white-100);
  font-size: var(--p2);
  line-height: var(--lh-xl);
  color: var(--text-muted);
}

/* Shares the .container box (max-width + gutter) instead of running edge to
   edge: aligned to the grid above, it reads as the footer's own last line.
   The old full-bleed band read as a separate object stuck underneath.

   Sticky, bottom-anchored, behind the content. The containing block is
   <footer> — position:relative, no overflow, no transform/filter — and it is
   ~800px tall against a ~253px wordmark, so there are ~545px of travel: the
   word unpins at the footer's top edge and is fully revealed at page end.
   Every ancestor was checked for a scroll-container trigger: .footer is
   overflow:visible, <body> sets overflow-x:hidden BUT the root is visible so
   that value propagates to the viewport and body itself stays a non-scrolling
   box (document.scrollingElement is <html>), and <html> is visible. The
   <footer> is a direct child of <body> — no .section wrapper, and .section
   carries overflow:hidden, which is exactly what would have killed this.
   z-index 0 (not auto) so the sticky box has an explicit level under
   .footer__inner's 1 — otherwise .container's own z-index:111 would win the
   moment either got positioned.
   It can never cover the terminal red rule: sticky only ever lifts a box
   ABOVE its static position, and this box's static position is already the
   last row before the border. */
.footer__wordmark {
  position: sticky;
  bottom: 0;
  z-index: 0;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: max(var(--container-pad), 5vw);
  /* Air above and below the block, not just between the letters — the
     tracking below only opens the word up horizontally. */
  padding-top: clamp(24px, 3.4vw, 60px);
  padding-bottom: clamp(14px, 1.6vw, 30px);
  /* Guard, not a load-bearing part of the fit: the size below is solved
     against Clash Display's real metrics, but the fallback stack is Arial
     Narrow/system-ui, which measures differently. Clip rather than let a
     font-swap push horizontal overflow. (Safe on a sticky element — it's
     overflow on ANCESTORS that breaks sticky, not on the box itself.) */
  overflow: clip;
}

.footer__wordmark-text {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  /* Sized from the box it has to fit in, not from a guessed cap. The gutter
     is 5vw a side, so the usable measure is min(90vw, --container-max - 10vw)
     — it stops growing at 1240px and then SHRINKS (1048px at 1920, 984px at
     2560). A flat max cap can't track that, which is why the old
     280px/-.04em pair was 1071px wide and living on the clip guard above.
     The divisor is measured, not estimated: "linkstart" in Clash Display
     Semibold advances 4.184em, +8 tracking units = 4.544em, /0.96 for slack
     = 4.73. So the word lands ~4% inside the measure at every width, and the
     52px floor only takes over under ~280px where nothing would fit anyway. */
  font-size: max(52px, calc(min(90vw, var(--container-max) - 10vw) / 4.73));
  line-height: .78;
  /* The ask: -.04em read as one dense mass. Positive tracking at this size
     turns it into a spaced signature rather than a headline. */
  letter-spacing: .045em;
  /* letter-spacing also lands after the last glyph. Pulling it back keeps the
     final t flush with the gutter the grid above is aligned to. */
  margin-inline-end: -.045em;
  text-transform: lowercase;
  white-space: nowrap;
  /* Ghosted, not red-on-black: it's a signature the eye lands on last, so it
     recedes into the surface instead of competing with the .btn above it. */
  color: var(--white-100);
}

@media (hover: hover) and (pointer: fine) {
  .footer__mail:hover { background-size: 100% 1px; }
  .footer__link:hover { color: var(--white); }
  .footer__link:hover::after { transform: scaleX(1); }
  .footer__social:hover {
    color: var(--white);
    background: var(--white-100);
    border-color: var(--border-1);
  }
}

/* Press feedback — the pill has to answer the tap the way .btn does. */
.footer__social:active { transform: scale(.97); }

/* Keyboard parity: :focus-visible in tokens.css gives the ring, this gives
   the same colour lift as hover so the two states don't diverge. */
.footer__mail:focus-visible { background-size: 100% 1px; }
.footer__link:focus-visible { color: var(--white); }

@media (max-width: 991px) {
  .footer__grid { gap: clamp(36px, 5vw, 56px); }
}

/* Short viewports (phone in landscape, a half-height desktop window): the
   pinned wordmark would be a permanent band across a screen that has almost
   none to spare, and the reveal has no room to read as motion. Fall back to
   the static block it was before — same layout, minus the pin. */
@media (max-height: 620px) {
  .footer__wordmark { position: static; }
}

@media (max-width: 767px) {
  .footer__grid { grid-template-columns: 1fr; }
  /* Full-width so the two actions stack cleanly instead of half-wrapping. */
  .footer__actions > * { flex: 1 1 auto; justify-content: center; }
  .footer__bottom { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .footer__mail,
  .footer__link,
  .footer__link::after,
  .footer__social {
    transition: none;
  }
  .footer__link::after { transform: scaleX(1); opacity: 0; }
  .footer__link:hover::after,
  .footer__link:focus-visible::after { opacity: 1; }
  .footer__social:active { transform: none; }
  /* The pin is scroll-coupled motion — a 200px word sliding under the content
     is exactly the kind of parallax this setting is asking us to drop. The
     wordmark still ends the page, it just doesn't travel. */
  .footer__wordmark { position: static; }
}