/*
 * Site footer - 1:1 Cleo geometry, GrahaGuru palette.
 *
 * Every number below was measured on web.meetcleo.com with Chrome at 1440x900,
 * 1024x900, 768x900 and 390x844 on 2026-09-03 (Claude lane C66); the raw capture
 * lives in handoffs/evidence-20260903/footer/. Geometry, type ramp, spacing and
 * motion follow Cleo exactly. Colour does not: Cleo's brown #291210 panel and
 * #47201C ink are replaced by our deep purple ink, and the ground stays white,
 * never Cleo cream #F8F6F2.
 *
 * Selectors are deliberately doubled (footer.page-footer.page-footer ...).
 * page-system.css, reference-parity.css and saved-page.css already style
 * .page-footer, .page-footer-main, .page-footer-cols > div and .page-footer-bottom,
 * and saved-page.css reaches them with two classes. A single-class rule here would
 * lose on specificity whatever the load order, so the doubled class buys a whole
 * specificity step and makes this file the single authority for the footer.
 */

footer.page-footer.page-footer {
  /* 1440 band */
  --ggf-inset: 32px;          /* panel distance from each viewport edge */
  --ggf-radius: 56px;         /* panel corner cut (bottom-left stays square) */
  --ggf-rail: 48px;           /* logo / first-column offset inside the panel */
  --ggf-bottom-rail: 72px;    /* copyright + social inset in the bottom bar */
  --ggf-gutter: 24px;         /* 8-column block-grid gap */
  --ggf-block-pad: 72px;      /* panel top and bottom padding */
  --ggf-block-side: 0px;      /* panel side padding (mobile only) */
  --ggf-block-gap: 88px;      /* lockup row -> column row */
  --ggf-col-gap: 18px;        /* heading -> first link */
  --ggf-link-gap: 16px;       /* link -> link */
  --ggf-col-w: 190.25px;
  --ggf-col-pitch-gap: 72px;
  --ggf-row-gap: 32px;
  --ggf-fs: 11.9px;
  --ggf-lh: 1.142857;
  --ggf-tagline-fs: 27.2px;
  --ggf-tagline-lh: 1.125;
  --ggf-bottom-pad: 40px;
  --ggf-panel: #25103f;       /* our deep purple ink, not Cleo brown */
  --ggf-ground: #ffffff;      /* white, so the corner cut actually reads */
  --ggf-ink: #351268;
  --ggf-font: PPNeueMontreal, PPNeue, Arial, sans-serif;

  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: var(--ggf-ink);
  background: var(--ggf-ground);
  font-family: var(--ggf-font);
  font-size: var(--ggf-fs);
  font-weight: 300;
  line-height: var(--ggf-lh);
  letter-spacing: normal;
}

/* ---- panel ------------------------------------------------------------- */

footer.page-footer.page-footer .page-footer-main {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: var(--ggf-block-gap);
  margin: 0;
  padding: var(--ggf-block-pad) var(--ggf-block-side);
  color: #fff;
  background: transparent;
}

footer.page-footer.page-footer .page-footer-panel {
  position: absolute;
  inset: 0;
  margin: 0 var(--ggf-inset);
  border-radius: var(--ggf-radius) var(--ggf-radius) var(--ggf-radius) 0;
  background: var(--ggf-panel);
  pointer-events: none;
}

/* Cleo's shared 8-column page grid. Every row of the footer sits on it. */
footer.page-footer.page-footer .page-footer-head,
footer.page-footer.page-footer .page-footer-body,
footer.page-footer.page-footer .page-footer-bottomw {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: var(--ggf-gutter);
  row-gap: var(--ggf-row-gap);
  margin: 0;
  padding: 0 var(--ggf-inset);
}

/* ---- brand lockup ------------------------------------------------------- */

footer.page-footer.page-footer .page-footer-logo {
  grid-column: 1;
  margin-left: var(--ggf-rail);
  display: block;
}

footer.page-footer.page-footer .page-footer-brand {
  width: 85px;
  height: 43px;
  min-height: 0;
  margin: 0;
  padding: 0 8.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 0;
  border-radius: 32px 32px 32px 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  font-family: var(--ggf-font);
  font-weight: 650;
  font-size: 13.5px;
  line-height: 1;
  letter-spacing: -0.055em;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}

