/* ========== Shared component styles ========== */
/* Imported by every page that uses the corresponding component
   from /js/components.js. Relies on the page providing the same
   CSS custom properties (see index.html / work.html :root). */

/* ---------- Footer ---------- */
footer[data-component="footer"]{
  background:var(--midnight-deep);color:var(--lionsmane);padding:64px 0 32px;
}
footer[data-component="footer"] .wrap{max-width:var(--maxw,1280px);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
footer[data-component="footer"] .footer-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3vw,48px);
  padding-bottom:40px;border-bottom:1px solid rgba(252,243,227,0.12);
}
footer[data-component="footer"] .footer-grid h5{
  font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--marigold);margin-bottom:16px;
}
footer[data-component="footer"] .footer-grid a,
footer[data-component="footer"] .footer-grid p{
  display:block;color:rgba(252,243,227,0.65);font-size:14px;line-height:1.9;
  text-decoration:none;transition:color .2s;
}
footer[data-component="footer"] .footer-grid a:hover{color:var(--lionsmane)}
footer[data-component="footer"] .footer-brand{color:var(--lionsmane)}
footer[data-component="footer"] .footer-brand .fb-name{
  font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:-0.01em;
  color:var(--lionsmane);margin-bottom:10px;
}
footer[data-component="footer"] .footer-brand p{
  color:rgba(252,243,227,0.55);font-size:13px;line-height:1.7;max-width:320px;
}
footer[data-component="footer"] .footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:24px;
  font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(252,243,227,0.4);
}
footer[data-component="footer"] .footer-bottom a{color:inherit;text-decoration:none;transition:.2s}
footer[data-component="footer"] .footer-bottom a:hover{color:var(--marigold)}

@media (max-width:720px){
  footer[data-component="footer"] .footer-grid{grid-template-columns:1fr 1fr}
}