/* ==========================================================================
   footer.css - the footer component, one definition, loaded by every page.

   Everything here is byte-identical on both pages. The ONE thing that is not
   is the width behaviour: the notes index caps its footer at --shell and
   centres it, the homepage runs it full bleed. That difference is real and it
   is still unsettled, so it is NOT hidden here. Each page states it in its own
   stylesheet, under a comment naming this file. Settle it and both overrides
   delete.
   ========================================================================== */

.foot-cols{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,48px);
  padding:clamp(56px,8vh,96px) clamp(12px,1.6vw,24px) clamp(40px,6vh,72px);
}
.foot-head{
  margin:0 0 var(--s-3);font-family:var(--font-mono);font-size:var(--t-label);
  font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--quiet);
}
.foot-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s-2)}
.foot-link{
  display:inline-block;font-size:var(--t-7);line-height:1.3;letter-spacing:-.01em;
  color:var(--ink);opacity:.72;
  transition:opacity .25s var(--ease),transform .3s var(--ease);
}
.foot-link:hover{opacity:1;transform:translateX(3px)}

.foot-bar{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);
}

@media(max-width:860px){.foot-cols{grid-template-columns:repeat(2,1fr);row-gap:36px}}
@media(max-width:700px){.foot-bar{flex-direction:column;align-items:flex-start;gap:8px}}