/* ---- tagline ------------------------------------------------------------ */

footer.page-footer.page-footer .page-footer-statement {
  grid-column: 3 / span 2;
  margin: 0;
  color: #fff;
  font-family: var(--ggf-font);
  font-weight: 300;
  font-size: var(--ggf-tagline-fs);
  line-height: var(--ggf-tagline-lh);
  letter-spacing: normal;
}

/* ---- columns ------------------------------------------------------------ */

footer.page-footer.page-footer .page-footer-cols {
  grid-column: 3 / span 6;
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: none;
  gap: var(--ggf-row-gap) var(--ggf-col-pitch-gap);
  margin: 0;
  padding: 0;
}

footer.page-footer.page-footer .page-footer-cols > div {
  width: var(--ggf-col-w);
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ggf-col-gap);
}

footer.page-footer.page-footer .page-footer-cols h3 {
  width: 100%;
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: var(--ggf-font);
  font-weight: 450;
  font-size: var(--ggf-fs);
  line-height: var(--ggf-lh);
  letter-spacing: normal;
  text-transform: none;
  /* Cleo trims the heading box to its cap height, which is what puts the
     heading and the first link exactly --ggf-col-gap apart. */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

footer.page-footer.page-footer .page-footer-cols ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ggf-link-gap);
}

footer.page-footer.page-footer .page-footer-cols li {
  margin: 0;
  padding: 0;
  list-style: none;
}

footer.page-footer.page-footer .page-footer-cols a {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-family: var(--ggf-font);
  font-weight: 300;
  font-size: var(--ggf-fs);
  line-height: var(--ggf-lh);
  letter-spacing: normal;
  text-decoration: none;
  /* Cleo rests its footer links at opacity .8 and lifts them on hover. */
  opacity: 0.8;
  transition: opacity 0.2s linear;
}

footer.page-footer.page-footer .page-footer-cols a:hover,
footer.page-footer.page-footer .page-footer-cols a:focus-visible {
  color: #fff;
  opacity: 1;
}

footer.page-footer.page-footer .page-footer-note {
  grid-column: 3 / span 6;
  margin: 0;
  /* keep the note off the panel edge, on the same rail the lockup sits on */
  padding: 0 var(--ggf-rail) 0 0;
  border: 0;
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--ggf-font);
  font-weight: 300;
  font-size: var(--ggf-fs);
  line-height: 1.5;
  letter-spacing: normal;
}

/* ---- bottom bar --------------------------------------------------------- */

footer.page-footer.page-footer .page-footer-bottom {
  grid-column: 1 / -1;
  min-height: 0;
  margin: 0;
  padding: var(--ggf-bottom-pad) var(--ggf-bottom-rail);
  display: flex;
  /* page-system.css flips this to column below 760px; declare it here so the
     home page and every page-system page render the same bar. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--ggf-ink);
  background: transparent;
  /* page-system.css sets `font: 300 14.4px/1.2` here; pin it so the bar inherits
     the same metrics on the home page and on every page-system page. */
  font-family: var(--ggf-font);
  font-size: var(--ggf-fs);
  font-weight: 300;
  line-height: var(--ggf-lh);
}

footer.page-footer.page-footer .page-footer-copyright {
  margin: 0;
  padding: 0;
  color: var(--ggf-ink);
  font-family: var(--ggf-font);
  font-weight: 300;
  font-size: var(--ggf-fs);
  line-height: var(--ggf-lh);
  letter-spacing: normal;
  text-transform: none;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

footer.page-footer.page-footer .page-footer-social {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 20px;
}

footer.page-footer.page-footer .page-footer-social li {
  margin: 0;
  padding: 0;
  list-style: none;
}

footer.page-footer.page-footer .page-footer-social a {
  width: 21px;
  height: 21px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ggf-ink);
  font-size: 0;
  opacity: 1;
  transition: opacity 0.2s linear;
}

footer.page-footer.page-footer .page-footer-social a:hover,
footer.page-footer.page-footer .page-footer-social a:focus-visible {
  opacity: 0.6;
}

footer.page-footer.page-footer .page-footer-social svg {
  display: block;
  width: 21px;
  height: 21px;
}

