/* Built on the West Kite Design System 1.10 · https://westkite.com/brand · wk-78fa6fe5 */
/* The site footer, shared by every page. Markup: tools/parcel-art/partials/footer.html,
   inlined at build time with {{partial:footer}}. Tokens come from /westkite.css. */

/* The wordmark, sat on the page just above the footer with its lower third cut off. It is
   live text in the display face, not a picture: the SVG box is the word's own ink box in font
   units (baseline at 0, ink from -1429 up to 20 below, 1449 tall), trimmed to 1014 units so
   exactly the top 70 percent shows. The box carries the crop, so it holds at every width. */
.foot-word {
  padding: 0 32px;
  background: var(--wk-paper, #ffffff);
}

.foot-word svg {
  display: block;
  /* Short of the full width, so the name reads as a word rather than a stretched banner. */
  width: 85%;
  margin: 0 auto;
  height: auto;
}

.foot-word text {
  /* The box is in font units, so one em is the font's 2000 units. Without this the text
     inherits the page's 16px and renders as dust outside the crop. */
  font-size: 2000px;
  font-family: var(--wk-display, "Newsreader", Georgia, serif);
  font-weight: var(--wk-display-weight, 375);
  font-variation-settings: var(--wk-display-vs, "opsz" 28);
  letter-spacing: var(--wk-display-track, -0.03em);
}

.foot-word .wm-ink {
  fill: var(--wk-ash, #ebeae9);
  fill: url(#wk-foot-pearl);
}

/* White in a mask means "let this through", so the mask copy is the letters, solid. */
.foot-word .wm-mask {
  fill: #ffffff;
}

/* The glare: a band of light that follows the pointer for as long as it is over the word.
   footer.js gives it an x in the box's font units; the short transition is the weight behind
   it, so it trails the pointer instead of snapping to it. These gradients are the only ones
   on the site — the wordmark is decoration, not a component. */
.wm-sheen {
  opacity: 0;
  transform: translateX(-3000px);
  transition: opacity 260ms ease, transform 140ms linear;
}

.foot-word.is-lit .wm-sheen {
  opacity: 1;
}

.site-foot {
  padding: 64px 32px 24px;
  background: var(--wk-carbon, #1c1c1c);
  color: var(--wk-text, #f7f6f5);
}

.foot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px 48px;
}

.foot-say {
  display: grid;
  justify-items: start;
  gap: 32px;
}

/* The page links, stacked down the right. The inset keeps the longest of them clear of the
   edge: left-aligned, it is the widest link that decides how close the column comes. */
.foot-nav {
  display: grid;
  /* Two columns of three, filled down then across. */
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  gap: 12px 48px;
  /* Dropped past the lockup and the gap under it, so the first link starts level with the
     first of the three lines. */
  margin-top: calc(40px + 32px);
  margin-right: 64px;
  font-size: 14px;
  color: var(--wk-text-muted, rgba(255, 255, 250, 0.6));
}

/* The lockup as the guide exports it for a dark ground: mark and wordmark, both Linen, with
   the clear space around them already built in. */
.foot-lockup {
  display: block;
  height: 40px;
  width: auto;
}

/* Three lines, each one brighter than the last, so the eye lands on the third. */
.foot-lines {
  margin: 0;
  font-family: var(--wk-display, "Newsreader", Georgia, serif);
  font-weight: var(--wk-display-weight, 375);
  font-variation-settings: var(--wk-display-vs, "opsz" 28);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: var(--wk-display-track, -0.03em);
}

.foot-lines span {
  display: block;
}

.foot-lines span:first-child {
  opacity: 0.4;
}

.foot-lines span:nth-child(2) {
  opacity: 0.68;
}

/* Ask AI about us: a label and four small square buttons. */
.ask-ai {
  display: grid;
  justify-items: start;
  gap: 12px;
}

.ask-ai-row {
  display: flex;
  gap: 8px;
}

.ask-ai-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--wk-text-muted, rgba(255, 255, 250, 0.6));
}

.ask-ai-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--wk-border, rgba(255, 255, 255, 0.22));
  border-radius: var(--wk-radius, 4px);
  background: transparent;
  color: var(--wk-text, #f7f6f5);
  transition: background 160ms ease, border-color 160ms ease;
}

.ask-ai-btn:hover,
.ask-ai-btn:focus-visible {
  background: var(--wk-hover, #2a2927);
  border-color: var(--wk-text-muted, rgba(255, 255, 250, 0.6));
}

.ask-ai-icon {
  display: block;
  width: 18px;
  height: 18px;
}

/* Links and the copyright line, under one hairline. */
.foot-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: 96px;
  padding-top: 24px;
  border-top: 1px solid var(--wk-hairline, rgba(255, 255, 255, 0.11));
  font-size: 13px;
  color: var(--wk-text-muted, rgba(255, 255, 250, 0.6));
}

.foot-nav a,
.foot-base a {
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}

.foot-nav a:hover,
.foot-nav a:focus-visible,
.foot-base a:hover,
.foot-base a:focus-visible {
  color: var(--wk-text, #f7f6f5);
}

@media (max-width: 900px) {
  .foot-word {
    padding: 0 20px;
  }

  .foot-word svg {
    width: 100%;
  }

  .site-foot {
    padding: 48px 20px 20px;
  }

  .foot-top {
    align-items: flex-start;
    gap: 32px;
  }

  .foot-lockup {
    height: 32px;
  }

  .foot-nav {
    margin-top: 0;
    margin-right: 0;
  }

  .foot-base {
    margin-top: 48px;
  }

}

/* Touch: the system returns controls to 44px on a coarse pointer. */
@media (pointer: coarse) {
  .ask-ai-btn {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wm-sheen {
    transition: none;
  }

  .foot-nav a,
  .foot-base a,
  .ask-ai-btn {
    transition: none;
  }
}