/* ==========================================================================
   THE FOOTER. One implementation, one file, every page.

   Same doctrine as nav.css, and for the same reason: there used to be three.
   index.html carried the real one inline (named columns, a colophon, the
   tagline and the download call), style.css served the docs and the manifesto
   a single flat row of links, and privacy and terms had a third variant of
   that row with its own .footer-row wrapper. Clicking from the home page into
   the docs changed the footer from a site map into a tag cloud, which reads as
   arriving somewhere adjacent to the site rather than deeper into it.

   So: nothing about this block is defined anywhere else. If you find yourself
   adding a .footer rule to style.css or to a page's <style>, that is the drift
   starting again — put it here instead.

   Markup, and it is the same on every page (root-absolute hrefs throughout,
   because /docs/* pages are one directory down and a relative "docs.html"
   resolves to /docs/docs.html from there):

     <footer class="footer">
       <div class="shell">
         <div class="footer-top">
           <div class="footer-sig">      brand · tagline · download CTA
           <nav class="footer-nav">      three .footer-col lists
         </div>
         <div class="colophon">          copyright · terms · privacy
       </div>
     </footer>

   Column headings are Product / Docs / Flock Labs. Terms and Privacy live in
   the colophon, where legal links belong, and nowhere else.
   ========================================================================== */

.footer {
  border-top: 1px solid var(--hairline-soft);
  padding-block: clamp(46px, 6vw, 72px) 34px;
}

/* The shell is the page's own measure on index; docs and legal pages have no
   global .shell rule, so the footer states it for its own container rather
   than depending on whichever stylesheet the page happens to load. Same
   values, so index is unmoved by the added specificity. */
.footer .shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 32px);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1.9fr);
  gap: clamp(38px, 6vw, 96px);
  align-items: start;
}

/* .brand carries margin-right:auto for the nav bar; in a grid cell it just
   pushes the wordmark's own box, so it is reset here. */
.footer .brand { margin-right: 0; display: inline-flex; align-items: center; }
/* 19px: subordinate to the nav's lockup on purpose. Stated here because the
   docs and legal pages used to size the footer wordmark inline, one page at a
   time, and two of them had drifted. */
.footer .brand .wordmark { font-size: 19px; }

.footer-tag { margin-top: 14px; max-width: 30ch; color: var(--slate); font-size: 14px; line-height: 1.6; }
.footer-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--ink); }
.footer-cta .arr { transition: transform 0.3s var(--ease-out); }
.footer-cta:hover .arr { transform: translateX(4px); }

.footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }
.footer-head {
  font-family: var(--mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--slate-soft);
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; display: grid; gap: 9px; }
.footer-col a { color: var(--slate); font-size: 14px; }
.footer-col a:hover { color: var(--ink); }

.colophon {
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: 22px;
  border-top: 1px solid var(--hairline-soft);
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px 28px; flex-wrap: wrap;
  font-size: 12px; color: var(--slate-soft);
}
.colophon-legal { display: flex; gap: 20px; }
.colophon-legal a { color: var(--slate-soft); }
.colophon-legal a:hover { color: var(--ink); }
.colophon em { font-size: 12.5px; }

/* The animated underline the home page puts on its footer links. Defined for
   the footer only: index has its own global .u for the rest of the page, and
   the docs pages have none, so a footer copied into them would otherwise lose
   the hover it was drawn with. background-size is the animated property, which
   is why this is a gradient and not text-decoration. */
.footer .u {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 calc(100% - 1px);
  transition: background-size 0.3s var(--ease-out);
  padding-bottom: 2px;
}
.footer .u:hover, .footer .u:focus-visible { background-size: 100% 1px; }

@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 520px) {
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  /* Stack by forcing full-width rows, not by flipping to a column: a wrapping
     column flex container sizes its items to max-content and the copyright
     line runs off the right edge. */
  .colophon > * { flex: 1 1 100%; }
  .colophon { gap: 12px; }
}