.site-footer {
  width: 100%;
  padding: calc(80 * var(--u)) var(--page-gutter) 0;
  color: var(--color-black);
}

.footer-main {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: calc(260 * var(--u));
  flex-wrap: wrap;
}

/* The stamp doesn't set the row height, it follows the right column.
   main.js sets its width (386px is the fallback without JS). */
.footer-stamp {
  position: relative;
  flex-shrink: 0;
  width: calc(386 * var(--u));
}

.footer-stamp img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(25 * var(--u));
  flex: 1;
  min-width: min(calc(280 * var(--u)), 100%);
}

.footer-cols {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(60 * var(--u));
  width: 100%;
  flex-wrap: wrap;
}

.footer-about {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  max-width: calc(320 * var(--u));
}

.footer-text {
  line-height: var(--body-r-line-height);
}

.footer-subtitle {
  font-weight: var(--body-b-weight);
  font-size: var(--body-r-size);
  line-height: var(--body-r-line-height);
  margin-bottom: calc(8 * var(--u));
}

.footer-title {
  font-weight: var(--body-r-weight);
  font-size: var(--body-r-size);
  line-height: var(--body-r-line-height);
  text-transform: uppercase;
  margin-bottom: calc(35 * var(--u));
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
  font-weight: var(--body-b-weight);
  font-size: var(--body-b-size);
  line-height: var(--body-b-line-height);
}

.footer-social {
  display: flex;
  gap: calc(32 * var(--u));
  align-items: flex-start;
  margin-top: calc(35 * var(--u));
}

.footer-social img {
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
}

.to-top {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
}

.to-top-label {
  font-weight: var(--body-b-weight);
  font-size: var(--body-b-size);
  line-height: var(--body-b-line-height);
  color: var(--color-persian-plum);
}

.to-top-icon {
  width: calc(62 * var(--u));
  height: calc(62 * var(--u));
  transform: rotate(-90deg);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(20 * var(--u)) 0;
  margin-top: calc(40 * var(--u));
  font-size: var(--body-s-size);
  font-weight: var(--body-s-weight);
  line-height: var(--body-s-line-height);
  flex-wrap: wrap;
  gap: calc(10 * var(--u));
}

/* stacked layout: the stamp needs its ratio back */
@media (max-width: 767px) {
  .footer-main {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(80 * var(--u));
  }

  .footer-stamp {
    width: min(calc(220 * var(--u)), 60%);
    aspect-ratio: 386 / 313;
  }

  .footer-right {
    width: 100%;
  }

  .footer-cols > * {
    flex: 1 1 100%;
  }

  .footer-about {
    max-width: none;
  }
}