/* The site footer, shared by every page. Markup lives in
   scripts/site-src/footer.html and is written into each page by
   scripts/build-site.py. Everything is prefixed sf- so page styles
   (.legal, .made, .social, .brand) cannot reach in. */
.site-foot {
  --sf-line: var(--chip, #23261a); --sf-dim: var(--dim, #6f7263);
  --sf-link: var(--muted, #9a9d8e); --sf-hi: var(--text, #f4f5ef); --sf-volt: var(--volt, #d8f000);
  width: 100%; border-top: 1px solid var(--sf-line); margin-top: 72px;
  font-family: 'Sora', system-ui, sans-serif; line-height: 1.5;
}
.site-foot * { box-sizing: border-box; margin: 0; }
.site-foot a { text-decoration: none; }
.sf-wrap { max-width: 1200px; margin: 0 auto; padding: 64px 40px 36px; }
/* Brand column on the left, link columns grouped to the right. */
.sf-top { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 40px; }
.sf-id { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.sf-brand { display: flex; align-items: center; gap: 11px; color: var(--sf-hi); }
.sf-brand span { font: 800 17px 'Sora', sans-serif; letter-spacing: -.02em; }
.sf-tagline, .sf-fine { font: 400 13px 'JetBrains Mono', monospace; color: var(--sf-dim); }
.sf-fine { font-size: 11px; }
.sf-store { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.sf-badge { display: block; width: 140px; }
.sf-badge svg { display: block; width: 100%; height: auto; }
.sf-col { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sf-col h2 { font: 500 11px 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase;
             color: var(--sf-dim); margin-bottom: 6px; }
.sf-col a, .sf-col button { font: 400 14px/1.5 'Sora', sans-serif; color: var(--sf-link); }
/* A bare <button> brings its own box; flatten it so "Cookie preferences"
   lines up with the links above it. */
.sf-col button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.sf-col a:hover, .sf-col button:hover { color: var(--sf-volt); }
.sf-col a[aria-current] { color: var(--sf-hi); }
/* Bottom bar: social left, company line right. */
.sf-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
             margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--sf-line); }
.sf-social { display: flex; align-items: center; gap: 18px; }
.sf-social a { display: flex; color: var(--faint, #8a8d80); transition: color .15s ease; }
.sf-social a:hover, .sf-social a:focus-visible { color: var(--sf-hi); }
.sf-social svg { display: block; width: 18px; height: 18px; fill: currentColor; }
.sf-legal { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; text-align: right;
            font: 400 11px/1.6 'JetBrains Mono', monospace; color: var(--sf-dim); }
/* Quiet bit of personality. Understated on purpose. */
.sf-made { display: flex; align-items: center; gap: 5px; }
.sf-made svg { width: 10px; height: 10px; color: var(--sf-volt); flex-shrink: 0; }
@media (max-width: 1000px) {
  .sf-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sf-id { grid-column: 1 / -1; }
}
@media (max-width: 900px) { .sf-wrap { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 600px) {
  .site-foot { margin-top: 56px; }
  .sf-wrap { padding-top: 48px; }
  .sf-top { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .sf-bottom { flex-direction: column; align-items: flex-start; }
  .sf-legal { align-items: flex-start; text-align: left; }
}