/* ============================================================
   FOOTER

   The scalloped top edge is an exact Figma export
   (assets/footer/footer-scallop.svg). Everything below it is a
   left-aligned stack, matching the reference.
   ============================================================ */

/* The scallop image's cutouts must show the page background behind
   them, not the footer's own cream — so .site-footer itself stays
   transparent, and the cream fill only starts at .site-footer__inner,
   picking up right where the image's own solid area ends. */
.site-footer {
  /* The scallop's path runs wider than the strip it is drawn in. The
     SVG hides it, but its geometry still counts toward how wide the
     page thinks it is, which showed up as a few pixels of horizontal
     scroll on the longest page. `clip`, not `hidden`: it trims
     without turning this into a scroll container. */
  overflow-x: clip;

  position: relative;
  /* A gentle overlap only — just enough for the goodbye photo's own
     corner (z-index:2 on .goodbye__frame) to step onto this scallop,
     not swallow the whole ornament. */
  margin-top: clamp(-70px, -5vw, -34px);
}

/* The source SVG's viewBox is cropped to just the wavy top edge plus
   a small buffer (0 0 1440 80, in index.html) instead of its full
   403-unit intrinsic height — the rest of that height was solid fill
   in the same colour as .site-footer__inner right below it anyway
   (redundant), and was the real reason the footer read as a big
   square block: ~400px of fixed height before any actual content,
   regardless of how tight the padding below it was. */
.site-footer__scallop {
  display: block;
  width: 100%;
  aspect-ratio: 1440 / 80;
  position: relative;
}

.site-footer__inner {
  background: var(--color-envelope-front);
  margin-top: -1px; /* avoid a hairline seam with the image above */
}

/* Much less top/bottom padding than the shared section default —
   this was reading as a big square block instead of a slim
   rectangular footer bar. Bottom padding is set to the exact 25px
   Clara wants between the copyright line (the last child here) and
   the true bottom edge of the page, since nothing else follows it. */
.site-footer__inner-content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-3) var(--gutter) 25px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.site-footer__prompt {
  font-family: var(--font-mono-label);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-wrap: pretty;
}

.site-footer__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono-label);
  font-size: var(--fs-label);
}

.site-footer__link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.site-footer__socials {
  display: flex;
  gap: var(--space-2);
}

.site-footer__socials a {
  display: block;
  width: 18px;
  height: 18px;
}

.site-footer__socials svg {
  width: 100%;
  height: 100%;
}

.site-footer__copyright {
  align-self: flex-end;
  font-family: var(--font-mono-label);
  font-size: 0.65rem;
  opacity: 0.6;
  /* 20px more than before (space-3=16px), per Clara, for more air
     between the contact info above and the credits line. */
  margin-top: calc(var(--space-3) + 20px);
}