/* ============================================================
   evestoller.com — shared site footer
   Loaded by every page. Uses only `.sf-*` classes and the site's
   existing color tokens, so it is safe to add to any page without
   touching that page's own styles. The footer markup is identical
   on every page; edit it in one place and copy it everywhere.
   ============================================================ */

.sf{
  border-top:1px solid var(--divider);
  margin-top:48px;
  padding:56px 0 40px;
  color:var(--muted);
  font-size:.92rem;
}
.sf .sf-wrap{max-width:1120px;margin:0 auto;padding:0 32px;}

/* Columns: wordmark/blurb left, three link groups right (as in the reference) */
.sf-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:40px;
}
.sf-brand .sf-wordmark{
  font-family:'Fraunces',serif;font-size:1.35rem;letter-spacing:.01em;
  color:var(--heading);text-decoration:none;display:inline-block;margin-bottom:12px;
}
.sf-brand .sf-wordmark span{color:var(--accent-em);font-style:italic;}
.sf-brand p{max-width:30em;margin:0 0 10px;line-height:1.55;}
.sf-brand a{color:var(--muted);text-decoration:none;}
.sf-brand a:hover{color:var(--hl);}

.sf-col h3{
  font-family:'Fraunces',serif;font-weight:400;font-size:1.25rem;
  color:var(--heading);margin:0 0 18px;line-height:1.1;
}
.sf-col ul{list-style:none;margin:0;padding:0;}
.sf-col li{margin:0 0 11px;}
.sf-col a{color:var(--ghost-fg);text-decoration:none;font-size:.95rem;}
.sf-col a:hover{color:var(--hl);}

/* Bottom bar: profile icons left, legal lines right */
.sf-bottom{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  margin-top:48px;
}
.sf-icons{display:flex;gap:16px;align-items:center;}
.sf-icons a{display:block;line-height:0;border-radius:50%;transition:transform .15s ease,opacity .15s ease;}
.sf-icons a:hover{transform:translateY(-2px);}
.sf-icons img{display:block;border-radius:50%;}
.sf-pt img{width:56px;height:56px;}
/* LinkedIn mark is black on transparent; invert it toward white as the site goes to night.
   --logo-inv is written by the theme engine (1 = night, 0 = day). */
.sf-li img{width:44px;height:44px;filter:invert(var(--logo-inv,1));}
.sf-legal{text-align:right;font-size:.85rem;line-height:1.6;max-width:44em;}
.sf-legal .sf-license{color:var(--eyebrow);}
.sf-legal a{color:var(--muted);text-decoration:none;}
.sf-legal a:hover{color:var(--hl);}

@media (max-width:880px){
  .sf{padding:44px 0 32px;}
  .sf-legal{padding-right:72px;}
  .sf .sf-wrap{padding:0 24px;}
  .sf-grid{grid-template-columns:1fr 1fr;gap:32px 24px;}
  .sf-brand{grid-column:1 / -1;}
  .sf-bottom{flex-direction:column;align-items:flex-start;}
  .sf-legal{text-align:left;}
}
@media (max-width:480px){
  .sf-grid{grid-template-columns:1fr;}
}
a.sf-wordmark:focus-visible,.sf-col a:focus-visible,.sf-icons a:focus-visible,.sf-legal a:focus-visible{outline:3px solid var(--hl);outline-offset:3px;}