/* ═══════════════════════════════════════════════════════════
   site-footer.css — THE footer. One stylesheet, one copy, every
   page that opts in.

   Pairs with templates/partials/site-footer.php.

   A hard black terminus after whatever the page ended on. Four
   link groups plus a brand block, then a legal row.

   ── SELF-CONTAINED ON PURPOSE ──────────────────────────────
   This block used to live inside content.css scoped under .doc,
   which meant it only worked on a page that was also running
   content.css and its token set. It now sits on two pages built
   from two different token sets (/blog on content.css, the
   landing page on landing.css), so it carries everything it
   needs itself:

     · every rule scoped under .site-footer, so nothing leaks
       out and nothing needs a .doc ancestor
     · its own type stack, NOT var(--font-sans). On /blog that
       token is Inter, on the landing page it is Instrument Sans,
       and a footer that changes typeface depending on which page
       it is sitting on is not one footer
     · its own colours as literals. The footer is black in both
       light and dark surroundings by design
     · its own .wrap, because the page's .wrap may not exist

   The one token it does read is --page-pad, with a 24px
   fallback, so the blog's tighter mobile gutter still applies
   there and the landing page just gets the default.
   ═══════════════════════════════════════════════════════════ */

.site-footer{
  --f-ink:#fff;
  --f-mute:rgba(255,255,255,.56);
  --f-dim:rgba(255,255,255,.38);
  --f-line:rgba(255,255,255,.12);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  line-height:1.6;
  background:#0A0A0C;color:var(--f-ink);
  border-top:0;padding:80px 0 44px;margin-top:0;
}
/* the footer sits on pages with different resets, so it states the
   two things its markup assumes rather than inheriting them */
.site-footer *,.site-footer *::before,.site-footer *::after{box-sizing:border-box}
.site-footer a{color:inherit;text-decoration:none}

.site-footer .wrap{max-width:1230px;margin:0 auto;padding:0 var(--page-pad,24px)}

.site-footer .f-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:64px;padding-bottom:56px}

.site-footer .f-logo{display:inline-flex;align-items:center;gap:10px;font-size:1.0625rem;font-weight:600;
  letter-spacing:-.024em;color:var(--f-ink)}
.site-footer .f-logo .logo-mark{width:28px;height:28px;background:#fff;color:#0A0A0C;
  display:flex;align-items:center;justify-content:center;border-radius:7px}
.site-footer .f-logo .logo-mark svg{width:16px;height:16px}
.site-footer .f-blurb{margin:20px 0 26px;font-size:.9375rem;line-height:1.65;color:var(--f-mute);max-width:38ch}

.site-footer .f-cta{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 20px;
  background:#fff;color:#0A0A0C;border-radius:9999px;
  font-size:.875rem;font-weight:600;letter-spacing:-.008em;transition:opacity .15s}
.site-footer .f-cta:hover{opacity:.85}
.site-footer .f-cta svg{width:14px;height:14px}

.site-footer .f-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 28px}
.site-footer .f-col{display:flex;flex-direction:column;align-items:flex-start}
.site-footer .f-h{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;
  color:var(--f-dim);margin:0 0 18px}
.site-footer .f-col a{font-size:.9063rem;line-height:1.35;color:var(--f-mute);padding:6px 0;transition:color .15s}
.site-footer .f-col a:hover{color:var(--f-ink)}

.site-footer .f-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;
  padding-top:30px;border-top:1px solid var(--f-line)}
.site-footer .f-copy{font-size:.8125rem;color:var(--f-dim);margin:0}
.site-footer .f-legal{display:flex;flex-wrap:wrap;gap:24px}
.site-footer .f-legal a{font-size:.8125rem;color:var(--f-dim);transition:color .15s}
.site-footer .f-legal a:hover{color:var(--f-ink)}

.site-footer .f-note{margin:26px 0 0;font-size:.75rem;line-height:1.6;color:rgba(255,255,255,.28);max-width:78ch}

/* the default focus ring is thin and all but invisible against the
   black. Carried over from content.css with the footer it belonged to. */
.site-footer a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px}

@media (max-width:980px){
  .site-footer .f-top{grid-template-columns:1fr;gap:48px;padding-bottom:44px}
  .site-footer .f-blurb{max-width:46ch}
  .site-footer .f-cols{gap:36px 24px}
}
@media (max-width:640px){
  .site-footer{padding:56px 0 36px}
  .site-footer .f-top{gap:40px;padding-bottom:36px}
  .site-footer .f-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
  .site-footer .f-blurb{max-width:none;margin:18px 0 24px}
  .site-footer .f-bottom{flex-direction:column;align-items:flex-start;gap:14px;padding-top:26px}
  .site-footer .f-legal{gap:16px 20px}
}