/* Shared site footer — including subscribe.html (that page has no header)
   Figma: D6f8lbypFFemvmIplJBfAH / node 272:2371
   Desktop: real 12-column CSS grid; brand + link cols on tracks. */

.site-footer {
  --footer-logo-size: 108px;
  --footer-col-size: 20px;
  --footer-ink: var(--ink);
  --footer-pad-top: 70px;
  --footer-pad-bottom: 36px;

  position: relative;
  overflow: hidden;
  background: var(--color-yellow);
  color: var(--footer-ink);
}

/* Full-width 12-col grid: cols 1 & 12 act as side margins (matches Figma 1550 frame) */
.site-footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 0;
  align-items: start;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--footer-pad-top) 0 var(--footer-pad-bottom);
  min-height: 475px;
}

/* Brand: columns 2–5 (logo on col 2, tagline into 3–5) */
.site-footer__brand {
  grid-column: 2 / 6;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  min-width: 0;
}

.site-footer__logo {
  display: block;
  width: var(--footer-logo-size);
  height: var(--footer-logo-size);
  flex-shrink: 0;
}

.site-footer__logo img {
  display: block;
  width: var(--footer-logo-size);
  height: var(--footer-logo-size);
  max-width: none;
}

.site-footer__tagline {
  margin: 0;
  padding-top: 0.15rem;
  min-width: 0;
  max-width: 270px;
  font-family: var(--font-sans);
  font-size: var(--footer-col-size);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-heading);
  line-height: 1.2;
  opacity: 0.7;
  text-wrap: pretty;
}

/* Link columns on tracks — Figma: cols 6 / 8 / 10 */
.site-footer__col {
  min-width: 0;
  padding-top: 0.15rem;
}

.site-footer__col--start {
  grid-column: 6 / 8;
}

.site-footer__col--social {
  grid-column: 8 / 10;
}

.site-footer__col--legal {
  grid-column: 10 / 12;
}

.site-footer__col-title {
  margin: 0 0 0.15em;
  font-family: var(--font-sans);
  font-size: var(--footer-col-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-heading);
  line-height: 1.2;
}

.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__list a {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--footer-col-size);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-heading);
  line-height: 1.2;
  opacity: 0.7;
  transition: color 160ms ease, opacity 160ms ease;
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible {
  color: var(--color-orange);
  opacity: 1;
}

.site-footer__list a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Copyright: column 2 (aligns with logo), bottom of band */
.site-footer__copy {
  grid-column: 2 / 6;
  align-self: end;
  margin: 0;
  padding-top: 3.5rem;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-body);
  line-height: var(--leading-body);
  opacity: 0.5;
}

/* Large GC watermark — Figma 265:2210: bottom-right, cropped overflow
   Frame 1550×475; mark 784×784 at left 71.05% / top 12.77% (right/bottom spill) */
.site-footer__mark {
  position: absolute;
  z-index: 0;
  top: 12.77%;
  left: 71.05%;
  right: auto;
  bottom: auto;
  width: min(784px, 50.6%);
  height: auto;
  transform: none;
  pointer-events: none;
  user-select: none;
  /* black mark × multiply → darker yellow watermark */
  opacity: 0.22;
  mix-blend-mode: multiply;
}

.site-footer__mark img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

@media (max-width: 960px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 2rem;
    row-gap: 2.5rem;
    min-height: 0;
    padding: 3rem var(--pad-x) 2rem;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .site-footer__col--start,
  .site-footer__col--social,
  .site-footer__col--legal {
    grid-column: auto;
  }

  .site-footer__copy {
    grid-column: 1 / -1;
    padding-top: 0;
  }

  .site-footer__mark {
    top: auto;
    bottom: -35%;
    left: auto;
    right: -20%;
    width: min(520px, 70vw);
    opacity: 0.16;
  }
}

@media (max-width: 720px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    row-gap: 1.75rem;
  }

  .site-footer__brand {
    flex-direction: column;
    gap: 1rem;
  }

  .site-footer__mark {
    bottom: -30%;
    right: -25%;
    width: min(420px, 85vw);
  }
}