/* ═══════════════════════════════════════════════════════════════════════
   Footer · v58 redesign
   Single-column, all-left composition. Two semantic groups:
     identity (wordmark + slogan-line) | utility (email + copyright)
   Asymmetric spacing reinforces the grouping; uniform left edge anchors
   every line to the page's 64px gutter.
   ═══════════════════════════════════════════════════════════════════════ */

.foot {
  background: transparent;
  border-top: 1px solid var(--rule-subtle);
  margin-top: auto;
}

.foot-inner {
  padding: var(--footer-pad-top) var(--s-12) var(--footer-pad-bottom);
  display: flex;
  flex-direction: column;
}

/* ─── Identity group ─────────────────────────────────────────────────── */

.foot-mark {
  display: block;
  font-family: var(--font-wordmark);
  font-weight: var(--weight-semibold);
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-iron);
  margin-bottom: 10px;
}

.foot-signature {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 15px;
  line-height: 1;
  color: rgba(18, 18, 18, 0.72);
  margin: 0 0 18px;             /* semantic break between identity and utility */
}

/* ─── Utility group ──────────────────────────────────────────────────── */

.foot-contact {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 17px;
  color: var(--color-iron);
  letter-spacing: -0.005em;
  line-height: 1;
  align-self: flex-start;
  margin-bottom: 6px;        /* tight: anchors email to copyright */
  transition: color var(--duration-fast) var(--ease-standard);
}

.foot-contact:hover {
  color: var(--color-orange-deep);
}

.foot-contact:focus-visible {
  outline: 2px solid var(--color-teal-dark);
  outline-offset: 2px;
}

.foot-copyright {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: rgba(18, 18, 18, 0.62);
  font-feature-settings: 'kern', 'liga', 'tnum';
}

/* ─── Mobile ─────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .foot-inner {
    padding: 48px 32px 32px;
  }
}