/* =========================================================================
   Sketchy Horizon — the site footer, shared by every page that carries the
   site header (Float's pages, its help, and the studio's support and
   privacy pages). The studio home page keeps its own.

   Uses the page's --text and --text-muted, which /float/styles.css and
   /pages.css both define.
   ========================================================================= */

/* In the header's serif, its links treated the same way (coral underline on
   hover and on the current page), at a quiet 15px (Oct 27, 2026). */
.foot {
  padding-block: 48px;
  color: var(--text-muted);
  font-family: "Newsreader", "Iowan Old Style", "Charter", Georgia, serif;
  font-size: 15px;
  line-height: 1.2;
}

.foot__inner {
  width: min(100% - 48px, 1120px);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  justify-content: space-between;
}

.foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }

.foot a {
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  text-decoration-color: var(--sh-coral);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.foot a:hover,
.foot a[aria-current="page"] { text-decoration-line: underline; }

/* On a phone the two halves wrap, so centre them, as the home page always does. */
@media (max-width: 640px) {
  .foot__inner { width: min(100% - 32px, 1120px); justify-content: center; text-align: center; }
  .foot nav { justify-content: center; }
}