/* ==========================================================================
   Base — the footer

   One footer for the whole site, the homepage included. The markup is
   `footer()` in seo/lib/layout.mjs; this file is everything it draws.

   It is its own file, and it borrows nothing from base.css or site.css, because
   the homepage is a hand-written page that loads neither (their `.btn`, `.row`
   and element resets would restyle it). So the few page-level rules the footer
   used to inherit — the face, the leading, the link reset, the page measure,
   the brand lockup — are stated here, scoped to `.foot`. On a content page they
   restate what the page already says; on the homepage they are the only
   statement.

   The one thing it takes from its page is the button: `.btn` is the page's own
   button, from components.css on a content page and the homepage's own on /.

   The ground comes from `data-theme` on the <footer>: dark on content pages,
   light on the homepage. Nothing below names a colour; tokens.css switches the
   palette for the subtree.
   ========================================================================== */

/*
 * A fixed brand column on the left, the link columns on the right, one bottom
 * rule, and the wordmark cut in half by the bottom edge of the document.
 *
 * On content pages it runs on its own dark ground. The footer is the one block
 * on the site that is pure navigation, and giving it a ground of its own is
 * what stops twenty-nine links from reading as another section of the argument.
 */

.foot {
  position: relative;
  overflow: hidden;
  margin-top: clamp(40px, 6vw, 90px);
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-weight: var(--t-body-weight);
  letter-spacing: normal;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* :where() keeps these at element weight, as they are in base.css, so the page's
   own `.btn` still sets its label colour. */
:where(.foot) a { color: inherit; text-decoration: none; }
:where(.foot) svg { display: block; }

/*
 * The footer runs wider than the rest of the site.
 *
 * Everything above it is an argument and reads at 1240px. This is pure
 * navigation: four columns of links plus a brand block, and at the page width
 * the columns crowd. It gets its own, wider measure.
 *
 * The bottom padding is what keeps the signature off the links. See .ft-sign.
 */
.ft-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(56px, 8vh, 100px) clamp(120px, 13vw, 220px);
}

/* A fixed left column rather than a fraction, so the brand can never be given
   more room than it uses. */
.ft-top {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 120px);
  padding-bottom: clamp(44px, 6vh, 76px);
}
.ft-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }

/* The nav's brand lockup (site.css .brand), at the same size. */
.ft-logo {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-brand); font-weight: 700;
  font-size: 19px; letter-spacing: -0.04em; line-height: normal;
}
.ft-logo img {
  width: 30px; height: 30px; border-radius: 9px;
  box-shadow: inset 0 0 0 1px var(--c-hairline);
}
.ft-blurb { margin: 0; max-width: 300px; font-size: 14px; line-height: 1.6; color: var(--c-ink-muted); }

.ft-sub { width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ft-sub-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--c-ink-muted);
}
/* A `.btn.btn--accent`. The only thing it adds is the arrow sliding out on
   hover, which is this site's own gesture and has no counterpart in the app. */
.ft-sub-go { transition: transform 45ms linear, box-shadow 45ms linear, gap .25s cubic-bezier(.22,1,.36,1); }
.ft-sub-go:hover { gap: 14px; }
.ft-sub-note { margin: 0; font-size: 11.5px; color: var(--c-ink-faint); }

.ft-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 44px); }
.ft-col { display: flex; flex-direction: column; gap: 16px; }
.ft-head {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--c-ink-muted);
}
.ft-list { display: flex; flex-direction: column; gap: 12px; }
.ft-link { display: inline-flex; font-size: 14px; color: var(--c-ink); }
/* A rule that grows under the word rather than a colour change. It needs the
   inner span: the anchor is inline-flex and stretches to the column, so an
   underline on the anchor would run past the end of the label. */
.ft-link > span { position: relative; display: inline-block; }
.ft-link > span::after {
  content: ''; position: absolute; left: 0; bottom: -3px; height: 1px; width: 0;
  background: var(--brand-400);
  transition: width .28s cubic-bezier(.25,1,.5,1);
}
.ft-link:hover > span::after { width: 100%; }

.ft-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 28px;
  padding-top: 24px;
  border-top: 1px solid var(--c-hairline);
  font-size: 12.5px; color: var(--c-ink-muted);
}
.ft-start { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.ft-note { color: var(--c-ink-faint); }
.ft-note a { text-decoration: underline; text-underline-offset: 2px; }
.ft-end { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.ft-status { display: inline-flex; align-items: center; gap: 8px; }
.ft-status i { width: 7px; height: 7px; border-radius: 999px; background: var(--brand); }
.ft-up { display: inline-flex; align-items: center; gap: 8px; color: var(--c-ink-muted); transition: color .2s ease; }
.ft-up:hover { color: var(--c-ink); }
.ft-up svg { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.ft-up:hover svg { transform: translateY(-3px); }

/*
 * The signature: half on the page, half off it.
 *
 * Behind everything (z-index 0 against .ft-inner's 1) and pointer-events:none,
 * so it can sit under the bottom rule without eating a click on Back to top.
 * The translate is a PERCENTAGE of the word's own box rather than a pixel
 * value, so the same fraction of the glyph is cut at every viewport width.
 */
/*
 * It sits BELOW the bottom rule, not behind the whole footer.
 *
 * It used to be pinned to the footer's own bottom edge and cut at 34%, which
 * put the top two thirds of a 360px glyph straight through the link columns
 * and the copyright line. Now .ft-inner reserves the room and the word is cut
 * harder, so nothing overlaps anything.
 */
.ft-sign {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  display: flex; justify-content: center;
  pointer-events: none;
  transform: translateY(52%);
}
.ft-word {
  display: block; white-space: nowrap;
  font-family: var(--font-brand); font-weight: 700;
  font-size: clamp(120px, 26vw, 360px);
  letter-spacing: -.06em; line-height: 1;
  background-image: linear-gradient(180deg, var(--brand) 0%, var(--brand-700) 78%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  opacity: .5;
  /* The fade has to FINISH inside the visible part. At translateY(52%) the top
     48% of the glyph is on the page, so a gradient still fading in past a
     quarter is a word that never reads as solid: it reads as a smudge rather
     than as a wordmark being cut. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 26%);
  user-select: none;
}

@media (max-width: 1080px) {
  .ft-top { grid-template-columns: 1fr; }
  .ft-brand { max-width: 460px; }
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 24px; }
}
@media (max-width: 560px) {
  .ft-cols { grid-template-columns: 1fr; }
  .ft-bottom { justify-content: flex-start; }
  .ft-word { opacity: .34; }
}