/* The site's footer, on its own so the one page that does not load site.css
   can still wear it. design-system.html is the app's showcase, generated by
   tools/sync-ui.py against the app's stylesheet; site.css on top of that would
   restyle the specimens. So the footer is scoped to .site-foot rather than to
   every <footer>, because the showcase is full of the app's own. */

.site-foot { padding: 2.5rem 0 3.5rem; color: var(--ink-faint); font: 400 .86rem/1.6 var(--font); }
/* .wrap's width and gutter, restated with site.css's values as fallbacks: on
   the site pages .wrap already sets them and this changes nothing; on the
   showcase there is no .wrap, --wrap or --pad, and the fallbacks are it. */
.site-foot .foot { max-width: var(--wrap, 72rem); margin: 0 auto;
                   padding-left: var(--pad, clamp(1.1rem, 4.5vw, 3rem));
                   padding-right: var(--pad, clamp(1.1rem, 4.5vw, 3rem));
                   display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.5rem 2.5rem; }
.site-foot .foot-brand { display: flex; gap: 14px; align-items: flex-start; }
.site-foot .foot-brand img { width: 32px; height: 32px; margin-top: var(--space-2xs); }
.site-foot .foot-by { margin: 0 0 .25rem; color: var(--ink-dim); font-size: .95rem; }
.site-foot .foot-by a { color: var(--ink); text-decoration-color: rgba(240,233,221,.3); }
.site-foot .foot-note { margin: 0; max-width: 36ch; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 1.5rem 4.5rem; }
.site-foot .foot-col { display: flex; flex-direction: column; gap: .55rem; align-items: flex-end; text-align: right; }
.site-foot nav a { color: var(--ink-dim); text-decoration: none; }
.site-foot nav a:hover { color: var(--tune); }

/* On a phone the two halves stack, and both sit on the centre line. The brand
   block moves as a block: its text stays left-aligned inside it, because a
   centred two-line note under a centred name reads as a poem. The links grow
   to a size a thumb can hit and centre in their columns. */
@media (max-width: 640px) {
  .site-foot .foot { flex-direction: column; align-items: center; gap: 2.25rem; }
  .site-foot nav { justify-content: center; gap: 1.5rem 3rem; }
  .site-foot .foot-col { align-items: center; text-align: center; gap: .35rem; }
  .site-foot nav a { font-size: 1.05rem; padding: .45rem 0; }
}