/* The footer sits in normal flow, outside the scrub. It is opaque, so it paints
   over the fixed film stage as it scrolls up — the film's last band (frame 654)
   is already held by then. Geometry follows the Figma footer component
   (node 10:224): one 16:9 band, contact block at 80, colophon flush to 851. */

.site-footer {
  position: relative;
  z-index: 1;
  min-height: var(--band-h);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(80 * var(--u)) max(var(--inset), calc((100% - var(--measure-full)) / 2)) 0;
  background: var(--surface);
  overflow: hidden;
  isolation: isolate;
}

/* Radial core sits below the band's bottom edge, so the footer shows only the
   upper arc of the glow. Circle radius and centre are the Figma ellipse's. */
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(
    circle calc(1153 * var(--u)) at 50% calc(1153 * var(--u)),
    var(--glow) 24.5%,
    var(--surface) 100%
  );
}

/* Oversized "Helia Nguyen" mark. The vertical fade is baked into the exported
   SVG's per-glyph gradients, so it needs no mask here. */
.site-footer__wordmark {
  position: absolute;
  z-index: -1;
  left: calc(68.3 * var(--u));
  top: calc(420 * var(--u));
  width: calc(1380 * var(--u));
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* One grid per block: two 696 columns, three rows — heads, rule, links. The
   rule spans both columns, which is why no wrapper divs are needed. */
.footer-block {
  display: grid;
  grid-template-columns: repeat(2, calc(696 * var(--u)));
  column-gap: var(--gap-col);
  row-gap: var(--gap-xs);
  padding-bottom: calc(40 * var(--u));
}

.footer-block--colophon { grid-template-columns: 1fr; }

.footer-block__rule { grid-column: 1 / -1; }

.footer-block__rule {
  border: 0;
  margin: 0;
  height: calc(0.6 * var(--u));
  min-height: 1px;
  background: var(--rule);
}

.footer-links { display: flex; flex-direction: column; gap: var(--gap-2xs); }

.footer-links__item {
  display: block;
  padding-block: var(--gap-xs);
  font-size: var(--step-title);
  line-height: var(--leading-title);
  font-weight: 500;
}

.footer-links__item:hover,
.footer-links__item:focus-visible { color: var(--ink-muted); }

.footer-meta { display: flex; gap: var(--gap-xs); }

.eyebrow--bare { font-size: var(--step-fine); }
.eyebrow--bare::before { content: none; }

.footer-colophon {
  margin: 0;
  font-size: var(--step-colophon);
  line-height: 1.275;
  font-weight: 500;
}

/* Same hover language as the footer's other links: ink softens to muted. */
.footer-colophon__link:hover,
.footer-colophon__link:focus-visible { color: var(--ink-muted); }