footer.page-footer.page-footer a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---- 1120px and down: Cleo's two-up band -------------------------------- */

@media (max-width: 1120px) {
  footer.page-footer.page-footer {
    --ggf-radius: 48px;
    --ggf-rail: 56px;
    --ggf-bottom-rail: 56px;
    --ggf-gutter: 16px;
    --ggf-block-pad: 56px;
    --ggf-block-gap: 80px;
    --ggf-col-gap: 24px;
    --ggf-link-gap: 12px;
    --ggf-col-w: 200px;
    --ggf-col-pitch-gap: 16px;
    --ggf-bottom-pad: 32px;
    /* 14px at a 960px reference, exactly as Cleo scales it. */
    --ggf-fs: max(14px, 1.458333vw);
    --ggf-tagline-fs: max(28px, 2.916667vw);
    --ggf-tagline-lh: 1.142857;
  }

  footer.page-footer.page-footer .page-footer-statement {
    grid-column: 5 / span 3;
  }

  footer.page-footer.page-footer .page-footer-body {
    display: block;
    padding: 0;
  }

  footer.page-footer.page-footer .page-footer-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ggf-row-gap) var(--ggf-col-pitch-gap);
    padding: 0 var(--ggf-inset);
  }

  /* Cleo pushes the left-hand column onto the same rail as the lockup. */
  footer.page-footer.page-footer .page-footer-cols > div:nth-child(odd) {
    margin-left: var(--ggf-rail);
  }

  footer.page-footer.page-footer .page-footer-note {
    margin: var(--ggf-row-gap) 0 0;
    padding: 0 calc(var(--ggf-inset) + var(--ggf-rail));
  }
}

/* ---- 600px and down: Cleo's single-column band -------------------------- */

@media (max-width: 600px) {
  footer.page-footer.page-footer {
    --ggf-inset: 16px;
    --ggf-radius: 32px;
    --ggf-rail: 0px;
    --ggf-bottom-rail: 24px;
    --ggf-block-pad: 48px;
    --ggf-block-side: 64px;
    --ggf-block-gap: 64px;
    --ggf-col-gap: 16px;
    --ggf-link-gap: 8px;
    --ggf-col-pitch-gap: 56px;
    --ggf-col-w: 200px;
    --ggf-bottom-pad: 24px;
    /* 12.096px / 28.224px at 390, floored and capped so the band stays sane. */
    --ggf-fs: clamp(11px, 3.101538vw, 14px);
    --ggf-lh: 1.333333;
    --ggf-tagline-fs: clamp(24px, 7.236923vw, 34px);
    --ggf-tagline-lh: 1.142857;
  }

  footer.page-footer.page-footer .page-footer-head,
  footer.page-footer.page-footer .page-footer-body,
  footer.page-footer.page-footer .page-footer-cols {
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  footer.page-footer.page-footer .page-footer-head {
    gap: 48px;
  }

  footer.page-footer.page-footer .page-footer-body {
    gap: var(--ggf-row-gap);
  }

  footer.page-footer.page-footer .page-footer-cols {
    gap: var(--ggf-col-pitch-gap);
  }

  footer.page-footer.page-footer .page-footer-cols > div:nth-child(odd) {
    margin-left: 0;
  }

  footer.page-footer.page-footer .page-footer-note {
    margin: 0;
    padding: 0;
  }

  footer.page-footer.page-footer .page-footer-bottomw {
    display: block;
    padding: 0 var(--ggf-inset);
  }

  /* Cleo declares row + wrap here, but with five social marks it always renders
     as two centred lines. Our shorter social row made the wrap content-dependent
     and it diverged between the home page and page-system pages, so we declare
     the column Cleo actually paints: copyright, 24px, social marks, all centred. */
  footer.page-footer.page-footer .page-footer-bottom {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--ggf-bottom-pad);
  }

  footer.page-footer.page-footer .page-footer-copyright {
    text-align: center;
  }
}

/* ---- reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  footer.page-footer.page-footer,
  footer.page-footer.page-footer *,
  footer.page-footer.page-footer *::before,
  footer.page-footer.page-footer *::after {
    transition-duration: 0.00001s !important;
    animation-duration: 0.00001s !important;
    animation-iteration-count: 1 !important;
  }
}