/* =========================================================
   FOOTER.CSS
   Shared footer styles. Depends on the CSS variables and
   .logo class already defined by the page / navbar.css:
   --cream, --paper, --ink, --ink-soft, --green, --green-2,
   --orange, --orange-soft, --line, --line-on-green
   ========================================================= */

footer{
  background: var(--green-2);
  color: rgba(255,255,255,0.6);
  padding: 70px 0 30px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--line-on-green);
}
.footer-grid .logo{ color: var(--paper); margin-bottom: 14px; }
.footer-grid p{ font-size: 13.5px; line-height:1.7; max-width: 32ch; }
.footer-col h4{
  font-family:'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 18px;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.footer-col a{ font-size: 13.5px; transition: color .2s; }
.footer-col a:hover{ color: var(--orange-soft); }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  padding-top: 26px;
  font-size: 12.5px;
  flex-wrap:wrap;
  gap: 12px;
}

@media (max-width: 980px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .footer-grid{ grid-template-columns: 1fr; }
}